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.

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