Wednesday 12 September 2012

HTML5 or Silverlight Applications


Should I use HTML5 or  Silverlight in my Applications?

Hi friends,

Today I will introduce comparison between HTML5 and  Silverlight 5. Below I have added some points on both the technologies.


1.  HTML vs XAML

The two competitors are both based on a markup language (HTML and XAML). They also both make extensive use of attributes.

2. SVG vs Shapes

Silverlight 5 and HTML 5 both offer the possibility of using vector graphics. A vector drawing is composed of geometric shapes unlike bitmaps whhich work with pixels.
SVG (Scalable Vector Graphics) is the technology for vector graphics in HTML 5. It has the following basic items:
  • Rectangle
  • Circle
  • Ellipse
  • Line
  • Polyline
  • Polygon
  • Path (with control system: MoveTo, LineTo, …)
Silverlight uses the classes inherited from the base class Shape to define the basic geometric shapes:
  • Rectangle
  • Ellipse
  • Line
  • Polyline
  • Polygon
  • Path (with control system: MoveTo, LineTo, …)

3. Canvas vs WriteableBitmap

Silverlight 5 and HTML 5 both offer the opportunity to work on 2D surfaces at the pixel level directly. In HTML 5 this surface is called a canvas and we talk about WriteableBitmap in Silverlight 5.

Access to the pixels

The two surfaces are both capable of drawing basic shapes (like SVG / Shape) but mostly they allow direct access to their contents as RGBA (in HTML 5 we handle 4 integers per color) or ARGB (Silverlight handle 1 integer for each color with each element occupying 8 bits).

4. Brushes

Brushes are used to fill interface elements with a color, gradient or a pattern.
In HTML5, it is possible to use them with CSS or directly in a canvas or SVG. It is also possible to use images or videos as brushes.
In Silverlight 5, we have the same concept with the added ability of using other controls rendered as a base texture (VisualBrush).

5. Controls

In Silverlight 5, it is both possible to define ones own controls from scratch or by aggregation (UserControl and CustomControl). It is also possible to inherit from the basic controls or even modify the associated templates to modify their appearance. In brief, Silverlight is extremely powerful for dealing with user interface.

HTML 5 does not offer any integrated solution for creating controls except basic copy/pasting of code. This is a big minus for business projects looking at industrializing their developments. We are far from the plethora of controls that can be simply referenced in Silverlight.

Note that HTML 5 introduces the concept of validation checks (required, etc.) and drag'n'drop.

6. Layout

Layout management (layout of the GUI and customization) is very rich in Silverlight. It is possible to position objects:
  • In a grid with cell size in absolute, relative or even adaptable to the content
  • With vertical or horizontal stacking in a StackPanel
  • In a canvas that enables positioning through absolute coordinates
  • With the margins and alignments
  • With overflows exposed by the new control RichTexboxOverflow
