"HTML5, JavaScript, Knockout, JQuery, Guide for Recovering Silverlight/WPF/C# Addicts." Series

Sign in to queue


In today's second Web Wednesday post (the post earlier today was actually last Wednesday's post, but I forgot to actually schedule it for publishing... Doh! So you guys get two posts today!) I'm highlighting a post that I thought I might need in the near future and thought, "Hey, maybe the C4F readers might find this interesting too!"

I cover WPF and C# so often, because it's my comfort zone, and not the web stuff nearly enough. So these posts by Nick Polyak seemed like a great fit, one to help me, and hopefully you, expand our comfort zones a little... (That and I really liked the title... Wink

HTML5, JavaScript, Knockout, JQuery, Guide for Recovering Silverlight/WPF/C# Addicts. Part 1 - JavaScript and DOM.


Being a consultant, makes me very sensitive to the newest trends in technology.

Several years ago, I came across WPF and fell in love with it. WPF introduced brand new concepts that enable the developers to achieve almost total separation between the visual design of the UI application and the underlying non-visual implementation. At the same time WPF provides great features for visual development. Silverlight brought the WPF power to multiple platforms.

Recent developments, however, indicate that Microsoft soured on both WPF and Silverlight in favor of HTML5/JavaScript. This is, probably, the correct strategy for Microsoft in the current tough situation. Over a period of several years, Microsoft lost its status as the largest software company and lost its superiority in the internet browser market. The primary reason behind it is that Microsoft overlooked and came too late to the smart phone and tablet markets. Being a follower is different from being the trend setter and currently Microsoft has to beat everyone else in their own game, which is HTML5 and JavaScript (and based on the previous history I am confident it is going to become a leader again).

These developments caused me to put a lot of effort into learning and working with HTML5 and JavaScript. I am also trying to understand how to apply the concepts I learned while working on WPF/Silverlight in JavaScript development.

The purpose of these series of articles is to make it easier for WPF/Silverlight developers to master programming HTML5/JavaScript utilizing WPF and Silverlight concepts. These articles assume that the reader already has some basic familiarity with HTML and JavaScript, so people who are completely new to it, should start with something else.


HTML5, JavaScript, Knockout, JQuery, Guide for Recovering Silverlight/WPF/C# Addicts. Part 2 - Solar System Animation built with SVG, Knockout and MVVM Pattern.

Important Note

Friends, if you like the article, please vote for it [On the Code Project page, here]. Also I'd appreciate a couple of lines about what you think can be improved and what else you want to hear. Thanks!

This is part 2 of HTML5 series. Part 1 can be accessed at HTML5, JavaScript, Knockout, JQuery, Guide for Recovering Silverlight/WPF/C# Addicts. Part 1 - JavaScript and DOM.

Several years ago I came across Bea Stollnitz's (Costa's) example converting a usual ListView into a planetary system and was fascinated by it. You can find her article and code at The power of Styles and Templates in WPF. Even though the MVVM pattern, had not been formalized at that time, she was adhering to a strict separation between the view model and the view's templates and styles.

I decided to build a similar application in HTML5/JavaScript also strictly adhering to the MVVM pattern. You can see the result at Solar System Demo. Make sure to view the demo using the HTML5 compatible browsers. If you use Chrome or Firefox you can even see that the planets are moving around the sun (IE 9 does not support SVG animations, so if you use IE 9, the planets won't move). The speed of the planet images in the demo is chosen randomly and has nothing to do with the actual planet speed. I'll talk more about the demo below.

In order to achieve the separation between visual and non-visual components I use Knockoutjs framework. Knockoutjs is an excellent open source framework giving developers ability to bind properties and events within HTML to JavaScript's entities representing the View Model. The Knockoutjs bindings are similar to those of WPF and Silverlight. From my point of view, Knockoutjs is a must for building an HTML web site that has a considerable amount of business logic.

This article is by no means a detailed tutorial on Knockoutjs, even though I'll try to present some its most important features. Perhaps, in one of the subsequent articles, I'll give more information on Knockoutjs, but in the meanwhile Knockoutjs website has great documentation and tutorials. Also there are two excellent Pluralsite courses on Knockoutjs: Building HTML5 and JavaScript Apps with MVVM and Knockout by John Papa as well as Knockout Fundamentals by Steve Michelotti. (You have to subscribe to pluralsite.com in order to be able to access the tutorials).

In order to draw the non-textual visuals, e.g. the orbits and in order do animations I am using SVG. SVG is part of HTML5 spec and it provides HTML tags to create various shapes use transforms on them and create animations. SVG is quite similar to WPF/Silverlight Shape/Path, transforms and animations functionality. Again, this article is not a tutorial on SVG, it just demonstrates some SVG concepts. Perhaps in the future articles I'll talk about SVG in more detail.


Enough said? Go read these post and get your web dev on!

The Discussion

Add Your 2 Cents