Silverlight Hack

Silverlight & related .NET technologies

About Me

Welcome to Silverlighthack.com.  This is a site where you can find many articles on Silverlight, Windows Phone 7 and .NET related technologies.  

My name is Bart Czernicki.  I have been working with computers since 1988 and have over 12 professional years in the IT field focusing on architecture, technology strategy and product management.  I currently work as a Sr. Software Architect at a large software development company.

Below is the cover of my new book that shows how Silverlight's unique RIA features can be applied to create next-generation business intelligence (BI 2.0) applications.

Silverlight 4 Business Intelligence Soft 

Contact: bartczernicki@gmail.com

View Bart Czernickis profile on LinkedIn

NONE of the comments or opinions expressed here should be considered ofmy past or current employer(s).  The code provided is as-is without anyguarantees or warranties.

HTML 5 is Born Old - Quake in HTML 5 Example

One of the big news stories for HTML 5 this past week was the demo of Quake running in HTML 5. This was done by Google engineers for Webkit-based browsers like Chrome and Safari.  This is one of those demos that gets a lot of "OMG...that's awesome".  This inevitably leads to the next round of comments "see Flash is RIP; long live HTML 5".

Video of Quake 2 in HTML 5 using WebGL extensions 

 

This news made the front pages of DiggReddit and Engadget.  A lot of people are obviously excited by this and they should be.  However, once again, a lot of comments are simply misguided. I really like kenjura's comments on Digg about this article.  "HTML5 is getting the Obama treatment: You fanboy idiots are giving them a Nobel Peace Prize and the technology hasn't even materialized yet!" I cannot agree more.  

How soon people forget that this was done in Flash back in 2007 and in Silverlight in 2008.  Granted, both demos used Quake 1 (not Quake 2) but the overall concept is the same.

Quake in Flash (2007)

 

Quake in Silverlight (2008)

 

HTML 5 is born Old

It is cool to see HTML evolve to be able to do this.  Don't get me wrong; I think it is a very impressive achievement.  However, think about this objectively.  The last HTML 4 spec governed the web for 11 years.  HTML 5 is not even ratified and it is going to be accomplishing what we could have done in other RIA technologies 2-3 years ago!  What is the web going to look like in 5-8 years?  Is HTML 5 going to be relevant to keep up with the future web? Will it be behind Silverlight/Flash?  Those are the questions I would be asking if I am excited about a technology doing what was done 2-3 years ago!

In its current form, HTML 5 brings you: audio, video, WebGL, Web Sockets, Web Workers, SVG, canvas.  So far, so good.  But it is still missing some core functionality that Silverlight/Flash have:

  • No device support for web cams or microphones
  • No font management.  In Silverlight/Flash, you can just embed the font in the SWF/XAP package.  In HTML, the OS needs to have the font installed.
  • No good/common design tools.  Where is the design tools integration: HTML, CSS, SVG, JavaScript, WebGL all into a holistic design package?  Expression Blend allows designers to mock up entire applications with animation and behaviors with no code.
  • No DRM protection for media playback
  • No "Out of the browser" applications for disconnected scenarios
  • JavaScript is your programming language.  In Silverlight, you can choose from C#, F#, VB.NET, Iron Ruby, etc.
  • Since Silverlight leverages .NET, I can share assemblies and components between WPF, server assemblies, ASP.NET assemblies with Silverlight.  Do you have any server components written in JavaScript? :)
  • No COM support for Windows scenarios
  • Performance.  For example, in this video, we can see on the Droid platform Flash is 2-3x times faster than the HTML 5 Canvas.  Granted for most RIA modules this is overkill.  However, imagine a vey complex data visualization or a game with 2D physics that will want to utilize max performance.
  • Data-Service support.  Silverlight has tight integration with scalable data service frameworks like WCF RIA Services to handle SOAP, REST and pub-sub services.

 

HTML 5 will no doubt evolve slowly and replace Adobe Flash in many places.  However, comments about the demo of the "Quake in HTML 5" that claim other RIA technologies are dead is simply nonsense. In 2011 or 2012 when Silverlight 6 is out, what is the state going to be for HTML 5 features?  As you can see from the list above, HTML 5 is already missing some big features.  In two years' time as Adobe and Microsoft evolve their RIA technologies, HTML 5 will look like an older and older technology.

