Isomorphism in web apps

Transcript

1. Isomorphic web app (īsəˈmôrfik) corresponding or similar in form and relations.
2. Web app reusing code, logic and functionalities in both server and client
3. Current paradigms
4. Server-side Rendering only Client SERVER Full HTML page GET/POST/PUT/DELETE data
5. PJAX Client SERVER Full HTML page GET/POST/PUT/DELETE data HTML FRAGMENT Bind HTML fragments
6. CLIENT-HEAVY Client SERVER HTML LAYOUT WITHOUT DATA GET/POST/PUT/DELETE data Render HTML from templates XML/JSON
7. Isomorphism
8. Client SERVER FULL HTML Attach views & Initialize app Codebase First load SERVER Client N+1 load DATA SERVER Client Render & bind templates
9. Under the hood (using AirBnb’s rendr library) First Request GET SERVER DATA source DATA Create model Cache data RENDER VIEW CLient attach backbone.view initialize application SECOND Request GET SERVER DATA source DATA HTML DATA Cache data CLient Create backbone.view
10. Pros • No CORS (++consistent support) • Blazing fast first load • Almost entirely reusable codebase (less code)
11. Cons • New paradigms can be hard to grasp • New technology can be buggy • Data source (API) and server network proximity