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.

    First Name:
    
    Last Name:
    

    var person = {};
    $("form").bind(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'),
    }

    ko.applyBindings(myViewModel);

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!