Isn't it great that HTML 5 is going to allow you to "democratize" RIA functionality without a plug-in?...yes.  Is HTML 5 revolutionizing RIA or taking it where RIA has not gone before?....absolutely not.

kick it on DotNetKicks.com
Posted: Apr 02 2010, 19:26 by Bart Czernicki | Comments (4) RSS comment feed |
  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Filed under: HTML 5 | Silverlight
Tags:
Social Bookmarks: E-mail | Kick it! | DZone it! | del.icio.us

Using the Bing Maps Silverlight control on the Windows Phone 7

Update 5/2/2010:  The updated Windows Phone 7 Development April 2010 refresh actually ends up breaking the ability to use signed assemblies.  You can read about it here: http://www.manyniches.com/windows-phone/signed-assemblies-bug-in-the-windows-phone-tools-ctp-refresh/  . The problem is the workaround they support doesn't really work for Bing Maps OR the Silverlight Control Toolkit.

Update 7/12/2010:  The Windows Phone 7 Beta Tools (July 2010 release) work perfectly with the Bing Maps control.  The signed assemblies issue has been resolved and the instructions below work great.

This technique/article is still relevant after that issue is resolved.  I think Microsoft will either update the Windows Phone 7 Dev tools or release unsigned assemblies for Bing Maps and Silverlight Control Toolkit. If you are using the previous tools (March 2010), then you are good to go to use this article as-is.

Update 10/10/2010:  The Windows Phone 7 RTM tools include a NEW updated Bing Maps Control tailored for the Windows Phone 7.  If you are interested in surfacing maps on the phone use that control.  Step by step instructions are included in the Windows Phone 7 Training Kit located here. The code below still works and if you need to use the full Silverlight control on the Windows Phone 7 RTM, this still works.  However, the Bing Maps control for the Windows Phone 7 is optimized for the phone runtime, gestures and limited resources.

The v1 version of the Silverlight Bing Map control was released in December 2009.  The Silverlight control allows you to integrate an immersive mapping solution in your Silverlight applications.  By using Silverlight, Microsoft is able to provide a rich experience with crisp zooming and panning that performs significantly better than the Ajax map control.

During the MIX 2010 conference last week, Microsoft unveiled the Windows Phone 7 SDK details.  Developers can now leverage their existing Silverlight investments on the phone.  Furthermore, developers can also leverage Microsoft's investments in Silverlight as well.  The Bing map Silverlight control is a perfect example of this as it will work on the Windows Phone 7 emulator.  This article will cover how to get started with integrating the Bing maps control with the Windows Phone 7 (mobile platform) and overcome some of the nasty gotchas.  The source code for this article is included below.

Getting Started with Bing Maps for Silverlight mobile

The first thing you need is to navigate your browser to the Bing maps portal at https://www.bingmapsportal.com. After logging in with your Live account, you can crate a Bing Maps account and create a new key.  After creating a key, download the Silverlight Bing Maps control from the Microsoft download site.  Installing the Bing Maps Silverlight control will create a folder with the assemblies and documentation.

Bing Maps Account Center



Creating Your First Windows Phone 7 Mobile App with Bing Maps

Note: This article assumes you have both the Windows Phone 7 SDK and Bing Maps control for Silverlight installed.

1) Open Expression Blend 4 Beta and create a new Windows Phone project.  You can optionally change the names of the page and app titles.

 

2) In order to use the Bing Maps control, we need to add references to the Bing Maps assemblies.  In order to achieve this, simply right-click on the References folder and click "Add Reference...". If you installed the Bing Maps Silverlight control, the assemblies are located at: C:\Program Files (x86)\Bing Maps Silverlight Control\V1\Libraries. Ensure both map control assemblies are added.



3) After adding both map control references, you should now find the Map control in the asset library.



4) You can drag the Map control over on the ContentGrid control.  I placed the control to take the full real estate available and named the control BingMap.  Once you do this, you should see the map properly render in Expression Blend (shown below).




5) Let's build the application and try to run it.  You will notice a nasty error below.  Luckily for us, the error is rather descriptive and it is an easy fix.





