The History of the World (Wide Web) Part 1

So tonight I saw a presentation at the local .net user group meeting on Silverlight. And though it was ok, I figured I could prob do better for the people who were wondering what exactly Silverlight was…

So tonight I saw a presentation at the local .net user group meeting on Silverlight. And though it was ok, I figured I could prob do better for the people who were wondering what exactly Silverlight was, and since this meeting was one of the most packed user group meetings I’ve ever seen, I figured there might be a few of them.

To understand better we need to first look at the history of the web.

Let’s go back… Way back to the beginning.

The Begining
In the beginning was the command line. But that really wasn’t that useful.

So one day at a place called CERN a guy called Tim Berners Lee (now Sir Tim Berners Lee) came up with this thing called Hyper Text to link together all the physics-y type information they had floating around at the particle accelerator.

For hyper text to work he developed a server that transferred these documents (the Hyper Text Transfer Protocol) of a specific type (Hyper Text Markup Language). To serve the protocol he worked on the first web server program – called Mosaic. And to read the documents he came up with a Hyper Text Markup Language Browser also called…. wait for it… wait for it… Mosaic.

Lots of people noticed that the linked hyper text documents when you drew out the connections between them looked like a web. This web soon spanned physics departments around the world and the web became the world wide web. (www)… or a net…. an internet.

This idea took off in certain circles, but was limited. The software for it was licensed in a some what drackonian fashion, and so these other guys decided they could do it better. So they created a program called Netscape Navigator.

Netscape Navigator 1.0
If you look at Netscape Navigator 1.0 today it’s pretty simple. All it can basically do is show you a document in plain black and white text along with links between pages (usually colored blue). The guys working on Netscape figured since they have to sell this better and it was taking off with others besides physics geeks that they needed to make it prettier, so they allowed you to also put images on web pages.

And thus the horror of web design was spawned.

Netscape continued to develop until version 3 when they hit the tipping point. Windows 3.1 and the then new Windows 95 exploded into peoples homes. People soon realized that they too could connect to the Web just like Universities had been doing for years. Soon regular Joes were surfing the web and making web pages, instead of just Physicists come Knights.

…. now hold on a second I’m going to completely change tracks for a second and we’ll come back to this point in history in a second….

With regular Joes making web pages, and surfing web pages it soon became apparent that you needed tools to make your web pages prettier than everyone else’s. And to do this Joe shmoe come new title of web developer needed publishing tools.

Up until this point there had been 2 companies making tidy fortunes developing software for magazine publishers to make magazines. Said companies: Corel who made Corel Draw (among other tools), and Adobe made this little program called Photoshop (among other tools).

Since then Corel has imploded while trying to diversify into the OS market with a crappy version of linux, and a deluded hardware expedition. Which means Adobe and Photoshop are responsible for Fark and icanhascheezburger, but they don’t really care since the retail MSRP for photoshop is close to $999.

But a funny thing happened in the graphics and publishing market… there was a dark horse, a third party, a company known as Macromedia.

Macromedia started back in the early 90’s with another name, and a program that made install shield type popup programs when you put a cd in the drive of a mac. But since it was a mac, it was more AV based. This program was what eventually became known as Shockwave.

(and my aside is done… for now… we’ll come back to it in a second)

So Netscape realized back in the days of Netscape 1.0 that they could never write code to display every type of file. They could do the big ones, like Jpeg, gif, txt, html. But there were a multitude of lesser known file types out there that they couldn’t write code to display, and if someone came up with a new file type they wouldn’t be able to do anything about it, after the code had shipped. So they single handily made tags that allowed you to embed other file types in your hyper text markup language pages. The embedded file would be downloaded by the browser and displayed by piece of code written by a third party, and if you didn’t have the piece of code that could display the file, the embed tag would also have information on where you could go to get it.

This soon lead to the horror that was known as Real Player and Real Media which we are only just recovering from.

