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

Isomorphism in web apps

C96dbcc746d551ea0665da4a23536280?s=47 jeromegn
January 27, 2014

Isomorphism in web apps

C96dbcc746d551ea0665da4a23536280?s=128

jeromegn

January 27, 2014
Tweet

More Decks by jeromegn

Other Decks in Technology

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