High Performance Isomorphic Web Apps Ashmeet Sidhu | @ashsidhu 

Outline • Comparison of server and client side applications • Introduction to Isomorphism • Key features of isomorphic apps • Available Open Source libraries and tooling • Real time implementation 

Server side apps Persistence Routing layer Rendering layer Application logic DOM manipulation User Interface Client Server 

Execute scripts Download assets Server side apps Download response Server response Client sees content <- Server Client -> 

Client side apps Persistence Routing layer Rendering layer Application logic DOM manipulation User Interface Client Server 

Execute scripts Download assets Client side apps Download response Server response Client sees content <- Server Client -> Fetch Data Render template 

Server vs Client Initial load SEO User Experience Initial load SEO User Experience 

Iso-What? Isomorphic code is simply code with 
 environment agnostic abstractions What you use: request(url) What request(url) does: 
 XMLHttpRequest on client 
 http.request on server 

Isomorphism Abstract all the things!! Isomorphic Code Server Client 

render() React.renderToString() React.render() Rendering abstraction abstraction Server Client 

How about? Persistence Routing layer Rendering layer Application logic DOM manipulation User Interface Client Server Common 

Hook into rendered app Load app logic Isomorphic apps Download response Server response Client sees content <- Server Client -> 

Progressive enhancement • Application usable without JS on client • SEO is really easy with this approach • Client bootstraps on top of pre rendered app • Interaction powered by rich client scripts 

Sharing app state • Server renders template corresponding to state S1 • Server sends rendered template and state S1 along • Client receives both and bootstraps app logic according to given state. • Client resumes app execution from state S1 

• Server writes state as JSON stringified in HTML source in a script tag • Client parses JSON and bootstraps its models Sharing app state - simple 

How? 

Let’s get coding 

Thank you