Philosophy
The goal of this paper is to present an objective comparison between Silverlight 5 and HTML 5 (with: JavaScript / ECMAScript 5 + CSS3 + any required additional frameworks and APIs). We will only focus on some features: covering these technologies entirely would require a whole book.
The main idea is to provide a guide to help you choose a technology as part of a planned project.
All decisions elements could not be presented here of course. You should take this document as a help to decide rather than as an absolute truth.
In each chapter we will focus on functionalities but also on ease of implementation and performance. The goal here is not to study in detail the features of HTML 5 or Silverlight 5.
Sample source code is available here.
To install Silverlight 5 beta you can go here.
HTML vs XAML
The two competitors are tied on the philosophy as they are both based on a markup language (HTML and XAML). They also both make extensive use of attributes.
Extensibility
Silverlight 5 allows you to add custom attributes to existing tags via attached properties. It is also feasible in HTML 5, but through the use of an inelegant hack (if HTML 5 does not recognize a tag or an attribute, it will just ignore it. Javascript can then process this information to add the required behavior). An implementation example of this usage is the project KnockOut.
On top of that, Silverlight has the Markup Extensions that add behavior to existing attributes (including Binding or even custom behaviors). Moreover, the list of tags is not fixed since it is possible to develop ones own controls providing a real advantage in the industrialization of a Silverlight solution.
DOM access
In Silverlight, each tag can be accessed directly from the code behind using association by name (x: Name). In HTML 5, it is possible to do the same with the attribute 'id' but only in certain browsers (IE, Chrome). We must therefore go through Javascript’s location services by id, which slightly penalizes ease of development:
var toto = document.getElementById('toto');
toto.style.visibility = 'hidden';
Regarding the traversing of logic trees, Silverlight and HTML provide equivalent related services.
It is however worth noting that HTML 5 offers a query tool for its DOM named Selectors API. This enables very efficient search across the objects on the page using selection queries:
var alerts = document.querySelectorAll("p.warning, p.error");
In this example, we ask the API to return the list of paragraphs whose class is "warning" or "error". You can also query for IDs, types and many other criteria.