But Macromedia looked at the web and thought it was boooooring (animated gifs of dancing kittens aside) and decided to take their Shockwave product, rip out all the code parts of it, and turn it into a plugin for Netscape so that you could load images, play sounds, and do simple navigation. The web instantly became more interesting, but at the expense of not being able to navigate directly to content using the address bar, and the back button.

The act of making what we now know as Flash, also meant that control of making web pages left the physics geeks and the joe shmoes, and now moved directly into the hands of the designers who used to only do magazines, and video stuff on the Mac. The web instantly became more pretty, and the yellow and green text on a grey background webpage quickly died out.

The thing was that Macromedia didn’t have that many coding geeks, and mainly had these designers…. so the programs that created these new flash files were designed for people who worked visually, and didn’t know $hit about coding.

Flash was easier to install than Shockwave and Shockwave soon died off (though it still lingers), and the dynamic coding stuff that used to be only in shockwave has since migrated to flash, but it hasn’t done so in a consistent or sane manor. The result is that action script (the programming language behind flash) is baling wire and bubble gum tacked onto the graphics system of the flash core…. (it’s a weird amalgamation of standard undergrad compiler design course pascal, a freaky subset of old school C, and just to make things interesting dynamically typed Javascript). The non programmer designers have learned it, but allot of the time (in my experience) don’t really understand what they’re doing, and looking at the language syntax, i don’t blame them. (but hey they’re usually visual learners, as opposed to most hardcore web geeks who are programmers, and more logic based)

Okay…. back to the browser track….

By the time Netscape Navigator 3 arrived Microsoft realized they’d been missing out on this whole web thing and decided to release Internet Explorer…. and… it stank… It wasn’t just bad, it was horrible. Even giving IE 1.0 away for free, people weren’t using it and were buying Netscape Navigator instead. But Microsoft had cash to spare and decided to keep on trying. So they released Internet Explorer 2.0… and it didn’t suck as much, but it still sucked. So Microsoft decided to get desperate and pre-installed Internet Explorer 3.0 on windows 98. And it was alright…. (this is also yet another proof that Microsoft doesn’t make a decent product until version 3… or at least 3.1).

Internet Explorer 1.0
IE 1.0

Internet Explorer 2.0
IE 2.0

IE 3.0
IE 3.0

But Microsoft being Microsoft did things their own weird way (and also a way to destroy Netscape using the sheer numbers of IE installed on windows 98). Not wanting to use Netscape’s pluggin architecture, they decided to do their own plugins, using a different tag (unfortunately so we had to write code for both and use weird <object><embed></object> type syntax). To do this they resurrected the horror that only true old school vanilla C developers understand:COM via OLE and re-branded it as ActiveX. ActiveX didn’t fare too well though…. maybe it had something to do with the fact that if you used it, any old Tom, Dick, or Harry could create a web page that would completely delete your machine… if you were lucky… if you were unlucky it would steal your banking info.

By this time Netscape realized they were in trouble and quickly released Netscape 4. (and Netscape 4.1, Netscape 4.2, Netscape 4.3 and Netscape 4.4) and at this time they started to whine about standards since both browsers were now reading the same documents completely differently.

Netscape Navigator 4

Chaos ensued.

Microsoft’s response in the ultimate version of marketing one up manship was to change the name of IE 4 to IE 5 and continue to stomp out Netscape where ever they could find them. Now Netscape had had to give Netscape 4 away for free just to compete with Microsoft.

By this time the Netscape Browser core had become a nasty mess of hacks and problems. The once tidy, small, and most importantly fast, core had become bloated and unmanageable. Netscape decided to start Netscape 5 from scratch…. and in the process went completely belly up. But in a last desperate move before being bought out by AOL, they gave away all their source code…. The Mozilla Browser was born.

Too bad Mozilla suffered from the same problems that the original Netscape code suffered from.

But from the ashes of Netscape, the Mozilla guys released Phoenix…. which became Firefox due to trademark lawyers.

