Monday, February 08, 2010

Top Reasons why HTML 5 is not ready to replace Silverlight

by bartczernicki.nospam@nospam.gmail.com (Bart Czernicki) via Silverlight Hack on 2/8/2010 10:31:00 AM

Note: I know this topic is controversial, so I want to preface that this article is meant to be a conversation.  If you don't agree with something or I have information incorrect, please add a comment or e-mail me.  As the HTML 5 spec evolves, I will update this article.

HTML 5 is the next update to the HTML standard that powers the web.  There are many new exciting features being added like the the canvas element, local offline storage, drag and drop and video playback support.  HTML needed to evolve and added these features in order to stay relevant as the de facto markup language that can provide a rich web experience. 

This upcoming featureset is encroaching on areas dominated by RIA (Rich Internet Application or Rich Interactive Application) frameworks like Flash, Silverlight and JavaFX.  Unlike most RIA frameworks, HTML is not a proprietary language/framework and its standards are maintained by the World Wide Web Consortium (W3C).  This has led speculation that HTML plus the new RIA-like features can spell doom to proprietary RIA frameworks.  This article aims to cover what is in HTML 5 (as of February 2010) and how some features in the spec are lacking compared to RIA like Silverlight.  This is not a complete overview of HTML 5, nor is it a "HTML 5 vs. Silverlight" article.  Below is a quick list of items that I will be covering to try to prove my assertion that HTML 5 is not ready to replace RIAs like Silverlight:

• HTML 5 is not here...Yet
• Audio and Video Tag limitations
• Web Browser Compatibility
• Javascript Limitations
• Productivity
• Only targets the general Web
• No webcam or microphone device support
• HTML 5 standard or Google/Apple spec?
• HTML 5 is already behind Silverlight
  

HTML 5 is not here...Yet

There are some really nice demos appearing of certain HTML 5 features (HTML 5 capable browser required like Safari, Chrome or Firefox 3.x).  As you can see, HTML 5 is very capable in creating RIA-like experiences:

• Wolfenstein in HTML 5 
• HTML 5 and Twitter
• Cloth physics in HTML 5
• Cool HTML 5 Paint App

A very large majority of current "HTML 5 demos" center around three key features: the new canvas, audio, and video tags.  The HTML 5 spec is MUCH larger than this.  For example, look at how many differences there are between HTML 4 and HTML 5.  However, many people (including technologists and developers) see one or two demos called "cool HTML 5 demo" and clamor on Twitter that RIA frameworks are gone.  If you dig down deeper, only a small fraction of the HTML 5 spec is implemented in some of the browsers.  Furthermore, the HTML 5 spec is still evolving (You will see some examples below of changes that have occured in the last few weeks).  Some have speculated it might take three to five years to implement the "full" HTML 5 spec once it is finalized.  Will it take that long?  I think companies like Google and Apple who have a very strong vested interest in moving HTML 5/WebKit along are going to push this faster.  However, the HTML 5 spec has to be finalized FIRST (to see the full scope of the implementation) before we can speculate on how long the undertaking will be.

Audio and Video Tag Limitations

One of the biggest additions to the HTML 5 spec is the audio and video element tags which allows you to embed media files directly into the HTML markup.  This allows you to use these media files very similar to the way you would use the the img tag for example.  Providing the location of the resource is all that is required (Additional attributes allow you to create the behavior of the media elements such as streaming).  This is a simple and standard way to enhance your HTML with media files.

HTML 5 video tag markup from W3 Schools

I think HTML takes the right step with the audio and video tag additions.  However, providing a great multimedia experience is more than just playing a video file or a music mp3.  Here are some limitations of the audio/video elements and how it compares to Silverlight:

• Realtime manipulation/inspection of audio files is not possible.  You can set some additional options like autoplay or buffering; however, you cannot manipulate the audio stream and provide your own equalizer changes.  Flash and Silverlight both can do this.  The HTML 5 audio tag will simply not suffice for more advance scenarios.
• Limitations of the video tag (similar to audio tag).  You can set options like autoplay or buffering but more common and advanced features are missing.  In Silverlight, you have a wide array of options like applying shaders directly to the video and smooth streaming in HD 1080p.  These options allow you to provide a much richer and advanced video viewing experience.

