Simpler Web Architectures Now! (At The Frontend 2016)
0 likes859 views
- 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.
Simpler Web Architectures Now! (At The Frontend 2016)
- 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)
- 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
- 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/