Client-side rendering enable many things. We have independent frontend and backend deploys. It’s possible to update sections of the page without re-render everything. It’s easier for teams to develop their own part of the same page (widgets). And it’s possible to develop rich user interactions. However, we also got new problems. It’s easier to break rendering since we have many run-times (all browsers) instead of one (the server) and JavaScript is not fault tolerant. There’s a really high rate of change in the JS library space. We get a longer time to first render. And client-side web applications are hard to evolve. In this talk I will show a simpler way, using a toolbox of techniques: a gateway web server, pjax, client-side includes, and custom elements.

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

18. demo:
enterprise
todos

19. server-side web
✓ independent deploys (gateway web server)
✓ partials updates (pjax)

20. client-side
includes

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/