JSFoo 2016

Tackling speed and performance for JavaScript

Tejas Dinkar

@tdinkar

Patterns of Isomorphic Rendering

Submitted Aug 20, 2016

In today’s world, web apps have to be rich, responsive, and fast. JS Frameworks like React and Angular work well, but only after the browser has finished loading the page, and all the relevant JS. Isomorphic web apps render the page server side, then have the front end ‘pick up’, once rendered. This allows non JS users to see the initial page, improves the load time, and also improves indexing by bots.

However, isomorphic web apps also come with their own problems. Views need to be shared (or duplicated) between the server and browser. This talk looks at the various techniques that we’ve tried to solve these problems over the last year.

Outline

This talk will briefly look at the following techniques that we’ve attempted (with our Clojure Backend)

  • Just rendering “nothing” server side
  • ClojureScript, attempting to run clojure both on the server and client
  • Generating a dummy DOM, just for the users who haven’t loaded JS yet
  • Using Mustache / Twig / etc... And sharing this with JS
  • Duplicating bits of DOM above the fold
  • PhantomJS
  • Custom build node rendering service (internally called “Vegas”)
  • Shunter, an open source tool which uses custom response type to ‘intercept’ and render views

Requirements

Just a basic knowledge of how the web works

Speaker bio

Tejas is a CodeMonkey at Quintype, a platform that helps publishers improve their Content, engage Audience, and increase Monetization. We are built as a PAAS API, with numerous front end apps for the various publishers and their front end.

Comments

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

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

{{ errorMsg }}

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

Hosted by

JSFoo is a forum for discussing UI engineering; fullstack development; web applications engineering, performance, security and design; accessibility; and latest developments in #JavaScript. Follow JSFoo on Twitter more