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
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.
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.
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 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