Traditional 2-tier and 3-tier
- Website
- Web app
- SSG
- SSR
- CSR / SPA
- PWA
https://mobidev.biz/blog/web-application-architecture-types
https://brockherion.dev/blog/posts/ssr-vs-csr-vs-ssg/
Which issues drove evolution
https://frontendmastery.com/posts/the-new-wave-of-javascript-web-frameworks/
SPA or not, considering worldwide device constraints
https://infrequently.org/2024/01/performance-inequality-gap-2024/#the-budget%2C-2024
Alternative to SPA: htmx and HOWL
https://www.erikheemskerk.nl/htmx-simplicity/
- search app exple
- plain HTML
- vanilla JavaScript
- React example
- htmx
https://htmx.org/essays/you-cant/
- MPA with service workers
Pros of Server Side Rendering
https://www.timr.co/server-side-rendering-is-a-thiel-truth/
Highly-coupled frontend / backend
- /page/a , /page/b. REST API
https://max.engineer/server-informed-ui
LiveView and realtime sites
https://fly.io/blog/how-we-got-to-liveview/
- websocket instead of HTTP Rest API
- send small state updates
- DOM is patched using morphdom (https://github.com/patrick-steele-idem/morphdom)
LiveView In other languages
https://github.com/liveviews/liveviews
Alternative frontend architectures
Islands architecture
https://docs.astro.build/en/concepts/islands/
https://www.patterns.dev/vanilla/islands-architecture/
Micro-frontends, fragment architecture
https://blog.cloudflare.com/better-micro-frontends/
Local-first
- Replicated data structures, CRDT
- Replicated database tables
- Replication as a protocol
- Figma and Linear as apps with this architecture
https://bricolage.io/some-notes-on-local-first-development/