A Simpler Web App Architecture (jDays 2016)

A SimplerWeb Architecture.

Gustaf Nilsson Kotte @gustaf_nk

“server-side vs client-side”

static web pages vs dynamic web app?

no!

either/or → both/and

Elevator pitch

Demonstrate client-side techniques that makes server-side rendering a feasible choice for your web applications.

General sanity checks

Does the tool add value?What are the requirements?

what is your foundation?

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

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

web server

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

server-side web

✓ independent deploys (gateway web server)

pjax

pjax

jquery-pjax (GitHub 2011)https://github.com/defunkt/jquery-pjax

pushState ajax

~500 LOC (not counting comments)

jQuery dependency

jquery-pjax

jquery-pjax

multiple containers (be careful)

don’t overlap event handlers

rewrite in progress (very exciting)https://github.com/defunkt/jquery-pjax/issues/498

demo: enterprise

todos

server-side web

✓ independent deploys (gateway web server)

✓ partials updates (pjax)

client-side includes

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)

hinclude.js

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 driven client-side refreshes

shared list of known domain events

server:

client:

demo

server-side web

✓ independent deploys (gateway web server)

✓ partials updates (pjax + client-side includes)

✓ better caching (client-side includes)

widgets

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

demo

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)

summary

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)

example scenario: static e-commerce site

example scenario: dynamic web app

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

General sanity checks

Does the tool add value?What are the requirements?

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/