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

I’m currently recording a course for Pluralsight with a working title of “Building Single Page Apps (SPA) with ASP.NET Web API, Knockout and jQuery” targeting to be out by August 31. This is an end to end course that hits hundreds (ok, not quite) of technologies that work together to create a SPA that works across multiple devices and screen sizes. As I’m recording the videos, I thought it might be fun to occasionally blog about the experience as there were many good tips (and trips) I hit along the way. I really wanted to share an end to end demo that doesn’t cover every feature of every technology, but rather how they all work together in symbiosis.

So the first module starts out by talking about what is a SPA, why you should be interested even if you aren’t building a SPA, and what the story is for the end to end demo. Basically, it’s the lead in to the entire course. And thus, that’s where this post starts.

One of the coolest parts of this course is the tremendous number of people who influenced it. The developer community we work in is amazing and I try not take you all for granted.

Thanks to the Community

Most of all I have to thank Scott Guthrie for inspiring me to write this course, Ward Bell (for being my code reviewer, pair programming partner, and most excellent friend) and Hans Fjallemark (designer and my CSS mentor). But there were many others (and many of them very good friends) who helped in various ways. For example: Julie Lerman gave me some great tips on Entity Framework Code First, Dan Wahlin helped me refine the JavaScript patterns, the Microsoft ASP.NET team helped me get Web API and Optimization fine tuned, Ryan Niemeyer helped bounce my crazy ideas about performance tuning Knockout. There were many others were just awesome at purely letting me pass ideas by them and giving me their two cents. For that, I included all of these people in the demo as “fake” speakers at the event (with their permission of course).

What is a SPA?

In short, there is a great wikipedia page that explains what a SPA is, some ways to create a SPA (there is not just one cut and dry way), and some pros and cons. Definitely check it out. My cliff notes, that I include in the course, are that a SPA is a web app that fits on a single web page that provides a fluid user experience. A SPA is fully (or close) loaded on the initial page load, it’s key resources are preloaded, and progressively downloads features as required. A SPA may also persist and maintain important state on the client while also handling navigation, history and deep linking. A great examples of a SPA is gmail.

What’s the point?

The user experience is key. If you can speed up the perception of page loads and navigation for the user, you win. A SPA preloads what the user may most oft use, so when they navigate they are not making network trips and page reloads on those oft used features. Thus the result is a snappy app and a happy user.

What’s the user story for the demo?

You are attending an event where WiFi may be spotty (isn’t it always?) since you are sharing connectivity with thousands of people. You pull up the event’s web site (which I call Code Camper) and want to browse the sessions that interest you the most, finding the rooms and times for them, and search and filter them. You may have even “favorited” some sessions beforehand that you want to get to quickly. Once loaded, the app should allow you to do all of this with minimal additional page loads just in case you lose connectivity or the connection gets even slower. If its in a SPA … you can!

Mock Ups – End Game

I started with mock ups on paper. Then I moved to Balsamiq, which I love because its quick and easy. It’s not important to be perfect at this stage. The key is to get the idea communicated so the team knows what the goal is. Here is an early mock up of 1 “page” in the app.

And after 8 weeks of about 4 hours per night 5 days a week, the app was written.

Responsive Design

One of the goals was to make it work in mobile device browsers. So thanks to the great tool known as Electric Plum, you can see the screen shots here from an iPhone and iPad. I used a few other testing platforms too that I go into in the Pluralsight course.

Keys

Building this course demo was a great experience. I was able to apply a ton of great scenarios to a very digestible demo app that covers a great deal of ground. The course is a great example of one way to build a Single Page App … one of several ways. I explain through the course that there are other roads you may take, just like with any technology. However I made it a point to follow through on the app to show a completed path. If I were watching this course and digesting its code I would be using it as a foundation, but constantly thinking about how I could tweak it. So feel free!

In a future post I’ll talk a bit about the technologies that I cover in the SPA course.

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 6 - JavaScript Modules

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