Building Single Page Apps with HTML5, Knockout, jQuery, and Web API – Part 3 – Server Technologies | John Papa

John Papa

Evangelist on the loose

Building Single Page Apps with HTML5, Knockout, jQuery, and Web API – Part 3 – Server Technologies


Some skills never go out of fashion. Managing data and serving it up to a client is one of those skills. Sure, the technologies change and the way we use them, but we’re still gathering and delivering data.

Recently I wrote about how my new course is progressing for Pluralsight. The course, titled “Building Single Page Apps (SPA) with HTML5, ASP.NET Web API, Knockout and jQuery” , is an end to end course. This means I cover the app and how it uses all of the technologies to produce the SPA.

Today I’ll share some insights on the server technologies I am using in Code Camper SPA. The diagram below shows the key ingredients I used to create the server technologies. One of the goals of this architecture is to surface the data in an simple way so I can add new ways to get to the data or even add new data fairly quickly. The main idea was to keep the Web API’s methods simple, which I think was achieved.


I’ve been down this road many times in creating server architectures to serve data so I had a pretty good idea of what I wanted to keep the same and what new technologies and patterns I wanted to sprinkle in. Also, it helps to have good friends like Dan Wahlin and Ward Bell to bounce some ideas off. We three tend to think alike so you will see some similarities in how we address these issues. Ward had a very active hand in helping shape this particular app as my unofficial code reviewer (and often telling me I was crazy).


I started out thinking I would use SQL Server but decided to go with SQL Server CE, just because it makes distributing the database that much simpler. Of course, for production apps I recommended SQL Server over CE. The database is rather simple, but has enough real world scenarios in it to drive the points home. We have sessions, speakers, attendees, tracks, time slots, and many to many joins between sessions and attendees.

Entity Framework Code First (Magical Unicorn Edition)

I chose Entity Framework (EF) Code First (v4.x or v5 will work) for 2 reasons. First, experience matters. It’s a solid ORM that works well with web technologies as it has proven to do the job for me in my experiences. Second, I wanted to write my model separate from the database and use pure POCO (plain old class objects). EF Code First does a great job at staying out of my way when I create my models.

I do wish that EF Code First had a more appropriate name. Its name implies that you have to create your code first, then generate the database. That’s the impression I run imageinto quite often – but its not entirely accurate. EF Code imageFirst can generate the database from models, but it doesn’t have to. You can certainly create the database and the models separately. The fluent API (or data annotations) allow you to hook them up where the conventions may be different between the models and database. So while Scott Hanselman dubbed EF the “Magical Unicorn Edition”, I’d settle with a revised name of “EF POCO Loco Smile


Yes, I like data patterns. And you will find a few in this course including the Repository Pattern (to expose the data in a consistent way), Unit of Work Pattern (to decouple the Web API from the lower layers and to aggregate the repositories), the Factory pattern (for creating repositories), and Single Responsibility Principle (SRP). The SRP is all throughout the client and server, in fact. Simply put, the patterns help make the app easier to debug, scale and maintain.


Serving data has evolved. We’ve done it with SOAP and with REST. Most recently the tools/technologies we use for serving web services has gone from using ASMX to WCF to MVC actions and now to the ASP.NET Web API. Recently I had use MVC actions to serve JSON data through RESTful services for my client apps in Silverlight and JavaScript. In fact, when I worked on the Account at a Glance app with Dan Wahlin we used this technique. But the ASP.NET Web API makes serving JSON data much easier and honestly, it just feels better. I love the simplicity of the API Controllers’ methods and how it just meshes well with a modern SPA. So it made a great choice here. In the course I cover how to define routes, different types of controllers you can create, using IoC, web optimization, and other ways to customize the Web API for the Code Camper SPA.

I’m very happy with how the app has shaped up on the server side (and overall).

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

