John Papa

Build Single Page Apps - Part 9 - Navigation, Transitions, Storage, and Messaging

John Papa -

I like demo apps that show how to deal with real scenarios like navigation, animation, client storage, and event messaging. A SPA generally has multiple views of related data and uses navigation so it only makes sense that my new Pluralsight course “Single Page Apps with HTML5, ASP.NET Web API, Knockout, and jQuery” demonstrates navigation. And frankly, the rest of the topics like animations and storage were just too cool to leave out.

You can catch up on the previous posts in this series here:

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

Navigation/Routing

I had a few goals for navigation and I covered them all using Sammy.js and its hash based navigation/routing. See the image below for some of the features I implemented.

If I had wanted to use HTML5 pushState (not yet supported consistently in all modern browsers) I likely would have chosen differently. But I wanted the demo to work in a very broad set of browsers, so I decided to stick with Sammy’s hash based navigation. I am a fan of modularity so I wrapped up Sammy in a module I named my router. So if I wanted to swap it out later, it’s trivial.

Transitions

When flipping between different views, I wanted animations. I didn’t need them of course, but I wanted them to provide a subtle UX. So I chose to create a fade in and translation for my views. I wrapped this functionality into, you guessed it, a module (named “presenter”).

Sammy catches the route, it tells the viewmodel to activate itself, then it uses my presenter module to transition the View into place.

Storage and Messaging

I wanted my users to be able to shut down the SPA and when they come back in, the app brings them right back to where they left off. For this, I used the browser’s storage. AmplifyJS made this dead simple and it hooks right into my router. The cool thing about this library is that it works all the way back to IE 5 according to their docs. It figures out what the browser supports, chooses the most modern storage type, and uses it.

I also had a need for a pub/sub message in the demo. For you XAML folks think EventAggregator in Prism or Messenger in MVVM Light. AmplifyJS helped out with that too.

Commanding

I could have used the click event for all of my buttons. But I wanted to build functionality in for handling:

  1. disabling the button while it is executing
  2. handling async commands
  3. disabling the button when it is inappropriate to use

    4. Leaning on my XAML experiences I worked with my friend Hans to build a asyncCommand object and we packaged it up, made it part of a library called KoLite, and posted it to GitHub and NuGet. You can learn more about KoLite and its commanding features on GitHub. I’ll be blogging more about this library in the coming weeks too.

    What Else

    What else is in the course? Actually there is quite a bit more. Next up I’ll talk about saving data, change tracking, and more!