HD Silverlight video with a 3D transformation and pixel shaders applied in real-time (from Mix 2009 conference)

• No DVR-like/smooth streaming capabilties.  Creating a video viewing website like YouTube is possible in HTML 5.  In fact, Youtube is experimenting with delivering its own video content via HTML 5.  However, if you want to create a rich DVR-like experience with live video, you need a technology like Silverlight.  Silverlight's HD smooth streaming allows for picture in picture, pausing live video, rewinding, slow motion and downstreaming when bandwith slows down.  With smooth streaming, the buffering is minimized and you can jump to different spots of the video almost in real-time.  You can try the Silverlight smooth streaming experience here (Notice how the experience is better than just a simple YouTube video). This technology is so poweful that Silverlight smooth streaming is being used by the NBC Olympics and Netflix to provide HD video in 1080p to tens of millions of consumers.   This is the difference between a one-way stream from server to host (i.e., HTML 5 progressive download with simple stop, pause and play) and a two-way stream the viewer can interact with (i.e., the DVR-like experience).
  • Note: Providing an engaging experience to users is a huge deal.  Users who use DVR-like functionality watch three times more video than users who do not.  What does that mean?  Web sites that use a more engaging technology keep the viewers at their site. This is not limited to just Silverlight.  For example, MLB.com provides a very similar experience using Flash with HD add-ons.
• Content protection/DRM does not exist in the video tag in HTML 5.  This is a huge problem for hosting copyright or sensitive content that you don't want viewers to copy or save to their hard drive.  Can you imagine Netflix using an HTML 5 video tag for a new Hollywood movie and everyone were able to save a copy to their hard drive?  Until this changes, the HTML video tag will only be used for non-sensitive media.  Silverlight supports a variety of digitial rights management architectures/encryption options.
  • One simple test is to go on YouTube and play a movie.  Next, go to your temporary internet files folder and find a file that was generated around the time you watched the video (It should be one of the largest files).  Rename that file to an .flv extension and the file is yours.  This is possible because progressive download temporarily stores the video file on your hard drive.  This makes simple tools like downloadyoutubevideos.com possible.  As you can see from our simple little test, this simply will not fly for any commercial media.

Note: Silverlight is not the only technology that offers smooth streaming.  Apple's Quicktime Streaming and Adobe's Flash Media Server are two examples of technologies that offer streaming and DVR-like capabilities.  It is worth noting that Silverlight Smooth Streaming is a FREE value-add to Windows Server 2008 IIS 7.x.

Web Browser Compatibility

The HTML 5 spec is partially supported by the latest versions of Safari, Chrome and Firefox.  Internet Explorer from Microsoft is the key browser missing HTML 5 support.  The fact remains that Internet Explorer is still one of the most widely used browsers in the world.  Designing a site without Internet Explorer in mind would probably not be a great idea.  Isn't evil Micro$oft simply blocking innovation?  I don't think so.  Internet Explorer 9 is rumored to have HTML 5 support.  Furthermore, Microsoft would further degrade the use of Internet Explorer if they simply decided to skip the HTML 5 standard.  No matter what your open-source/Linux fanboy tells you, that won't happen.

Let's say the next version of Internet Explorer comes out and it supports HTML 5 tomorrow!  As an architect/CTO, are you going to design a new web site in HTML 5 with over 66% of the web running Internet Explorer 6-8?  There are so many web connected devices out there that simply will not support HTML 5 for a long time.  Remember web connected devices include mobile phones as well.  Furthermore, many casual users (like your parents) may not upgrade their browser for the entire lifetime of the "family computer".  Furthermore, the HTML 5 specification is pretty big and different browsers support various features.  You can see from this Wikipedia article that no current browser supports the current HTML 5 spec (because it is still evolving).

Internet Explorer is losing its dominance. However, even a 10% drop would be equivalant to hundrends of millions of users stopping use of Internet Explorer.  I don't see a 20% drop until two to three years from now.  You can check out the web browser trends for yourself: http://statowl.com/web_browser_market_share.php