6) In order to fix this error, simply add a reference to the System.Windows.Browser.dll which can be found at C:\Program Files (x86)\Microsoft Silverlight\4.0.50303.0\.  The application should now build.  Hitting F5 or debug will now run the application. If you do not have a physical Windows Phone 7 device, you can run the program in emulator mode.  It will take a minute or two to boot the ROM into memory. 

Note: The reason why we are getting this is error is because the System.Windows.Browser.dll is unsupported by WP7 (source: http://msdn.microsoft.com/en-us/library/dd470087(VS.96).aspx).  Luckily for us they are both Silverlight assemblies and we can cheat to get it to work.

Development tip: Do NOT close the emulator while enhancing your project. Just minimize it and stop the debugging natively in Expression Blend or Visual Studio 2010.  This way, the emulator does not have to boot every time.


7) Now that the emulator is loaded, we have a black screen.  In order to get around this problem, simply right-click on the MainPage.xaml and click "edit in Visual Studio".  For some reason, the Expression Blend emulator or web access does not work properly.  You need to debug the app in Visual Studio 2010.  I have no idea why that is.  If anyone has any ideas, please comment below.

Important note: You have to be connected to the internet for this work.  The images and credentials both have to be verified on Microsoft servers.

8) Now we FINALLY have our Bing Maps Silverlight control working on our Windows Phone 7 project.  We can pan around.  Notice that the zooming works.  We can switch between arial and road modes.

9) We need to clean up the interface.  If you are familiar with the Bing Maps Silverlight control, you will notice two strange things: the navigation arrows are in the center of the screen, and secondly, what is that white box in the middle of the map?

 

10) Using the Bing Map API, we can remove the navigation control.  Create a loaded event for the control or the page (During the MIX conference, they mentioned you can use the OnPageNaviagedTo event as well) and simply add this code to the event: this.BingMap.NavigationVisibility = System.Windows.Visibility.Collapsed.  Run the application now and you will see the navigation control removed.  This removes the scaling and the mode switch but we can add those back later if we want to.



11) Investigating the white pop-up over the map control.  If you are not familiar with the v1 Bing Maps Silverlight control, you might not know what this white pop-up is (This didn't happen in the beta of the control).  In order to get a clue, you can create a Silverlight 3/4 (NOT mobile) project and add a map control and see what happens.  I took a screen shot below of a full Silverlight app with Bing and we can clearly see that this pop-up is probably just a warning message because of invalid credentials.  The Windows Phone 7 doesn't properly show the error.

 


12) Add credentials to the map.  If you properly signed up for the Bings Map control and received an access key, you can copy it (shown in the first screen shot in this article) and set the CredentialsProvider attribute.  If you added the CredentialsProvider properly, the warning message will go away.

 

 

13) Optionally, you can clean up the interface further by removing the logo and copyright notice.  The clean interface will look like something something like this when fully implemented:




