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.

1b1a665b8162316e39283f55d451058e?s=128

ashsidhu

June 30, 2015
Tweet

Transcript

  1. High Performance Isomorphic Web Apps Ashmeet Sidhu | @ashsidhu

  2. 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
  3. Server side apps Persistence Routing layer Rendering layer Application logic

    DOM manipulation User Interface Client Server
  4. Execute scripts Download assets Server side apps Download response Server

    response Client sees content <- Server Client ->
  5. Client side apps Persistence Routing layer Rendering layer Application logic

    DOM manipulation User Interface Client Server
  6. Execute scripts Download assets Client side apps Download response Server

    response Client sees content <- Server Client -> Fetch Data Render template
  7. Server vs Client Initial load SEO User Experience Initial load

    SEO User Experience
  8. 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
  9. Isomorphism Abstract all the things!! Isomorphic Code Server Client

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

  11. How about? Persistence Routing layer Rendering layer Application logic DOM

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

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

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

  17. Let’s get coding

  18. Thank you