This system may be extended to infinity by adding usercontrols which can define their own layout. A good example can be found in the Silverlight Toolkit, which adds for example a WrapPanel.
HTML5 also provides complete solutions for layout management:
  • Grids with <table> <td> <tr>
  • New system for placing and sizing grids: Alignment Grid CSS Level 3. You will find that this mechanism is almost exactly identical to that of Silverlight (With good reason, as it is a Microsoft proposed specification)
  • System integrated with CSS layout (absolute or relative placement, absolute or relative size, etc..)
  • New CSS3 Flexbox system for which you can see a demo right here (if your browser supports it). This specification allows management  of alignments and placement relative to boxes (yes that's exactly the same thing for XUL and it's not a coincidence Sourire)
  • CSS3 Multi-column layout which is a rendering system with multi-column (example here).
  • CSS3 Media Queries that define different layouts based on display sizes with an example here (besides Samuel Blanchard's had fun doing the same thing in Silverlight here).
Layout technologies in HTML5 are not well supported by all browsers (the always repeating story of standards under development) but based purely on functionality, this is a fairly even game since the two competitors are able to produce easily adaptable and scalable layouts.

7. Databinding

A key feature of Silverlight is the databinding that opens the door to design patterns such as MVVM (Model / View / ViewModel) that can implement effective and modern architectures.

The databinding also enable defining dynamic interfaces without any line of code.

In the land of HTML 5 there is nothing. This implies that HTML 5 is heading more towards the production of consumer websites where Silverlight 5 aims at business line type of applications.

To do databinding in HTML 5, we will necessarily go through Javascript code to manually assign values
​​to controls and subscribe to events to retrieve the changed data. Some libraries exist (for example, you can use jQuery or Knockout) but nothing as effective (in terms of implementation and performance) as Silverlight.

8. Media (Audio & Vidéo)

Silverlight 5 and HTML 5 both offer advanced support for audio and video. The main problem for HTML 5 is at the non-standard codecs (and the war between the H.264 and WebM). Thus, depending on the browser, we have to send a video in one format or another.

However HTML 5 provides an elegant solution, with the possibility to define in a single <video> or <audio> tag several potential sources in order of preference:


9. RIA Services
Silverlight introduces new RIA Services in silverlight 4.0 which is more powerful for databinding


S.No

HTML 5

Silverlight

1
HTML5 needs to integrate CSS3 and JavaScript to add its effects to web pages.
On the other hand, Silverlight can be programmed without getting error prone due to usage of a statically typed .Net language. It is easier to program in Silver light.
2
While HTML5 is more resource friendly. This is the primary reason which Apple has given for not including support for technologies other than HTML5.
Silverlight has a disadvantage in that it consumes a lot of hardware resources of our device
3
When HTML5 will be fully standardized it is likely to get better support from all the newer versions of different browsers.
On the other hand, newer browsers would have to be compatible with older versions of Silverlight in order to get the proper functioning.
4
HTML5 uses multiple codecs to run videos on the browsers that are not considered in the Apple’s bloc.
Silver light always needs a plug-in for any case and would not even run on iPhone and iPad.
5
HTML5 video quality is not that crisp as other competitors and its lack of ability to provide video content of various quality levels on various bandwidths to the user is also a hindrance in getting the message across to low data rate users.
Silverlight offers good video quality and also provide video content of various quality levels on various bandwidths to the user.
6
HTML5 pages, when designed, should be compatible with all the browsers.
Silver light works just like a plug-in. We can simply add the functionality to for any browser.
7
While HTML5 being more tilted towards open source is a relatively easy target of stealing code. The divisions of JavaScript and HTML are clearly marked so it is easy to view and understand the code.
Silverlight application is not easy to decode
8
At present HTML5 doesn’t provide direct support for these devices. However there are some difficult ways to get around this in HTML5.
Silverlight supports microphone and web cam and thus renders a number of rich interactive applications.
9
HTML5, like its predecessors facilitates search engines to crawl through its content and get maximum exposure for the website.Therefore,HTML5 is suitable for online business websites or those sites which require traffic through search engines.
Silverlight is not popular in the SEO community. At present the content of Silverlight is not indexed by search engines.Therefore,Silverlight is not suitable for online business websites or those sites which require traffic through search engines.

Conclusion

In the end, there is no winner. We have two complementary technologies. Even if today there are more boxes with Silverlight 5 than boxes with HTML, the choice is not as simple as it is ultimately project dependent.
Indeed, it is sufficient that the project targets both Windows and Android tablets to push HTML 5 as the best solution.

So in the Web development world, we have to live with both, and know them well enough to provide the right solution at the right time.



 Happy Programming ! !
If you have any query mail me to Sujeet.bhujbal@gmail.com     

Regards
Sujeet Bhujbal
-----------------------------------------------------------
---------------------------------------------------------------

2 comments:

  1. But HTML 5 mot of features not supported by IE . and all the end users are using IE as default browser. While Silverlight runs on IE. Thats the major difference between HTML 5 and silverlight :)

    Thanks
    Sujeet

    ReplyDelete
  2. Nice stuff, it was nice to see this article about HTML5. It was really appreciable. Thank you so much for sharing such an informative article about - HTML5 tutorial in hindi

    ReplyDelete