- 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.

1. Simpler
Web Architectures Now!
Gustaf Nilsson Kotte @gustaf_nk

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

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)

5. techniques

6. 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)

7. pjax

8. pjax
jquery-pjax (GitHub 2011)
https://github.com/defunkt/jquery-pjax
pushState ajax
~500 LOC (not counting comments)

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

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)

11. demo

12. client-side
includes

13. client-side includes
hinclude.js
https://github.com/mnot/hinclude/
2005 by Mark Nottingham (@mnot)
https://en.wikipedia.org/wiki/Mark_Nottingham
~150 LOC (not counting comments)

14. 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>

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

16. 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>

17. 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

18. demo

19. client code

20. summary

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?)

22. 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-example
http://static-web-shop-example.netlify.com/
https://github.com/gustafnk/h-include

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/