Note: Providing fallback markup is a valid option; however, this leaves yet another architecture/code path to put through QA.  That works great for sites that are template-based (like YouTube).  However, creating a large scale business app with fallback markup has a large cost associated with it.

Javascript Limitations

If you have done any sort of web development, you have probably used Javascript to provide dynamic content on the client browser.  The same applies for manipulating HTML 5 content.  So what is the problem?

• Javascript does not provide a true parallelism.  Today's desktops and laptops come with two to four available cores.  Even future iPhone specs plan for multiple cores.  How can you rely on a language/framework that can't take advantage of all available cores?  Silverlight's .NET framework can scale up to eight processor cores.  You can see my two previous articles on how this makes a pretty substantial difference in performance.
  • Note: Web Workers for JavaScript will eventually provide the ability to utilize multiple threads.  The problem is that Javascript is a hybird between a imperative/declerative language.  For example, parallelizing for loops is not going to be possible without a re-write.  In .NET, I can use LINQ/F# or other declarative techniques to easily parallel multiple tasks.
• Javascript is a cross between a functional and object-oriented language.  It implements only some of the functional and object-oriented language features.  The great thing about being based on the .NET framework is that Silverlight dynamic content can be created using C#, VB.NET, F#, and Iron Python (dynamic langauges).  This gives you tremendous flexibility and functionality that Javascript simply does not provide.  You can chose the right language for the task.  Some languages provide features that others do not (even in .NET).  For example, take a look at my asynchronous workflows in Silverlight with F# article.  
• Javascript limits code sharing.  Do you have any server component code written in Javascript?  Stupid question, right?  However, if you are a .NET shop, you probably have business rules engines or components written in a .NET language.  The great part about this is that this code can be distributed to the Silverlight client.  Another example of sharing Silverlight code is with WPF.  Because both technologies have a lot of synergies, a large majority of code can be shared between Silverlight and WPF.  In the near future, this will be expanded to Silverlight Mobile as well.
• Javascript is not the fastest framework.  There is not much to be said here.  There might be some minor exceptions but a well-written JavaScript application will almost always perform slower than a similarly written .NET Silverlight application (If anyone has examples that differ, please share).
• Code Security.  Javascript suffers from the fact that the code can easily be inspected using just the browser (page -> view source).  Silverlight suffers a similar fate.  However,  Silverlight code is harder to inspect.  You essentially need to find the cached assemblies and use a tool like reflector to dissasemble them (Silverlight Spy is another tool that can inspect Silverlight code on the fly). However, as mentioned before, a person that wants to reverse engineer a Silverlight app has to go through more steps.  If you must deploy Javascript or Silverlight code on the client, always use an obfuscator and make the hacker work harder. :)
  • Note: As a rule of thumb, any code that you consider IP should not be placed on the client. 

Productivity

In this article, I define productivity as a set of architecture and design tools, add-on frameworks, and developer tools that makes me more efficient in crafting and maitaining an application.  HTML, CSS and Javascript suffer from a wide variety of productivity problems.  Have you used a web tool that does everything for you on a complex project?