Sooooo lets recap…..
Microsoft destroys Netscape to rule the web,
Adobe Destroys Corel,
And Macromedia Flash commits fratracide on Shockwave to do all the fancy smancy websites,
Programmers get muscled out of the pretty parts of the web,
Designers make the web pretty, but don’t know how code,
pain and misery for all…..

But what the FUCK does this have to do with Silverlight you say?

Glad you asked… We’re done with (most of) the history now and we’re getting to it.

So without Corel to pick on any more, Adobe got fat and lazy (See Adobe PDF Reader for proof). But these Macromedia guys started to really take over in the design space. They had a slew of useful programs that were starting to infringe on Adobe’s profits. Tools like Dreamweaver, Fireworks, Flash were leaving the web and were starting to infringe on Photoshop and Illustrator.

Adobe’s response? make a better product? No.

Send in the lawyers, and start to work on something that could stop the Juggernaut that was Flash.

Since the days of Sir Tim, at the beginning of the web, almost all the images on the web had been encoded in little points of color. Jpegs, Gifs, and Pngs are all made up of points of colors, that when you zoom in on them become squares. The thing was that for stuff like pictures of text and line drawings it was actually more efficient to store the pictures as individual brush strokes or vectors than to store the all those points.

Flash had a huge advantage here since from the beginning they’d had this vector stuff. Online flash animations aren’t stored as pictures that are flipped though, but as individual sketches, that were moved specific amounts according to math (cartoon animators are even doing cartoons directly in flash these days). The problem only got worse as people started getting massive monitors. Pictures that had once taken up the entire screen now only covered a fraction of it, but when you blew those pictures up, they became blocky and impossible to discern details. Vectors didn’t have that problem because they were all instructions on how to move pens…. just up the pen size when you needed to make things bigger, and the edges were still smooth.

This Vector technology, as well as the ability to combine it with old fashion pictures is the graphics core of Flash, and Adobe wanted in.

So Adobe created a new file format, called SVG, that supported all the new buzzwords. Underneath it’s XML just like the web itself, so browsers should have been easily able to open and display it, and they gave away the specification on how to create and read these files, so that any coder could use it, but the best way to create these files was with Adobe tools.

Add a little animation and sound to this file format and you had the equivalent of early versions of Flash. And since it was text just like a webpage, anyone could read one, and create one. So that’s exactly what Adobe did. The best place to see SVG these days is in the icons on a linux system. They scale nicely from your cell phone’s 2 inch screen that’s running some stripped down version of linux, to the massive displays of the latest generation of desktop computers.

It could have worked, but it wasn’t as simple as Flash. The code to animate stuff had to be done by hand and was basically raw javascript. Javascript’s great for little stuff on a web page, but write more than a 100 lines or so and it becomes a nightmare. Tools for authoring it were never developed, Flash was just too pervasive. It didn’t help that Microsoft got lazy and wouldn’t make IE read the new file format… and IE now had 95% of the market share.

So what was Adobe to do?

The answer came only just (relatively)recently… they gave up on pimping SVG, and just bought out Macromedia instead. So now it’s not Macromedia Flash, it’s Adobe Flash.

But Adobe wasn’t alone in trying to kill off Flash. Microsoft had also been eying it. Flash has never played nice with browsers, and was taking over more and more of the web.

So Microsoft decided that flash had to die.

The Brutus of this assassination?…. his name is Silverlight.

Back after the disaster that had been Windows ME, Microsoft decided to completely re-write the core of their consumer Operating System. What eventually became XP started off as the core of Windows 2000. Looking at the technology to make a properly modular operating system, they decided to end the developer nightmare that had become known as DLL hell (a side effect of COM and ActiveX). The new technology to make sure all the back end plumbing of the new operating system didn’t self destruct was the underpinnings of what’s now known as .NET.

