JavaScript for Line of Business Applications

The web is changing. JavaScript frameworks like Durandal are rising and more and more applications are created this way, offering excellent user experiences. But, is the web ready for this movement? Let's just say that it's a "work in progress".

There are a lot of things we have to be aware of when developing a dynamic JavaScript application and one of the most important things is SEO. When we develop a Durandal application and make it available to the world, one of the first things we would like to see is the application being indexed by google. But without any configuration, the only thing we will see indexed is the root page of our site. What's the problem? I created one of my best web applications, the users love it, it's quick and optimized...but nobody can enjoy it because google can't see it.

What googlebot can see is our index page and nothing more, and the reason is because our content is generated dynamically and the web hasn't traditionally worked this way. We may think "times are changing" and Google should be aware about this...and of course it is. But to take advantage of it we have to make some changes in our application first.

Not too long ago, FTBpro.com moved its website from classic web architecture (CWA) to a single-page application (SPA). For those who are less familiar with SPA, the major differences between the two are as follows...

To put it in simpler words – while in CWA the client gets a full HTML page on each request, in SPA the client gets all needed to be able to render the HTML by itself on the first page load so that subsequent requests might be carried in a very fluent and rich manner. It makes your website more of an application and less of a si

About a year ago SmugMug had a dilemma. Our upcoming site-wide redesign and refactor  (aka the new SmugMug) moved all of our rendering code into client-side JavaScript using YUI. We had a problem; SEO is critical for our customers and search engines couldn’t index the new site.

Possible solutions were thrown around: do we duplicate our code in PHP? Use an artificial DOM? What about PhantomJS? Duplicating code would be a monumental effort and a continued burden when writing new features. Initial tests of fake/artificial DOMs proved unreliable. A small prototype Node.js web server that hooked into PhantomJS proved promising. Node.js’ async model would be perfect for handling things that wait for I/O like rendering webpages. We came up with the project name ‘The Phantom Renderer’ soon after.

Search engines, such as Google and Bing are engineered to crawl static web pages, not javascript-heavy, client-side apps. This is typical of a search engine which does not render javascript when the search bot is crawling over web pages.

This is because our javascript-heavy apps need a javascript engine to run, like PhantomJS or v8, for instance. Web crawlers typically load a web page without using a javascript interpreter.

There are several different ways that we can tell Google to handle indexing our app. One, the more common approach is by using a backend to serve our angular app. This has the advantage of being simple to implement without much duplication of code.

A second approach is to render all of the content delivered by our angular app inside a <noscript> tag in our javascript. We’re not going to cover the second approach

In this article, we’re going to walk through how you can build an SEO toolchain for your workflow, presenting a bunch of different options for you to choose what works best for you.

Google provides a way to index your Single Page Application (SPA), built with Angular.js, Backbone.js, or other Javascript framework (ember.js, knockout.js, and others). In this article, we will first see together how it proceeds, the amount of work that the webmaster has to do, and then we will come up with an automatic solution.

All along this article, I will introduce tools and examples of this website, vickev.com (which is built with Angular.js and Node.js), to prove the relevance of the method.