Simpler Web Architectures Now!Gustaf Nilsson Kotte @gustaf_nk

Elevator pitch

Show client-side techniques that make server-side rendering a feasible option for your web applications.

client-side web benefits

simpler deploys and operations (PaaS and server-less architectures too)

partial updates

fine-grained content caching (ajax)

cross-team components

enables richer interactions (...that are not even possible in classical web)

client-side web challenges

rate of change

device diversity (especially on mobile)

https://meta.discourse.org/t/the-state-of-javascript-on-android-in-2015-is-poor/33889/8

time-to-first-interaction (mobile, latency/bandwidth + CPU)

AMP + Progressive Web Apps: Start fast, stay engaged - Google I/O 2016

interoperability and evolvability (single runtime, isolation vs small bundle size)

techniques

techniques

pjax → partial updates (HTML views over ajax)

client-side includes (caching and reusable content)

server-side driven updates (update state, application logic kept server-side)

pjax

pjax

jquery-pjax (GitHub 2011)https://github.com/defunkt/jquery-pjax

pushState ajax

~500 LOC (not counting comments)

jquery-pjax $(document).pjax('css-selector-for-links', '#css-selector-for-container')

demo: web shop

team A: products, static site (variations, related information)

team B: shopping cart and check-out

separate teams → separate systems (Conway’s Law)

demo

client-side includes

client-side includes

hinclude.jshttps://github.com/mnot/hinclude/

2005 by Mark Nottingham (@mnot)https://en.wikipedia.org/wiki/Mark_Nottingham

~150 LOC (not counting comments)

hinclude.js

<hx:include src="/path/to/include"> Fallback content here</hx:include>

<hx:include src="/path/to/include" id="foo-include"> Refresh like this: hinclude.refresh("foo-include")</hx:include>

h-include.js

custom element version of hinclude.jshttps://github.com/gustafnk/h-include

custom element polyfill: 3KBhttps://github.com/WebReflection/document-register-element

<h-include src="/path/to/include"> Fallback content here</h-include>

includes in includes, etc etc

fix for flashy fallback content

<script> <!-- https://gist.github.com/egeorjon/6755681 --> document.documentElement.className = document.documentElement.className.replace( /(?:^|\s)no-script(?!\S)/g , '' )</script>

<style> h-include:not(.included) { display: none; }

.no-script h-include, h-include.included { display: block; }</style>

server-side driven updates

domain events<h-include src="/path/to/include"> <-- after inclusion --> <div data-refresh-on="shopping-cart-item-added"> <p>Shopping cart: 0</p> </div></h-include>

server: if(xhr): return domain event(s)

client: for each event: for each subscribing element: trigger refresh on parent h-include

demo

client code

summary

server-side web (with pjax and client-side includes)

✓ partials updates (pjax + client-side includes + server-side driven updates)

✓ better caching (client-side includes)

✓ cross-team components (client-side includes + server-side driven updates)

✗ enables richer interactions (do you really need them in all scenarios?)

thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! thank you! (@gustaf_nk)https://github.com/gustafnk/static-web-shop-examplehttp://static-web-shop-example.netlify.com/

https://github.com/gustafnk/h-include

question: what about isomorphic web apps?

high language lock-in effect (probably javascript)

iso web apps != progressive enhancement

blocking vs non-blocking data flow (hard!)

time-to-meaningful-interaction (“Uncanny Valley”)

1KB JS == 1ms UI thread stall on mobile

your best devs busy not producing valuehttps://www.jayway.com/2016/05/23/6-reasons-isomorphic-web-apps-not-silver-bullet-youre-looking/