Meta Refresh 2015

The web in your pocket

Dheeraj Kumar

@codepodu

Render your single-page app on the server with Isomorphic Javascript

Submitted Jan 16, 2015

I’ll attempt to help you speed up your app by rendering your client-side JS app on the server with Node.js/IO.js, hence improving your page’s first render time.

Outline

In a recent analysis by Filament Group, using a framework increases a page’s first render time by several seconds. The larger the framework is, like Angular and Ember, the more performance penalties they incur (4 and 5 seconds).

Isomorphic Javascript is a technique to minimize the perceived performance penalties for the end user, by rendering your page on the server using Node/IO, and serving the static HTML generated. This significantly decreases the time to first render, which effectively speeds up the site drastically for the end user. The framework will then be loaded asynchronously, and will take over once loaded to provide the interactivity.

Advantages

  1. This technique is especially useful in mobile devices, as seen from the analysis, where 3G speeds can cause ~5 seconds delay to the render time.
  2. SEO benefits just like a server-sided app.
  3. Progressive enhancement of the site, so the content loads first, and then is made interactive.

Considering this is MetaRefresh and not JSFoo, I’ll be talking about this technique in general, talking about the various advantages in detail, along with the tradeoffs required to build this into your app. However, as for implementation details, I’ll be talking from the context of Ember & Fastboot, Backbone & React, and Prerender.io.

Note that the Meteor Framework is one of the most famous examples of Isomorphic Javascript. I haven’t used it personally, but will try to learn & include it in the talk :)

Requirements

Curiosity, and an open mind.

Speaker bio

Hi, I’m Dheeraj.

I write Ruby & JS at Bang The Table, Bangalore. I’ve recently started learning Scala and being constantly amazed by its expressiveness.

I’m a member of & presented talks in several meetups including Bangalore Ruby User Group, Chennai.rb and Bangalore Ember.js Meetup Group. I’ve also helped organize India’s first regional Ruby conference - Garden City Ruby Conference

I love software design patterns, reverse engineering, cycling and Kaju Katli

I’m a proud opinionated Ember.js enthusiast. Go Hamster!

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

Meta Refresh is an umbrella forum for conversations about different aspects of design and product including: UX and interaction design CMS, content management, publishing and content marketing Information architecture more