Tweet
Tweet

Slide 1

Slide 1 text

Isomorphic web app (īsəˈmôrfik) corresponding or similar in form and relations.

Slide 2

Slide 2 text

Web app reusing code, logic and functionalities in both server and client

Slide 3

Slide 3 text

Current paradigms

Slide 4

Slide 4 text

Server-side Rendering only Client SERVER Full HTML page GET/POST/PUT/DELETE data

Slide 5

Slide 5 text

PJAX Client SERVER Full HTML page GET/POST/PUT/DELETE data HTML FRAGMENT Bind HTML fragments

Slide 6

Slide 6 text

CLIENT-HEAVY Client SERVER HTML LAYOUT WITHOUT DATA GET/POST/PUT/DELETE data Render HTML from templates XML/JSON

Slide 7

Slide 7 text

Isomorphism

Slide 8

Slide 8 text

Client SERVER FULL HTML Attach views & Initialize app Codebase First load SERVER Client N+1 load DATA SERVER Client Render & bind templates

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Pros • No CORS (++consistent support) • Blazing fast first load • Almost entirely reusable codebase (less code)

Slide 11

Slide 11 text

Cons • New paradigms can be hard to grasp • New technology can be buggy • Data source (API) and server network proximity