Patterns of Isomorphic Rendering
Submitted by Tejas Dinkar (@tdinkar) on Saturday, 20 August 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.
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
Just a basic knowledge of how the web works
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.