tags: entity framework patterns pluralsight SPA webapi
  • Oscar Agreda

    Thanks John
    to tell you the truth. I am just waiting on you to release the SPA video to purchase the PluralSight Plus membership.

  • Richard

    Thanks for the update John.
    A quick question, will the course materials be available for VS2012 and/or VS2010 SP1?
    I ask because I only have one development machine and I don’t want to install VS2012 onto it yet.
    Best wishes.

  • Nick

    @Oscar Don’t wait. There are lots of other courses, including a couple by John, to get you ready to enjoy his course.

  • Jeff

    Hopefully, your upcoing PluralSight module will incorporate Upshot.js.

  • john

    Oscar – Thanks :) I think you’ll like this one.

  • john

    Richard – I’m developing it in VS 2012. But there is no reason you couldn’t use VS 2010. You’d just have to install some of the templates via NuGet … Web API works in VS 2010.
    Nick – Thanks for the vote of confidence :)

  • GA

    Hi John,
    Good stuff as always. I can’t wait for what’s coming.
    Quick question on “part 2″, did upshot.js ever cross your mind?

  • john

    GA – I did consider upshot, but its still in flux. I do expect it will be a good choice down the road tho.

  • Shawn

    Hi John,
    I am very interested in this course. Do you have an ETA for it? Thanks!

  • john

    Shawn – Good to hear. I’m shooting hard for Aug 31 … though mid Sep may be more realistic.

  • jacob

    that stuff you said about ‘I do wish that EF Code First had a more appropriate name’ is soo right. I had a difficult time explaining tht to my collegues.

  • Pingback: Single Page Apps with HTML5, Knockout, jQuery, and Web API – Part 4 – Serving JSON with ASP.NET Web API | the pluralsight blog()

  • Martin

    Hey John, I really enjoyed this course and have played around with it. Though I can’t figure out why I’m getting Null Reference Exceptions on lines like: string email = Uow.Attendance.GetAll().FirstOrDefault().Person.Email;?

    • Martin

      Nvm this post I got it to work, realized i also needed to set ProxyCreationEnabled to true.

  • Pingback: Inside the New Single Page Apps Template | John Papa()

  • Joy

    Hello jon ! i went through this course last month !! the data patterns you have used is really helpful for even beginners to get started with design patterns in real world scenario . Many thanks to you for this course . Can you please tel me why you chose Knockout instead of backbone.js ? Since backbone.js is much more verbose and seamless in terms of consuming rest services . Wouldn’t have that been an advantage ? Also do you have any plan to convert this into simultaneous backbone app ?

    • John

      Hi Joy,

      Thanks for the feedback, I am glad you enjoy the course. I chose Knockout because I felt it flowed better in this context and that it is easier to follow. Both backbone and knockout are good choics, but they do different things, some overlapping, some not so much. If you know backbone well, you could certainly use that instead. I currently have no plans to convert it to backbone, but if you go there, let us know how it goes!

  • David

    Hi John,
    Thanks for a great course. It took me quite a while to get my head around the repository / unit of work / factory pattern that you implement. I am still struggling to see the advantages of the complicated RepositoryProvider / RepositoryFactories set up. You skim over this in the tutorials because it is not what you are trying to teach. Fair enough. But I would be very grateful if you could explain in detail how these patterns are used to enable scalability and testing.
    For example, my initial thought is that to run unit tests I would just create a fake unit of work class which takes a fake DbContext object and a bunch of fake repositories. But this completely cuts out the IRepositoryProvider, so I am guessing that does not fit with the intent of the design??
    Thanks again,

  • Abhi

    Hi John,

    I am about to start your Pluralsight course on SPA, but before that I have a small question.
    We are using DB2 as the database and Entity Framework isn’t an option for us. Would you be able to throw some light on how to go about creating a SPA without using Entity Framework?


    • John

      Hi Abhi,

      Sure. What you use on the back end is not important for a SPA. You can use DB2 and expose your data any way you like via a web service to the client. The “SPA” is all on the client.

      • Abhi

        Thanks John for the prompt response. That makes perfect sense.

        I have started the Pluralsight course and am looking forward to do my first SPA app. :-)


  • ifrit

    Very nice post, thank you very much.
    Just wondering how I’de manage the LoginModel in such architecture

    • John

      ifrit – I’ll be blogging about this in the next few days :)

  • Pingback: LOB Gamification Service Admin Website: Data Services « Dan's Green Shoes()

  • James Barrow

    Hi John,

    I’m posting because I’m also interested in the question David had regarding the Unit of Work pattern you use, and how to go about doing unit testing with this approach.

    Also, typically I’ve seen that there would be another service layer, between the web and data layers, with dependencies: web > service > data

    That way, the web controller just calls a service, and in the service you actually use the unit of work that interacts with the database, so in my experience I’ve seen that you typically wouldn’t test the controller, but rather the service, and stub/mock out anything it’s using. In this case, that would mean mocking out the unit of work.

    So please if possible, can you get back to David’s question, as I think it would be a common question :)



  • David

    Thanks for the bump James. I was starting to think it must have been a stupid question. I would be very interested to know the benefits of the current implementation over this simplification:
    * Delete the RepositoryFactories class.
    * Change IRepositoryProvider to this:
    DbContext DbContext { get; set; }
    IRepository Rooms();
    IRepository TimeSlots();
    IRepository Tracks();
    ISessionsRepository Sessions();
    IPersonsRepository Persons();
    IAttendanceRepository Attendance();

    * Then implement each of these in RepositoryProvider; e.g.:
    public IRepository Rooms()
    return new EFRepository(DbContext);
    * Then simply call these from the UOW, e.g.:
    public IRepository Rooms { get { return RepositoryProvider.Rooms(); } }


  • David

    return new EFRepository(DbContext);

  • Mark

    We’d like to leverage the Web API, but no need for EF as we already have business objects / domain objects (not to mention rich set of method arguments) developed that could just be called from the service methods.
    Is this workable with the concept of context object?

    • John

      Mark – Certainly. You can create the back end as you wish as long as you expose it to a web service of some sort. Preferably one that reveals JSON over http, for ease of Ajax calls.

  • Dave

    Hi John, I’d like to seek your permission to use your code (the repository factories stuff) in an open source project. Cheers.

%d bloggers like this: