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

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

Database

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 into quite often – but its not entirely accurate. EF Code First 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 “

Patterns

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.

ASP.NET Web API

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