I noticed that the talk about Silverlight vs. HTML/CSS/Javascript heated up recently, I don't know why, maybe it started because of this post (which was on the Silverlight Team blog) followed by these posts or maybe because Windows Phone 7 is about to be released (which will only run apps programmed with Silverlight or XNA) or maybe because HTML5 is getting more popular.
Anyways, it's in time with the (late) blog post that I wanted to write about the gallery app that I made some time ago, I'll express my opinion based on my experience with both technologies, but of course I wont be able to talk about Javascript in a lot of depth because I'm not that experienced with Javascript.
Everything has its pros and cons
Before I start talking about the pros and cons of each technology, I'd like to state each technology has its use and although there are a lot of things that can be done with both, usually it's significantly easier or better to do it using one technology over the other, and this ease is greatly affected by each developer's own experience and level.
I know it’s hard (if not impossible) to convince Javascript gurus to use Silverlight, and I don’t intend to do so because they are already perfected Javascript, and whatever Microsoft does to make Silverlight cool and simple, it’ll still be easier for JS professionals to do things their way, and this isn’t Silverlight’s problem, this thing happens with almost every new technology that looks different to the ones already there.
This blog post is mainly focusing on beginners who are still exploring the world of web development and people (like me) who know about HTML, CSS and Javascript and got frustrated when they tried writing non-trivial web pages.
Now with that said, let’s move on to the points …
Silverlight and Javascript can be friends
First let me start with a point that a lot of people miss, Silverlight isn’t just limited to C#, you can developer Silverlight apps using ANY .NET Language including VB, F# and even Javascript !
Yes you read that right, you load the XAML and using a certain framework you can manipulate the XAML with Javascript just like you manipulate any XML DOM ! If you don’t believe me, check these Silverlight Demos specially #10 Image Carousel.
Moreover, even if you’ve written your Silverlight app in C#, you can execute Javascript code from the app, I actually did that in my Gallery App to show error messages as Javascript Alerts, go to my Gallery Page and after the app finishes loading, destroy Flickr’s servers disconnect from the internet and click on a Thumbnail to try to see the enlarged image, you’ll get a familiar Javascript Alert with an error message.
So I think if we can use both Technologies together in a smart way, we can get the best of both worlds and result will be an amazing web experience !
In my opinion, I think Silverlight is used to make “islands of richness” in certain places of a website, to make cross-platform apps that runs the same way both inside and out of browsers, and to build windows phone 7 apps, I don't think it should be used to build whole websites or to make desktop-only apps (use WPF instead).
If you’re a .net guy, Silverlight is for you !
One of the pros of developing using Silverlight instead of JavaScript is that it's much easier and familiar to .Net Developers, although only a subset of the .Net Framework is accessible from Silverlight apps, you wont feel restricted specially if you're used to do things asynchronously (you can't make synchronous web requests from Silverlight).
Some people (including me) like to think in a very object oriented way when planning for all kinds of applications, Javascript doesn't provide you a lot of OO features like inheritance and polymorphism which I really like to (ab)use when making any app or game, and don’t get me started about how Awesome and Powerful LINQ-to-XML is compared to the usual XML DOM manipulation in Javascript, one more thing is that .net developers usually aren't used to Javascript's high level of dynamic-ness (?!) which makes testing and debugging harder (e.g.: no compile-time type checking) and also features like auto-complete become hardly useful.
Silverlight is more beginner-friendly
I consider Silverlight much more beginner-friendly than Javascript, I learned Silverlight and programmed my first app (the first version of my Gallery app) in just 3 days, and these weren't full days, they were during "El Adha" Feast this year.
It was easy for me because I'm used to C# and because discovering new stuff was very easy thanks to intelliSense (auto-complete), it helped me discover the controls' properties and methods without having to refer to the documentation, actually a lot of the method and property descriptions are taken from the MSDN documentation.
However, when I tried doing simple stuff on Javascript (as simple as dynamically filling a table with some data), I had to refer to documentations a lot of times to know how to spell properties and methods of various objects, if I didn’t check the documentation I end up wondering why the code isn’t working until I find out that a method or property wasn't spelled correctly, but my experience got better when I figured out how to debug Javascript in Visual Studio 2010, that way I was able to put a break point and hover over an object to know the methods and properties supported by it, but because Javascript doesn’t have data types, I still had to check the documentation to know the parameter types expected by the method.
Clean and understandable Code
The next point isn’t a tie breaker by any means, but I just feel that this: (Silverlight)
parentControl.Children.Add(new SomeControl(){ width = 100, height = 100 });
is much cooler than this: (Javascript)
var e = document.createElement("SomeElement");
e.width = 100;
e.height = 100;
parentElement.appendChild(e);
I intentionally wrote the short one-line version to show you how flexible C# has become
I wanted to point out that the Children property is a Collection (some kind of list), meaning that you can call any of LINQ’s extension methods do all sort of crazy queries on it, there are a lot of this “Hidden Power” all over Silverlight simply because it builds upon the .net framework !
Web standards are Slow, and Browsers are inconsistent
Another point is that web standards evolve slowly (the HTML5 standard isn’t close to being complete yet!), and browsers adapt to new standards slowly (not only IE) and when they do, each browser interprets some things differently causing a lot of problems to web developers, I know frameworks like jQuery can handle browser differences, but what about fonts and other non-javascript problems, you can’t make a large reliable app with all these inconsistencies !
But when you look at Silverlight, they released 4 versions in less than 4 years, look at the improvement the Silverlight team made during these 4 versions, I heard that Silverlight didn’t even have buttons in version 1 and now they’re talking out-of-browser and hardware accelerated graphics !
I think that Silverlight is now as good as Flash if not better (less crashes?), they’ve been playing catch up for some time but they finally did and in less than 4 years, and they’re expanding to mobile platforms (well just WP7 for now).
Expression Blend !
One of the few disadvantages of developing Silverlight apps is that although most of the coding and debugging is done on Visual Studio, you wont be able to make awesome looking apps without the Magical piece of software called “Microsoft Expression Blend”, why is this a disadvantage? because there is a free version of Visual Studio (the Express version) but no free version of Blend (edit: there is, it comes with the Windows Phone Developer Tools), but thank god there is DreamSpark which allow me to download both for free as long as I’m a student
But anyways, Expression Blend is an amazing designer tool, it makes you focus on how your app will look like and how it will behave, and doing animations on if is a breeze !
One of the things that I did when improving my Gallery app is that I opened the project in Expression Blend and started improving the way it looks, I was surprised by how easy to play with the design of the app.
Sometimes XAML can look weird, but I like it
A lot of developers consider XAML (Silverlight’s and WPF’s design syntax) a barrier that prevents them from easily learning Silverlight, well I have to admit, it looks a bit weird to beginners specially those who just came in from the HTML/CSS world, but now when I look at it I feel that there is no other way you could describe such a complex (yet very flexible) UI system using XML !
The only parts of XAML that really looks ugly are StoryBoards (aka Animations) and when defining control States (another way to make event triggered animations) that’s when you start seeing weird XML Namespaces, but still if you think about it, it couldn’t have been made better without inventing something even more human readable than XML.
Actually when I gave it more time, I started feeling that XAML (from my POV) is like my new HTML, I know I went a bit too far in this last part, but I got the same feeling that web developers got when they heard about the new HTML 5 tags that replace the overly generic DIV tag, mainly because I’m now a fan of Silverlight’s Container Controls (specially the StackPanel which holds the thumbnails in my Gallery App).
I can already feel the amount of criticism I’ll get on that last part
Don’t worry I’ll probably write another post just to talk about XAML, actually I was going to talk about XAML here but this post is already long enough so I moved the paragraph into a new Blog Post that I’ll publish later ;-)
Conclusion
I think I should conclude this now before you regret you ever started reading this post, and I congratulate everybody who made it this far
I just wanted to say that I didn’t write this post blindly out of pure meaningless defense, I wrote this because I learned and tried both side of the debate, and all what I said here was from my own experience with these technologies, I discovered that a lot of people share my opinion some of them are Microsoft Fans (like me) and others are developers who tried building full sized business applications using HTML/CSS/Javascript on the client side (if you don’t believe me check the comments on the 3 posts I linked at the beginning of this post), this means that we’re not all a bunch of Tech Racists after all
Check out my Flickr Gallery app thing
Finally, I’d like to point out that you can check out my Silverlight Gallery App by clicking on this link or clicking on the Gallery button in found in the page header above ?
All what it does is retrieve the images found in this Flickr Photoset and lists them in a list of Thumbnails at the top, and when you click on a thumbnail it retrieves the enlarged version of the image and displays it centered and stretched to fit the remaining part of the app, clicking on the “Show Details” button display the date taken and description of the photo, and you can view the app in full screen by clicking on the “Full Screen” button at the bottom right corner, it should run perfectly on Windows XP, Vista, 7 and on Intel based Macs as long as you have Silverlight 3 or higher installed and you’re using either IE, Firefox, Chrome or Safari (not sure about Opera), and if you’re lucky it might work on Linux using Moonlight.
The very first version was developed sometime between the 5th and the 7th of April 2010 (I wish I still had a copy of it) and got renewed when I was implementing my website’s new design, too bad I didn’t get chance to explain how I programmed it, but maybe I’ll do if I publish that other post about XAML.
Fun Fact: The first part of this blog post was written using Microsoft Office for Mobile which is on my Brother’s HTC Touch Pro 2 (and later copied and continued in Windows Live Writer), which was a great idea to avoid wasting my precious time in boring Family Visits