a simpler web app architecture (jdays 2016)
TRANSCRIPT
Elevator pitch
Demonstrate client-side techniques that makes server-side rendering a feasible choice for your web applications.
client-side web benefits
independent deploys
partial updates
caching
cross-team widgets
enables rich interactions
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
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
“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)
pjax
jquery-pjax (GitHub 2011)https://github.com/defunkt/jquery-pjax
pushState ajax
~500 LOC (not counting comments)
jQuery dependency
jquery-pjax
multiple containers (be careful)
don’t overlap event handlers
rewrite in progress (very exciting)https://github.com/defunkt/jquery-pjax/issues/498
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)
h-include.js
custom element version of hinclude.jshttps://github.com/mnot/hinclude/pull/46
custom element polyfill: 3KBhttps://github.com/WebReflection/document-register-element
includes in includes, etc etc
server-side web
✓ independent deploys (gateway web server)
✓ partials updates (pjax + client-side includes)
✓ better caching (client-side includes)
widgets
internal/external
dependencies?
either need to agree (now and later) or bring their own (page weight)
what to do?
→ widgets
separate content from execution
code repository for custom elements
no dependencies
custom element enhances content
think about compatibility
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)
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)
client-side web benefits
independent deploys
partials updates
better caching
cross-team widgets
enables rich interactions
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?)
why is server-side web simpler?
(technological progress → device diversity)
less moving parts
working with the browser
better evolvability
lower rate of change
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-examplehttps://simple-web-enterprise-todos.herokuapp.com/