14) You can mimic multi-touch on the emulator WITHOUT a multi-touch monitor.  Earlier we removed the navigation/scale control.  If you were using this app on the phone, wouldn't you want to just zoom in by expanding both fingers?  We can actually mimic this on the map control because it supports multi-touch.  Fire up the application and hold down CTRL and flick the mouse to any direction.  Notice that you can easily mimic zooming in like a phone user would.  I don't think the pinch gesture can be mimicked (since this is kind of a hack but Microsoft mentioned it is coming to the next SDK drop.

 

Give Microsoft Credit

I have been preaching for almost two years now to other fellow RIA architects and developers that Microsoft's RIA strategy is really about hooking into its vast enterprise service and development verticals.  How cool is it that a control NOT designed for the phone released last year just works on a preview of the Windows Phone 7 SDK?  That to me is truly impressive. Furthermore, this amplifies the rationale to go with Silverlight when chosing an RIA technology.  Adobe does not have the search, map, enterprise services, cloud services, development environment or mobile device to compete with Microsoft in this area.  Integration with the Bing Maps Silverlight control on the Windows Phone 7 truly highlights this fact.

Summary

As you can see, there are some gotchas involved in getting started with the Bing Maps Silverlight control on the Windows Phone 7.  However, if you follow these steps, you should be able to start mocking up prototype map applications easily.  I kept this project really clean and did not add any specific functionality, but from what I tested, this works just as it does on the full Silverlight project.  Obvious enhancements include adding landscape/portrait rotations and being able to swith between modes. Microsoft will probably update this control and licensing for the Windows Phone 7 release.  Some of these problems will probably go away.

You can download the zip file of the project below (Note: I did remove my credentials from the project so you will have to add your own).

WindowsPhoneAppWithBingMaps.zip (522.72 kb)

kick it on DotNetKicks.com
Posted: Mar 21 2010, 10:47 by Bart Czernicki | Comments (20) RSS comment feed |
  • Currently 3.5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Tags:
Social Bookmarks: E-mail | Kick it! | DZone it! | del.icio.us

Silverlight for Windows Phone 7 is NOT the same full Silverlight 3 RTM

Update 10/18/2010: This article is still relevant with the Windows Phone 7 RTM tools release.  Even though there are differences, I spoke to a Microsoft rep and they mentioned that the two versions should converge in the next release. Hopefully, Silverlight 5 addresses these issues. 

If you are a Silverlight developer or interested in the technology, you have probably heard that Microsoft released an update to Silverlight that allows you to target Windows Phone 7 Series phones.  One of the different strategies Microsoft is taking with Silverlight is they are not releasing a "lite" version of Silverlight.  Microsoft announced that the same code, design patterns and tools are going to be used to develop Silverlight mobile applications.  This is unlike Adobe's strategy which has a Flash Lite version for their mobile devices. 

Update: As Hector commented below, apparently Adobe is releaseing thefull Flash 10.1 and AIR 2 runtimes on several mobile phones.  Will they be approved or blocked on the iPhone or Windows Phone 7?  Check out Matthew Fabb's comments below.

Scott Guthrie announcing that Silverlight mobile is "not different" than the Silverlight we already know

After playing around with the framework and tools a little bit, I have found that to be not 100% true.  It is true that at its core Silverlight for Windows Phone 7 is pretty much Silverlight 3/4 RTM.  Furthermore, a developer can use both Visual Studio 2010, Expression Blend 4 and Expression Encoder 3 to create Silverlight mobile applications.  However, there are some notable differences between Silverlight 3/4 RTM and Silverlight mobile that make Scott's comment during the MIX 2010 keynote not 100% accurate. 

What is different between Silverlight for Windows Phone 7 and Silverlight 3/4 RTM:

1) Silverlight Mobile Compact Framework Limitations

Silverlight for the Windows 7 Phone runs on the .NET compact framework.  Silverlight 3/4 run on a subset of the .NET 3/4 runtime; however, it is much richer than the .NET Compact Framework.  There is a plethora of artifacts, classes and constructs that a Silverlight RTM developer might not find in Silverlight mobile.  They can be found here: http://msdn.microsoft.com/en-us/library/ff426930%28VS.96%29.aspx As you can see, there are some big things missing:

  • Differences in the networking stack like creating dynamic proxies with ChannelFactory is not supported (which is a WCF best practice)
  • Pixel shaders are not supported
  • Full blown media settings (i.e., Markers) are not supported.  Only one media element can be played at once, etc.
  • Multithreading differences
  • There are some huge reflection limitations (i.e., some features in MEF may not work)

While these can be considered "advanced" features, they still are different.  There is a list of about 30-50 things different between Silverlight mobile and Silverlight RTM.

 

2) Silverlight Mobile applications are only out of the browser applications

Because of the list of limitations above, the Windows Phone 7 only supports Silverlight mobile applications.  If you have a Silverlight 2, 3 or 4 application on the web and browse it with a Windows 7 Phone, it will not work.  That is a ridiculous limitation.  The Windows Phone 6.5 includes a browser called Skyfire (http://www.skyfire.com) that can already surface Silverlight content on a mobile device.  I don't know if this is a technical reason or a way for Microsoft to lock down what "apps" are surfaced on Windows Phone 7 (like Apple does with the iPhone).

What is even more insulting about this is that the Silverlight beta for Symbian Nokia S60 phones supports out of the browser Silverlight: http://mobile.engadget.com/2010/03/20/silverlight-beta-comes-to-s60-5th-edition/ . Doesn't that seem backwards?

 

3) Silverlight controls that require Javascript or COM will probably not work in Silverlight Mobile

Contols like the Silverlight Control Toolkit Charts currently throw a COM exception on the Windows Phone 7 device. I hope these things are fixed, but there is a good chance that many of these controls will have to be "watered down" or not work at all on Windows Phone 7. (Thanks to Dave Anson from Microsoft posting below that this if fixed in the next version of the toolkit).

This is also very interesting for third-party Silverlight controls.  Developers and architects will have to be extra careful when investing in a graphics control package.  Chances are pretty good that the controls you have used will either not work or not be suited well for Silverlight mobile.

4) Honorable mention: Silverlight for Windows Phone 7 development is C# only

As of now, you can only code Windows Phone 7 Silverlight applications in C#.  I think this limitation will include VB.NET when the product launches; however, I hope this also include F# and dynamic languages as well.  I would love to have F# support over VB.NET support any day!  Hopefully, this makes all the VB.NET guys move to a more mature language :) As Martin Plante mentioned below, dynamic languages are not supported because of the CF limitations.


Summary

In summary, I just wanted to point out to all the Silverlight technologists out there that Silverlight mobile is not 100% the same as Silverlight 3 RTM.  In fact, there are a lot of features different or missing that you need to watch out for.  While it is great that Microsoft succeeded in delivering a platform that uses the same Silverlight core and tools, it would have been nice to have a full blown Silverlight runtime on the Windows Phone 7.  If that were the case, patterns like MVVM would be fantastic and a single Silvelright compile and simply swapping out the Views (one for mobile and another for the web) would be fantastic.

kick it on DotNetKicks.com
Posted: Mar 16 2010, 18:41 by Bart Czernicki | Comments (16) RSS comment feed |
  • Currently 0/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Filed under: Silverlight
Tags:
Social Bookmarks: E-mail | Kick it! | DZone it! | del.icio.us

Top 10 Reasons why HTML 5 is not ready to replace Silverlight

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 born old"

Update 06/02/2011: Facebook is a great example of "all in HTML5"..they provide NO native iPhone/iPad application.  Their answer is HTML5.  Yet the MOST POPULAR iPhone/iPad applications are FaceBook apps.  If HTML5 was almost equal to RIA applications, why do people prefer native over HTML5?  Something to think about when drinking the HTML5 kool aid...covered in this article here.

Update 12/08/2010: Firefox 4 and Opera browsers are disabling WebSocket support, because of serious vulnerabilities in the way sockets are designed in HTML 5.  This is ANOTHER example of why HTML 5 is still a while out, before it is implemented by all browsers widely. http://hacks.mozilla.org/2010/12/websockets-disabled-in-firefox-4/

Update 10/17/2010:  The Silverlight team posted an excellent article on "The Future of Silverlight".  Obviously it is a biased article, but it highlights a lot of the same topics I cover in the HTML 5 versus Silverlight discussion.  The article can be accessed here.  They highlight the same things you will see below; that Silverlight provides a first-class framework for: premium HD media and streaming, fast release cadance, advanced features that you can use now (multithreading up to 8 cores, GPU acceleration etc.), out of the browser applications etc.

Update 10/18/2010: Last week the W3C announced that HTML 5 is not ready for websites, because of compatibility issues.  Article can be found here.  HTML 5 might be the future, but even the W3C is telling us not to code HTML 5 web sites :)  There are web patterns (polyfills) that allow you to use native HTML 5 APIs and do the cross-browser stuff "for you"...doesn't seem like HTML 5 is the savior everyone thinks it will be.

 

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:

  1. HTML 5 is not here...Yet
  2. Audio and Video Tag limitations
  3. Web Browser Compatibility
  4. Javascript Limitations
  5. Productivity
  6. Only targets the general Web
  7. No hardware acceleration
  8. No webcam or microphone device support
  9. HTML 5 standard or Google/Apple spec?
  10. HTML 5 is already behind Silverlight
  11. No Pub-Sub Model (updated 2/28/2010)

1) 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:

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.

Some of the new demos and features are great to play with.  However, I would be very hesitant to start rolling out HTML 5 features until the spec is finalized.  Most likely we will see the HTML 5 spec implemented in piecemeal over multiple releases.  In two plus years we should see browsers with taglines of "full HTML 5 compliant".  Until then, don't get caught up in the hype...HTML 5 is not here yet!

