A Simpler Web App Architecture (jDays 2016)
4 likes2,214 views
The document discusses the advantages and techniques of combining server-side and client-side web architecture, emphasizing independent deploys, partial updates, and improved caching. It presents examples like pjax for HTML updates and client-side includes for reusable content. Acknowledging the challenges of device diversity and time-to-first-render, it advocates for richer interactions and better compatibility through custom elements and shared widgets.
A Simpler Web App Architecture (jDays 2016)
- 1. A Simpler Web Architecture. Gustaf Nilsson Kotte @gustaf_nk
- 2. “server-side vs client-side” static web pages vs dynamic web app? no! either/or → both/and
- 3. Elevator pitch Demonstrate client-side techniques that makes server-side rendering a feasible choice for your web applications.
- 4. General sanity checks Does the tool add value? What are the requirements?
- 5. what is your foundation?
- 6. client-side web benefits independent deploys partial updates caching cross-team widgets enables rich interactions
- 7. client-side web challenges technological progress → device diversity time-to-first-render (✓ isomorphic javascript) “EnhanceConf - Forbes Lindesay - Server Side Rendering”, https://m.youtube.com/watch?v=CBnd3EzIZCo interoperability/evolvability rate of change
- 8. techniques
- 9. techniques web server enables server-side web (architectural foundation) pjax → partial updates (HTML views over ajax) client-side includes (caching and reusable content) server-side driven client refreshes custom elements → shared widgets
- 10. web server
- 11. “a web server that uses an API” a.k.a... gateway web server web frontend server HTML serving API gateway web backend for frontend (BFF)
- 13. server-side web ✓ independent deploys (gateway web server)
- 14. pjax
- 15. pjax jquery-pjax (GitHub 2011) https://github.com/defunkt/jquery-pjax pushState ajax ~500 LOC (not counting comments) jQuery dependency
- 16. jquery-pjax
- 17. jquery-pjax multiple containers (be careful) don’t overlap event handlers rewrite in progress (very exciting) https://github.com/defunkt/jquery-pjax/issues/498
- 19. server-side web ✓ independent deploys (gateway web server) ✓ partials updates (pjax)
- 21. 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)
- 22. hinclude.js
- 23. h-include.js custom element version of hinclude.js https://github.com/mnot/hinclude/pull/46 custom element polyfill: 3KB https://github.com/WebReflection/document-register-element includes in includes, etc etc
- 24. server-side driven client-side refreshes shared list of known domain events server: client:
- 25. demo
- 26. server-side web ✓ independent deploys (gateway web server) ✓ partials updates (pjax + client-side includes) ✓ better caching (client-side includes)
- 27. widgets
- 28. widgets internal/external dependencies? either need to agree (now and later) or bring their own (page weight) what to do?
- 29. → widgets separate content from execution code repository for custom elements no dependencies custom element enhances content think about compatibility
- 30. demo
- 31. server-side web ✓ independent deploys (gateway web server) ✓ partials updates (pjax + client-side includes) ✓ better caching (client-side includes) ✓ cross-team widgets (client-side includes + custom elements)
- 32. summary
- 33. techniques web server enables server-side web (architectural foundation) pjax → partial updates (HTML views over ajax) client-side includes (caching and reusable content) server-side driven client refreshes custom elements → shared widgets (free from dependencies)
- 34. example scenario: static e-commerce site
- 35. example scenario: dynamic web app
- 36. client-side web benefits independent deploys partials updates better caching cross-team widgets enables rich interactions
- 37. server-side web ✓ independent deploys (gateway web server) ✓ partials updates (pjax + client-side includes) ✓ better caching (client-side includes) ✓ cross-team widgets (client-side includes + custom elements) ~ enables rich interactions (do you really need it?)
- 38. General sanity checks Does the tool add value? What are the requirements?
- 39. why is server-side web simpler? (technological progress → device diversity) less moving parts working with the browser better evolvability lower rate of change
- 40. 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/simple-web-architecture-example https://simple-web-enterprise-todos.herokuapp.com/