A large portion of the hydra known as .NET is really just the next version of ActiveX, which in turn is the latest version of OLE, which is the latest version of COM. But Microsoft finally got it right (Notice that we’re beyond the 3rd version????). Up until this point the best way to develop ActiveX and OLE was to use VisualBasic, but by this time Visual basic had accumulated more cruft than a prostitute at a bukakke convention. It didn’t help that Visual Basic wasn’t really considered a proper language anyways.

Seeing the number of changes that would be required for VB to work with this new OS back end of XP, Microsoft made a brave decision to start fresh. Tabula Rasa… They decided to completely over haul VB, and while they were at it the entire set of development technologies that powers windows. At this time Sun’s Java was making a big splash in academic circles, but let’s face it Sun didn’t have the 800lb gorilla that was Visual Studio, and the millions upon millions of windows business developers needed to create critical mass. Microsoft again decided to Destroy a potential rival, and the .NET programing suite was born. Allot of the .NET Runtime’s features are direct spin offs, or FU’s at Sun’s Java. Sure technically .NET was an ECMA standard that could run on any platform (a great out with anti-trust lawyers that after the whole Netscape thing were circling Microsoft like a pack of hungry Sharks), but they never expected some insane individual to actually go and do it.

Anyways after the launch of XP and .NET, microsoft realized they had a new very powerfull tool. .NET soon found its way into everything Microsoft touched. PDA’s run a very small version of .NET, and the latest PDA operating system developed by Microsoft was developed almost completely in .NET. Using the PDA code Microsoft also created a slew of new products. It’s an upgraded version of this compact runtime that runs the Xbox. It turns out the whole multi platform targetability of .NET was actually useful as opposed to an out with the lawyers.

By this time the line between a desktop program, and a web page had started to blur. Technically Microsoft started it, when they included a piece of ActiveX code with IE 3 that allowed the web page interface of Microsoft’s Email Server program Exchange to send data back and forth to the server without the user actually doing anything. This was an updated version of an idea the Netscape guys had had in Netscape 2, but had never put much effort into.

Smart people looking to recover after the 2001 .com bubble soon seized on this technology after Google used it to automatically update your inbox in Gmail. But it took someone with a touch of marketing savy to change the name that had been XMLHTTPRequest into the more palatable AJAX.

This blurring of the lines in programming scared Microsoft silly. The part of Microsoft that actually made windows, was only really operating at break even profitablity. The real money was in the Office Suite. But if people could run Office from web pages, Microsoft would loose it’s nice little monopoly. Without the need to run Office, people wouldn’t need Windows, and the river of money that Office generated would dry up.

That being said there were still a few places where web pages couldn’t compete. The interface was slightly klunky, and differences in browsers also meant that web pages usually looked slightly different on different web browsers. But when people combined the AJAX technology with Flash, you had a program/web page that behaved like a program, but didn’t require an installer, was always up to date, and was accessible from anywhere, all you needed was an internet connection. These new web applications known as Rich Internet Applications (RIA) were deemed the way of the future, and since Adobe wrote the code that displayed the graphics it always looked the same on any platform. Microsoft was loosing control and they were terrified.

So a few years ago (from today, early 2008) Microsoft began to line up Flash for a killshot.

Eventually rumors leaked out of Redmond that Microsoft was beginning to work on a Flash killer. It even got a code name: Sparkle. Though for the longest time that was all that anyone knew. Adobe/Macromedia didn’t take this sitting down. They’d picked up Allaire a few years before (mainly to kill the largest competitor for Dreamweaver at the time Homesite), but in the process also got a technology called ColdFusion. This had been the main competitor for ASP 1.0, but Microsoft had figured it defeated ages ago. Adobe/Macromedia leveraged this technology to create FLEX, a back end system for Flash that allowed the Flash RIAs to behave more like programs, with better data transmission systems back and forth from the servers, as well as the ability to operate offline.

The thing was, Flash had never been designed for this new programmability. Action script was and still is creaking at the seams as it desperately tries to hold together the logic that controls Flash Animations. The Designers didn’t really understand how to program it, and Programmers couldn’t stand the interface and design decisions that had been made for the Designers. As a result FLEX has kind of been a dud.

