Sunday, December 05, 2010

One Week Down Learning JavaScript and jQuery

Like I mentioned in my last post I've started a new job this Monday at Extend Health working in .NET with a bunch of fun technologies including ASP.NET MVC2, Nhibernate, some FubuMVC and  using a bunch of jQuery. At my last job at Mediaport I had just started teaching myself both ASP.NET MVC2 and digging deeper into JavaScript and jQuery. Now that my first week is done at Extend Health I've been happily digging through all the code and working on my assignment to study some more on JavaScript.

This week I have been reading Douglas Crockford's book JavaScript: The Good Parts. I had watched a video of his talk about JavaScript's good parts at Yahoo! before but reading this book has really opened my eyes to JavaScript and the power as well as pitfalls of the language. It is definitely going to take some time to fully appreciate the power JavaScript has.

So onto a little bit of what I've been up to during my first week.

jQuery Templates:

Besides just trying to become more familiar with JavaScript as well as jQuery I was looking at places we might be able to try out jQuery Templates which is one of the plugins developed by Microsoft that have recently become official parts of jQuery. After playing a little bit with the jQuery Templates I have to say that I really like them. I've seen a few template plugins that rely on you dumping all the templates into big ugly strings and with jquery-tmpl you can avoid all that. Here is a quick sample of one:

Pretty straightforward but the nice thing is that you don't have any ugly string to muck with. Instead you get a nicely encapsulated template which has a competent set of features including the each, if/else, and nesting of templates. I'll have to use it some more but this plugin looks really great and should get even better over time.

jQuery Datalink and Knockout.js

Along with the jQuery Templates I checked out another plugin from Microsoft called jQuery Datalink. The datalink plugin lets you bind a JavaScript object to a form and keep the two in sync without having to write a bunch of extra code. Here is a quick example of binding a form to a JavaScript object.

    var person = {};

With that, we've bound the person object to the form. This will give person the attributes firstName and lastName. Now whenever the text changes for the firstName or lastName text inputs the person object will be updated. Pretty simple, but it could prove useful.

While looking at the jQuery Datalink plugin I heard about Knockout.js which also provides databinding but takes a different approach than jQuery Datalink. In Knockout things are much more JavaScript oriented and is based of of the Model View ViewModel (MVVM) pattern.
So in Knockout, we create a view model that we will bind its attributes to in the HTML.

    The first name is 
    The last name is 

    var myViewModel = {
        personFirstName: ko.observable('Bob'),
        personLastName: ko.observable('Marley'),


And with that whenever the underlying JavaScript object changes the values will be updated in the HTML. That is just a simple example of what Knockout can do. Knockout looks like a really interesting project and the style of binding should feel familiar to any Silverlight or WPF developers since that is what this is based off. Hopefully I'll have some more time to write about Knockout.js as it seems like a really interesting project.

My first week has been really fun and I'm really looking forward to mastering JavaScript and digging much deeper in to ASP.NET MVC and C#. So here's to learning more code!


  1. I absolutely loved the Douglas Crockford JavaScript book as well, definitely a must read! I'd heard about Microsoft's jQuery templating project, but hadn't really seen many examples of it before. The syntax does look nice and terse, fitting into the markup well. I had used jTemplates earlier this year; have you used or looked into that one before? It didn't seem the syntax was too bad or have the "big ugly strings." I'd also only heard about the Microsoft datalink project as well (and heard and seen a bit of Knockout); thanks for showing the examples. You'll have to let us know as you keep perusing the web site if you can think of areas that would benefit from all this newer frameworks and solutions.

    Good stuff, definitely keep sharing your findings!

  2. Yeah JavaScript the Good Parts really opened my eyes to JavaScript both the really good parts and some of the really bad (global variables) parts. I've already been able to see my JavaScript skills get better after reading it and understanding the language more.

    I actually didn't look much at jTemplates but I've heard the name. jTemplates look like they're pretty cool though.

    I'm still not sure what to think of the datalink plugin yet, it still seemed like it had a pretty limited use but that might be a good thing. I guess time will tell as it develops.

  3. According to, jQuery is a fast, concise, JavaScript library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

    In simpler terms, jQuery allows you to turn ten lines of traditional Javascript code into two! Combine an enormous range of features with cross-platform compatibility and you have one robust framework. Before you know it, you’ll be creating everything from rich forms to Flash-like menus. Don’t worry if the task of learning yet another new framework seems daunting. These resources will take you step by step.