Note: Browsers like Chrome and Safari (based on WebKit) will probably implement features together in the WebKit framework and they will flow through into the browser.  I would bet on Chrome, Safari and Firefox to lead the charge in HTML 5 spec implementation.
Update 2/17/2010: This is a great article on the problems with the HTML 5 spec.  A great point by the author on how some engineers are accusing others of "sabatoge".  I particularly like the comment by Dorian Taylor about the heavy dependency on Javascript (which I go into detail below) that is a problem with HTML 5.

2) 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.

 

3) 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 wrote this article in February 2010 and as of October 2010 IE moved from 67.1% to 62.7%...about 5% drop in 8 1/2 months.).  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.

 

4) 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). New web browsers are trying to "complile" JavaScript code natively to make it run faster.
  • 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. 

 

5) 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 JavaScript 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, by having to manage local client state between server calls (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.


Expression Blend Sketchflow allows designers to prototype applications with data, interactivity, and transitions without writing code.

 

With Silverlight you can target not only the web, desktop, cloud but the Windows Phone 7 platform using a .NET language and development IDE

 



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.

 

Note: I have a friend who recently got laid off from a "large" video game studio...pretty talented C++/graphics developer.  With the game industry hurting he moved onto web development/databases/services...regular business stuff.  He told me the same "mess" that occurs with video game development is the same thing he hates about web development.  Having to juggle between different graphics programs, exporting assets editing shaders, code etc.  was analogous to him with having to jump between ASP.NET, Javascript, CSS, HTML etc.  I thought this was a great analogy.

 

6) 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,

 

7) 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.

 

8) 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

9) 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?

As you can see here from this article/chart, Google and Apple are #1 and #2 in evolving the WebKit spec.  In this article, I referenced the HTML 5 spec numerous times.  Notice how a large majority of the spec "owners" are Google engineers.

Update 2/21/2010: Looks like Google has officially scrapped evolving Google Gears (the HTML RIA-like framework) in favor of the investment in HTML 5.  BTW Ian Hixon (the "owner" of the HTML 5 spec from Google's end and some would say the entire HTML 5 spec) was the one that said "Adobe was blocking the spec".  So no one can object the HTML 5 spec if it doesn't support Google's plans?  See where this can get really bad?

10) 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.

Some features HTML 5 will NEVER get.  For example, there will never be a DRM layer for HTML 5 videos.  Why? As mentioned in this article here, if the HTML 5 spec provided an open DRM platform it would be "hacked in 2 days".

11) No good pub-sub model

The current web is built upon the request response architecture.  You navigate your browser to a domain or a service URL -> click go -> receive a response payload.  Once you are done the content is static.  What if the server has new/updated content?? Additional Javascript can be run in order to update the content (make an Ajax call) or the user can manually click a link or refresh the content.  This works, however it is slow and prone to a lot of additional code.  For example, if you have watched a gamecast/box score of a live sporting event you have probably seen a client-side timer refresh (shown below).

ESPN refreshes their gamecast content with timers initiated from the browser client:

 

 

The client calls (even if they are automated) have to be initiated by the client, hence the name: request response. 

Wouldn't it be better if the client could "subscribe" to the content offered by the server? This way anytime the server's content has changed it would automatically send the update to the clients that have subscribed.  Silverlight has great support for the pub-sub model that runs on the net.tcp protocol as well as WCF duplex polling.  The performance increases are tremendous (thousands of percentage points).  Pub/sub is another great option for the Silverlight architect/developer. (A great article on using the WCF net.tcp binding with Silverlight 4 can be found here).

Note: HTML 5 is supposed to include something called web sockets, which are going to add pub-sub capabilities to web applications.  More info can be found here. (As mentioned several times before, there are other competing architectures in the spec waiting to be ratified which makes this more of a mess).

 

 

kick it on DotNetKicks.com

 
Posted: Feb 08 2010, 10:31 by Bart Czernicki | Comments (32) RSS comment feed |
  • Currently 4.2/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Filed under: Silverlight | Silverlight 3
Tags:
Social Bookmarks: E-mail | Kick it! | DZone it! | del.icio.us