Building Isomorphic JavaScript Apps

Chapter 13. Full Stack Angular

Jeff Whelpley

In December 2012 I joined GetHuman. My first assignment was an interesting one. I needed to figure out a way to build a rich, real-time version of our popular flagship website, GetHuman.com. The challenge was essentially figuring out a way to combine two things that (at that time) did not often go together:

1. A client-side JavaScript web app
2. An SEO-friendly, performance-driven website

I had a wealth of experience with each of these separately, but never together. The most common solutions at that time for meeting these requirements usually boiled down to a Rails-like approach or a headless browser–based approach—both of which had significant downsides.

The Rails approach involved building a server-side website with small bits of JavaScript sprinkled on various pages. While this approach did a really good job for SEO and performance, it did not allow me to take advantage of advanced client-side features. Moreover, this solution felt like a traditional website, which is not what we wanted. We wanted a fast, responsive, and fluid user experience, which you typically could only achieve at that time with a client-driven, single-page application (SPA).

On the other end of the spectrum were the apps built completely on the client side using Backbone, Angular, Ember, or just plain vanilla JS. In order to make sure your client-side app was visible in search engines you would use a headless browser like PhantomJS to cache snapshots of your client-side ...