And it appeared that Microsoft was doing nothing. But deep within the bowels of Redmond, Microsoft was lining up the big guns to fire a broad side at Flash.

Oddly enough the underpinnings of this technology which we now call Silverlight started with the same concept as Adobe’s earlier efforts to confront Flash with SVG. Microsoft defined a new document format that looked almost exactly like SVG called XAML. Technically Microsoft says that XAML was developed for the new consumer operating system called Vista.

Modern operating systems are again suffering under the same strain as web pages, with respect to the massive disparity in size of monitors used to access them. A 32×32 pixel icon that had been an inch square on on Windows 95 was now only an 8th of an inch wide on the new 30 inch monitors, but the same code is expected to run on an Ipod like device where the entire screen is 3 inches across. Again vector based file systems came to the rescue of Vista… it allows for skinning applications and all the pretty ness of the OS.

Microsoft called this new graphics technology WPF (windows presentation foundation), to replace the GDI (Graphics Device Interface) that had been around since Windows 95. The thing was/is, Vista has kinda been a dud as well… It’s too bloated, too slow, and doesn’t offer enough over XP to really justify the insane upgrade price, let alone the confusion over which version to buy among the 28 SKUs.

As a kind of aside to the announcement of WPF Microsoft also mentioned it was working on an extension to it called WPF/E (Windows Presentation Framework/Everywhere). Lookup WPF/E in wikipedia and you get redirected to Silverlight’s page… this was the unveiling of Microsoft’s Flash killer… but like the flash of artillery being fired over the horizon, it’s very easy to over look what’s been unleashed.

So….. Time for another recap…..

Adobe becomes scared of Macromedia and Flash and introduces SVG,
Microsoft becomes scared of Macromedia, Flash, and the tech they introduced in IE 3,
Adobe tries to make a Flash competitor, thinks better of it, and decides to subsume Macromedia instead,
Microsoft has a version of cross platform Java that actually works from their (then) new operating system XP,
Microsoft decides to kill Macromedia Flash, now Adobe Flash.


But what exactly is Silverlight?

In simple terms, it’s a new XML based vector file format called XAML, that runs inside of a Plugin in your browser powered by a version the .NET compact framework… and that’s it.

Microsoft has stripped of the graphics sub system of the new Vista OS, packaged it so other operating systems can run it, or at least implement their own versions of the Vista graphics system in side a browser.

Ok…. so what’s with this Silverlight 1.0, Silverlight 1.1, and Silverlight 2.0 stuff?

Well Microsoft realized that they needed to get this stuff out, or vista would never launch, and also build some excitement among the developers, developers, developers. So Microsoft took the number one feature of flash currently, aped it, improved it slightly, and released what they had to excite people, and get the intended target audience of this new technology (in this case their standard ASP.NET developers, and Graphical Designers) to point them in the right direction so they could release a killer product. What was this killer feature they copied from Flash? (the developers link above is a hint).

Online Video.

It can be argued that Youtube couldn’t have existed without Flash. Real Networks had tried something similar, with their horrible Real Media plugin, and it’s Library Feature that linked to featured videos where they hoped they could force you to watch commericals back in 2000. Apple had also stumbled upon online Video back in 1998 with Quicktime, but had never tried to capitalize on it… (even though their trailers page on the website was once one of the most highly trafficked sites on the Internet).

So Microsoft releases Silverlight 1.0 which is basically the XAML interpreter, and video codec player inside a browser plugin along with some javascript sprinkled on top, all so that you can create your own version of Youtube in 10 minutes. (Infact if you look at all the tutorials on Silverlight 1.0 and that’s about all it does). With this release Microsoft has released a tool that allows programmers who are used to dealing with xml, html, and javascript to take back the web from the flash designers, who’d made it pretty, but didn’t quite get the whole functionality part (or at least their tools didn’t).

This is big news, but it’s no Killer app.

