Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Isomorphic Web Apps

Isomorphic Web Apps

Server side rendering has been bread and butter for web apps since years. On the other hand client side apps promise a lot of goodies. Both come with their advantages and drawbacks. Consider SPAs, they are not as performant as pure server side apps because the rendering part is mostly handled by the client. They fail to render anything in a non JS environment such as for search bots, as a result of which SEO becomes a very tricky problem. On the other hand, traditional web apps lack a seamless experience as every action results in a page refresh.

Building a rich web application today demands that we use the best of both worlds. This talk will highlight how to approach Isomorphism in the apps you'd be building. Here is an outline of the talk -

- Drawbacks of pure server and pure client apps
- Progressive enhancement of UI
- Sharing application state between client and server and possible caveats
- Rendering on both server and client and comparison of available frameworks - React, ng2-Universal, libraries for custom solutions
- Shared application logic for client and server and tooling required for the same - Yay Javascript!

This will be followed by a demonstration of components of an Isomorphic app built in React and Express.

ashsidhu

June 30, 2015
Tweet

Other Decks in Programming

Transcript

  1. 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
  2. Execute scripts Download assets Server side apps Download response Server

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

    response Client sees content <- Server Client -> Fetch Data Render template
  4. 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
  5. How about? Persistence Routing layer Rendering layer Application logic DOM

    manipulation User Interface Client Server Common
  6. Hook into rendered app Load app logic Isomorphic apps Download

    response Server response Client sees content <- Server Client ->
  7. 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
  8. 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
  9. • Server writes state as JSON stringified in HTML source

    in a script tag • Client parses JSON and bootstraps its models Sharing app state - simple