• HTML and CSS problem. CSS is language that allows you to enhance HTML with styles.  The combination works great in theory.  However, as the web has evolved to more "fluid HTML/CSS" designs (i.e., div tables with CSS), the web tools have struggled to catch up.  Furthermore, browsers like IE not supporting all of the CSS 2.x standard has led to cross-browser compatibility issues.  This has led to developers having to jump around manually getting their hands dirty in CSS (While that is not bad, it's not productive).  CSS is not a pretty language and large stylesheets are a MESS to work with.  For example, try looking at the CSS for SharePoint 2007.  This has been solved by creating CSS Metaframeworks that allow for cool features like CSS style inheritance which translates to smaller, more maintainable CSS.   Which web design tool that you use integrates with a new open-source meta framework?  Sure, the preview might work; however, you are still manually editing CSS in the end.
• I can do anything that Silverlight can do with [insert web framework here]. I recently got into a debate with a web developer about Silverlight.  All the things I was listing Silverlight can do, his reponse was, I can download "this open-source framework".  Want to improve HTML DOM development? jQuery.  Need a declerative query language like .NET LINQ? jLinq.  How about a Javascript charting package? JS Charts. By the time we were done, his application included five to six additional frameworks.  I find this a productivity problem for a several reasons:
  • Open source/commercial javascript frameworks rarely integrate easily with web design tools (Some frameworks like jQuery that are hugely popular have enterprise tool integration like in Visual Studio 2008/2010).  An add-on framework will help productivity; however, the developer is not working in a design tool 100%.  Therefore, they are not being as productive as they can be.
  • Designers cannot design.  This makes the entire process of web design much harder for non-developers.  A designer should work in a design canvas and have the end result automatically translate to the markup language and pass this off to a developer for interactivity.  How is this possible with HTML/CSS/Javascript not being standardized in simple design tools?
  • Add-on framework maintenance.  On large-scale projects having to juggle multiple add-on frameworks can waste a lot of time.  For example, picking the correct framework, ensuring licensing is compliant, is the framework going to be maintained in the future, etc., are all tasks that need to be handled by someone.
• Cross-browser issues.  Cross-browser issues are still a huge problem even for large companies like Google who announced this year they are phasing out Internet Explorer 6 support.  There isn't much to add here.  However, if you are a web developer and have not faced these issues, I would like to meet you. :)
• Control/UI component development. Support for creating reusable UI components in Javascript is virtually non-existant.  It requires developers to be involved and write Javascript that crafts dynamic HTML.  For example, how would you create a Javascript control that renders a gauge?  
• Integration with server technologies. Working with technologies like ASP.NET or PHP adds another level of complexity to HTML.  This further degrades productivity having to work with manage local client state (i.e., cookies, temp cache).  Tools like Visual Studio do a very poor job in making a designer feel like home when having to integrate server/client technologies together.

The Silverlight framework handles the productivity issues in a cohesive set of tools that include design tools, developer tools, and a rich .NET foundation.

• Many architectural/code patterns can be leveraged using .NET:  MVVM/commanding design pattern is built into Silverlight 4, MEF allows for loose coupling of components, Silverlight Unit Test framework, LINQ (declerative query framework for data structures), asynchronous programming model, functinal language support like F#, etc.
• Silverlight and the accompanying control toolkit include a ton of controls that can be easily extended or styled.  (Toolkit is open-source).
• Advanced media capabilities like encoding an HD smooth streaming video and providing a DVR-like experience to the viewer can all be done with Expression Encoder and the Silverlight Media Framework.
• Developer productivity is powered by Visual Studio 2008/2010 and the Silverlight framework.  Debugging parallel tasks in Visual Studio 2010 is easier than ever.  If you want to know if your application is taking advantage of GPU acceleration, Silverlight can highlight the areas affected!  Furthermore, helpful tools like FPS counters are all built into the framework.
• Design in Silverlight is done using Expression Blend.  This tool can be used by both designers and developers to create UI controls, interactivity, and transitions easily in a single form.  The combination of design features like Sketchflow, behaviors, design-time data and visual state manager allow designers to design without writing code.  These tools allow designers to perform tasks like applying a pixel shader to a video, adding physics (gravity) to an object, and being able to create design-time data representations without writing any code.

I could add a lot more to this topic.  However, my experience on working on Silverlight has been "night and day" in terms of productivity.  Projects I have worked on allowed developers/designers to seemlessly create complex controls and extend existing ones and create very unique product designs.  The combination of Silverlight frameworks/tools and what you gain from .NET makes it a pleasure to work with compared to HTML/Javascript/CSS.  The tools that accompany the HTML 5 spec have to truly go through a revolutionary transformation in order to keep up with the design experience provided by Silverlight and Flash.

Only target the general Web

HTML 5 is a markup language for the web.  You essentially need a web browser to interpret HTML content.  Silverlight allows you to write once and deploy to desktop, web and now Windows Phone 7/Symbian/Android.  Additional features like multi-touch features allow you to take advantage of next-generation hardware natively, without having to rely on the browser.

Note:  I realize that technology like Mozilla's Prism allows for "installing" HTML/Javascript sites locally on the desktop.  But that technology is not very popular and I haven't met anyone that uses it widely commercially,

No Hardware Acceleration for Graphics (GPU support) or 3D support

The current HTML 5 spec does not have support to offload rendering to the GPU.  There are plans to support it in the future with WebGL technology using the HTML 5 canvas.  WebGL should provide 3D, hardware-acceleration, and pixel shaders to HTML/Javascript.  Silverlight (as of Version 3) already supports 3D projections, hardware-acceleration, and Pixel Shader 2.0.  Furthermore, the GPU acceleration is not limited to just one layout control (canvas in HTML5).  There are also many physics and 3D engines out there for Silverlight.

The screen shot below is from a chapter in my book that shows a piece of XAML layout that was GPU accelerated.  As you can see, GPU acceleration does free up noticable CPU resources.

One of the ugly parts of the WebGL implementation is that you are still using Javascript to provide dynamic content to the 3D Canvas.  I can imagine this being passable for simple 3D demos, but it won't work for complex interactive 3D scenes.  Doing complex 2D/3D vector math or matrix computations in Javascript isn't going to perform well.  For example, some military simulations for the HUD of a cockpit use a Flash UI for training.  Rendering these complex visuals and providing real-time event-driven calculations is important.

Broad WebGL support is probably a ways off as the spec is still changing.  The future Firefox 3.7 release will suport WebGL/3D Canvas. Other browers like Chrome and Safari will get support as well via the WebKit compatibility.  I would estimate we should see decent WebGL support for Chrome, Firefox and Safari in one to two years.  The reason why I think it is still a year (or two) away is because there are major revisions yet to be implemented and tested.  Furthermore, WebGL is an extension of the HTML 5 canvas.  Therefore, it would make sense that once the canvas tag has matured, WebGL will probably have some upcoming changes.

No Webcam or Microphone Device Support

Providing device support integrated into the browser is a huge deal for social, collaboration, and media applications.  Web cam and microphone device support is becoming a big deal for mobile applications as well.  The HTML 5 spec does not support these devices.  There is a plan to add device support in post HTML 5 (5.01 or 5.1, etc.)  Conversely, Silverlight 4 supports both of these devices.

Augmented Reality Applications (shown below), web conference/chat (chatroulette.com), or real-time photo manipulation (and more) applications can all be done with Silverlight 4 device support.  (As the HTML 5 spec stands now, these types of applications cannot be done natively with HTML/Javascript).

Rene Schulte's great example of Silverlight 4 augmented reality

HTML 5 standard or Google/Apple spec?

A large majority of the HTML 5 spec is being pioneered by the Google and Apple engineers; not that this is a bad thing.  However, note that both Google and Apple do not have RIA or popular graphics frameworks.  They have to do something and have a very vested interest in HTML 5 coming out ASAP.  Rather than creating their own RIA-type frameworks, they are trying to evolve the HTML 5 spec to compete with the rich RIA web experiences.  Here are a couple of interesting points to think about:

• Do you trust Google to evolve the spec "the right way"?  Google has this aura of being the "not evil corporation" which you would be naive to truly believe.  Will they push for a HTML 5 spec that is serving their own services/technology roadmap or pioneer changes for the greater good of the web community?
• Adobe is a wildcard here.  What if Apple purchases Adobe? (This acquisition makes sense on many levels).  Will Apple still be as vested to evolve the WebKit/HTML 5 spec?
• Apple has a proprietary/highly locked down framework with the iPhone/iPad SDK.  What if they decide to use that as the next RIA alternative? You have the same framework on smart phones/tablets; why not move it to desktops?
• Will Apple/Google alienate other companies like Microsoft, SAP, Oracle, IBM with the way the spec evolves?

HTML 5 is already behind Silverlight

This is the last point, however the most important.  After reading all of the "new" HTML features like: video tag, audio tag, canvas, Web Workers, WebGL, future device tag support etc. you should have realized that HTML 5 is JUST CATCHING up to Silverlight.  Furthermore, the HTML 5 spec is not close to being implemented. Lets assume that the full HTML 5 spec is implemented in 2 years (assuming a very aggressive schedule)...where will Silverlight be by then?  Silverlight is on about a 9 month release cycle.  Therefore, by the time HTML 5 is "implemented"...Silverlight will be on version 6 or 7of the platform.  HTML will have to play catch up....again.