In the shiny new world of single page apps, questions of structure and architecture quickly become center stage as you wrestle with four main areas of concern:

• Styles: Your CSS stylesheets.
• Data: Your JSON data.
• App Code: Your javascript code.
• Templates: Your HTML templates.

I thought it would be instructive to take a new single page app from a big company and explore how they did it.

Do.com

Do.com is a really cool task/project management tool from the good people at Salesforce. It is free right now so it's worth taking a look at.

Stylish

First, let's look at how they get their styles down to the client:

<link href="//{hostname}/assets/application-{md5-hash}.css">

Do pulls in one main stylesheet for their entire app. There are actually a few other ones that are pulled in for different screen sizes, but let's ignore that for now.

Notice that they are grabbing this file from a different host than the server running the app. Turns out it's d1vk1po2s93fx0.cloudfront.net, which is a domain resolving to Amazon AWS's Cloud Front CDN service.

Ain't Got No Body

It is common in single page apps, to find no appreciable html markup in the initial page sent from the server, and Do fits this model with only one non-script tag in the entire body:

<div class='app-layout'></div>

Judging by that class name you might guess that this is an anchor tag for replacing different "app layouts".

Exploring more into Do's single page we find this code laid inline in the body:

window.Do = {
  Models:{},
  Views:{},
  Routers: {},
  Layouts: {},
  Controllers:{},
  Templates:{},
  Utils: {},
  Extras: {},
  Flags: {},
  Storage: {},
  Development: {}
};

Score! This means that when we are in Do, we can pop open the javascript console in our favorite browser and type Do enter, because they have namespaced their entire app and attached it right to the window for us.

Now, we can explore all of Do's models, views, layouts, routers, and everything else with ease! What a treasure trove of knowledge we can gleam about the application's architecture from here.

Getting Data

Next, we find a gigantic bunch of json data:

Do.Boostrap = {
  // a boat load of data
};

This basically boostraps the app with data and avoids an extra trip to the server on page load.

Furthermore, when Do needs to fetch or update more data, a little further exploration shows that they are able to do so via REST calls to their server.

Core App Code

Now we get to two very important scripts, that really tie the whole single page app together:

<script src="//{hostname}/assets/application-{md5-hash}.js">
<script src="//{hostname}/assets/templates-{md5-hash}.js">

These two .js files for the app code and templates rounds out our four areas of concern from earlier. Notice the similarities between these files, and the stylesheet. All files are loaded from the same AWS Cloud Front CDN and all files have their md5-hash attached to the url.

Why Hash the URL?

Great question, and it has a very simple answer, versioning. And this is super important! Hashing the url means that the url for a given resource is totally unique, there will be no mistaking it from an updated version of the code, because guess what, the md5 hash would change. This gives us two major advantages.

1. The HTML cache header can be set to never expire.
2. CDN updates can be done without costly invalidations.

This means that all of your, styles, app code, and templates, only need to be downloaded once by your clients, until you upload new code again! This is almost exactly how a native application works. Download it once until the code gets updated, and then you download it again.

Templating

In a javascript console if you type Do.Templates and hit enter, you get a ton of functions:

One thing to note is that these are templates right? So shouldn't they be in some templating language like handlebars or mustache?

No, they shouldn't. Javascript functions that create strings of html are always going to be faster then any other client side templating solution, because they require no parsing.

This means that you can really use any templating solution you want, as long as you can compile it down to javascript functions.

Making Sense Yet

Architecture and structure are key to making robust single page apps. And as Do.com demonstrates there is a way to build these apps, that is both elegant and high performant.

I encourage you to go try out Do and investigate their application code further through a javascript console. You could learn a lot.