But a few weeks after they release Silverlight 1.0 they tell developers about Silverlight 1.1. They release a very early alpha of Silverlight 1.1 along with some tools for it and ask for feedback from the developers, developers, developers.

What is silverlight 1.1? It’s Silverlight 1.0 + a new version of the .NET compact framework.

Among the first demos of Silverlight 1.0 are games that look like the flash games that are so pervasive. The thing is that these are developed in Javascript, and to be frank, are a pain to build and maintain. So what’s promised in Silverlight 1.1? A .NET runtime interpreter that can interact with the XAML design elements.

That means you can write c#,, and .net language, even code to manage what you see inside your browser plugin on someones client machine.

This is what the fuss about Silverlight is about. It’s a true Flash Killer, as it has the graphical ability, small plugin size, and multi platform capabilities of flash, but it’s easy to program in (and it uses an existing knowledgebase) inside THE best development environment out there, Visual Studio.

The thing was that Silverlight 1.1 was a reaaaaaaallllly early alpha. There was no controls, no real gui tools for programmers or designers to work with when trying to interact with this programming back end. The implications of this are huge, as are the timelines before the final version is relased, and to reduce confusion between the two versions (as 1.0 is nothing like 1.1) they rename Silverlight 1.1 to Silverlight 2.0.

OK, cool, but why will this succeed when Adobe’s effort failed?

A) Microsoft is pimping it, and they’re not afraid to spend big time money to do so.
B) It has online video which was one of the major features that SVG lacked (mainly due to codec licensing issues)
C) Microsoft has also released tools to create content for it as well….

That last point is what would have me quaking in my boots right now if I was Adobe. To support Silverlight Microsoft has also released the Expression Suite. It includes several SKUs.

  • Expression Blend: Microsoft’s answer to Flash Studio, it’s also the interface point between Developers and Visual studio, and Designers and their graphics tools.
  • Expression Design: Microsoft’s answer to Adobe Illustrator… THE industry standard when creating vector graphics.
  • Expression Media Encoder: Microsoft’s answer to a light weight verison of Adobe’s Final Cut Pro. Designed expressly so that you can edit and encode video for the web, and your own personal Youtube knockoffs.
  • Expression Web: Microsoft’s answer to Adobe Dreamweaver. Granted Microsoft hasn’t had much luck here in the past with their sad Frontpage story, but it’s designed as an also has feature inside the Expression suite, a free gimmie…. It also uses the same layout rules as Visual Studio, so that when your graphics designer creates a site template, it translates seamlessly to when a programmer has to add code to it, instead of slicing and dicing, and ruining a layout a designer created so you can add the goodness.

These aren’t just regular Microsoft creative tools either:
Expression Blend

Just looking at these you can tell Microsoft is serious about competing with the Adobe CS suite. The interface is entirely different from all standard Microsoft Development technologies. These tools have been designed explicitly for Graphics Professionals, not developers who think they know design.

Granted that these are Microsoft version 1.0 products, but you can tell Microsoft isn’t messing around here.

Usualy I also like to point out things outside of the microsoft koolaid when looking at their new technologies. (Maybe it’s my contrarian nature). But it’s worth mentioning a few other points on why silverlight is so exciting.

  1. They’re bringing this to the Mac. Traditionally the Mac has been the Red headed step child of Microsoft’s development efforts. But they’ve released Silverlight on Safari right off the bat.
  2. They’re supporting Firefox out of the box as well. It’s kind of interesting that alot of Microsoft’s own developers aren’t using IE7 either… and that they realize that to they need to cover all their bases when dealing with this
  3. That crazy guy I mentioned before? He’s implementing this on Linux, in an open source way. That means it’s possible that Silverlight will run on what ever piece of hardware you through at it eventually (The story of how he started the Moonlight project is also amazing)
  4. The fact that Microsoft is actually helping Miguel as well

As you can obviously tell, i’m excited about Silverlight, and after suffering though my tome here, i hope you are too.