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.
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.
- 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!
More on the Code Camper SPA
Part 1 - The Story Begins (What is the Code Camper SPA?)
Part 2 - Client Technologies
Part 3 - Server Technologies (the Data Layer)
Part 4 - Serving JSON with ASP.NET Web API
Part 5 - HTML 5 and ASP.NET Web Optimization
Part 7 - MVVM and KnockoutJS
Part 8 - Data Services on the Client
Part 9 - Navigation, Transitions, Storage and Messaging
Part 10 - Saving, Change Tracking, and Commanding
Part 11 - Responsive Design and Mobility