- Server-side rendering techniques like pjax and client-side includes allow for partial page updates and better caching while enabling cross-team components and server-driven updates.
- These techniques provide benefits like simpler deployments and operations while addressing challenges like rate of change and device diversity.
- Examples include using pjax for partial page updates over AJAX and client-side includes for caching and reusable content across includes.
3. 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)
4. 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)
10. 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)
15. h-include.js
custom element version of hinclude.js
https://github.com/gustafnk/h-include
custom element polyfill: 3KB
https://github.com/WebReflection/document-register-element
<h-include src="/path/to/include">
Fallback content here
</h-include>
includes in includes, etc etc
21. 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?)
23. 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 value
https://www.jayway.com/2016/05/23/6-reasons-isomorphic-web-apps-not-silver-bullet-youre-looking/