Building Single Page Apps with HTML5, Knockout, jQuery, and Web API - Part 2

Last week I wrote about the overall story for my new course for Pluralsight “Building Single Page Apps (SPA) with HTML5, ASP.NET Web API, Knockout and jQuery” (due out August 31st). This week I want to share some of the client technologies that I am exploring in the SPA. This is an end to end course, so I cover the app and how it uses all of the technologies to produce the SPA. To avoid the course being 100 hours long, I cover just the pieces you need to know about to build a SPA. This should help keep the course flowing along from topic to topic.

I’ll keep putting these types of posts out to help compliment my course as long as you continue to find them useful.

Here is a diagram from the course which hits some of the major 3rd party JavaScript libraries I demonstrate in the course. jQuery makes working with the DOM and making AJAX calls easy, and I use a series of plug ins for jQuery to help with things like creating mock data (jquery.mockjson) and creating activity indicators (jquery.activity).

It’s no surprise that I am using Knockout in the course, since I make it no secret that I am a huge fan. Knockout provides data binding and is a solid foundation for MVVM in a web application, including SPAs.

Along with Knockout I use a series of plug ins for it to handle commanding (something Hans and I co-wrote), change tracking (with the help of Steve Sanderson and Ryan Niemeyer), Templating (Jim Cowart’s library), and Validation (Eric Barnard’s library). These Knockout plug-ins all play a central role in building the application. For example, the app covers validating the data before sending on to the Web API. The Validation plug in works great for this and it works nicely with or without HTML5. I’ll be posting the change tracking and commanding plug ins to github over the next few weeks, too.

You can dig deep into Knockout right now by checking out my Knockout course on Pluralsight.

I enjoyed using amplify for abstracting my AJAX calls so I could use mock data. Plus it has the added bonus of helping with local storage and messaging (yes, that same messaging concept from MVVM). Thanks to Elijah Manor for pointing this one out to me.

Quick notes about the rest from the diagram above ….

Sammy is simple and effective library for managing routing and history for both modern and older browsers.
Require helps with Asynchronous Module Definition (AMD) … one feature is dependency resolution.
underscore is a fantastic helper that I found quite useful for dealing with array, collection, and object manipulation where the browser’s support of JavaScript was lacking.
moment is my favorite date library because, well, dates suck
toastr is my toast/alert/popup library for HTML.
qunit is a simple unit testing library

I cover how to make all of these libraries work together in a decoupled manner, using patterns like MVVM, AMD, Revealing Module Pattern and much more. Of course, there is a ton of custom code too.

If interested, I’ll touch on some of the server side technology I use in the next post.

Until next time!