What SPAs Got Right: Lessons for Boring Web Development

In 2013, Facebook published React, and suddenly everything on the web needed to be a Single-Page Application. Now that the hype dust has settled, let’s talk about what SPAs got right and how those ideas can be applied to modern, “boring” web development.

Transcript

1. SIMON PRAETORIUS lessons for boring web development What SPAs got right
2. 13 years in TYPO3 agencies independent since 2023 backend frontend Fluid Maintainer Team Vite for TYPO3 Simon Praetorius
3. Simon Praetorius SPA!? What SPAs got right – lessons for boring web development
4. Simon Praetorius What SPAs got right – lessons for boring web development SPA MPA single-page application React, Vue, Svelte, … Next.js, Nuxt.js, Headless CMS, … multi-page application HTML pages with links and forms WordPress, Drupal, TYPO3, Symfony, …
5. Simon Praetorius What SPAs got right – lessons for boring web development SPA MPA the cool stuff the boring stuff
6. Simon Praetorius Is everything an app? What SPAs got right – lessons for boring web development No.
7. SPA Simon Praetorius What SPAs got right – lessons for boring web development data-driven client-side complexity interactivity across whole project
8. Simon Praetorius What SPAs got right – lessons for boring web development content-driven server-side complexity isolated interactivity MPA
9. Simon Praetorius What SPAs got right – lessons for boring web development SPA MPA
10. Simon Praetorius What SPAs got right – lessons for boring web development SPA MPA
11. ❶ ❸ Simon Praetorius What SPAs got right – lessons for boring web development ❷
12. Simon Praetorius Components ❶ What SPAs got right – lessons for boring web development
13. Components Simon Praetorius What SPAs got right – Components ✦ code snippets ✦ strict API ✦ minimal side effects ✦ minimal internal logic reusable encapsulated simple
14. Simon Praetorius TeaserCard Component icon content title link What SPAs got right – Components
15. Simon Praetorius invent your own HTML elements What SPAs got right – Components
16. Bene fi ts Simon Praetorius What SPAs got right – Components ✦ visual consistency ✦ enforcement of guidelines (e. g. accessibility) ✦ easier refactoring ✦ living styleguide
17. Get Started Simon Praetorius What SPAs got right – Components ✦ TYPO3: Fluid Components ✦ Symfony: Twig Components ✦ Laravel: Blade Components ✦ native Web Components ✦ Lit, Vue, Svelte, …
18. Simon Praetorius What SPAs got right – lessons for boring web development Tooling ❷
19. SPA Ecosystem Simon Praetorius What SPAs got right – Tooling Vite Rollup Rolldown esbuild Webpack Turbopack eslint Histoire Storybook oxc vitest JSX bun pnpm stylelint prettier postcss lightningcss Svelte React Vue Next.js Nuxt Preact Lit SvelteKit Tailwind Shadcn
20. Simon Praetorius treat tooling as part of the product What SPAs got right – Tooling
21. Simon Praetorius Too much tooling? Probably. What SPAs got right – Tooling
22. Emerging Standards Simon Praetorius What SPAs got right – Tooling ✦ ECMAScript & CSS improvements ✦ native Web Components ✦ components become HTML elements, e. g. <dialog> ✦ bundler consolidation (?) ✦ utility- fi rst CSS (?)
23. Get Started Simon Praetorius What SPAs got right – Tooling goal: modernize & simplify frontend setup ✦ drop support for old browsers ✦ replace libraries with platform features ✦ switch to modern bundlers like Vite ✦ improve code quality with modern linting tools
24. Simon Praetorius What SPAs got right – lessons for boring web development Reactive State ❸
25. Reactive State Simon Praetorius What SPAs got right – Reactive State ✦ data separated from presentation ✦ presentation keeps track of used data ✦ presentation updates automatically on state changes ✦ frameworks provide various optimizations/patterns
26. Simon Praetorius MPA… reactive? What SPAs got right – lessons for boring web development
27. Interactive Islands Simon Praetorius What SPAs got right – Reactive State ✦ server-rendered static HTML ✦ areas with client-side interaction are marked ✦ analog/related: progressive enhancement
28. Interactive Island Simon Praetorius data-driven client-side complexity isolated interactivity What SPAs got right – Reactive State
29. Get Started Simon Praetorius framework decision for interactive island ✦ Is it complex enough? ✦ consider project & team ✦ prefer future-proof & boring technology What SPAs got right – Reactive State
30. Simon Praetorius (un)follow the hype What SPAs got right – lessons for boring web development
31. Simon Praetorius (un)follow the hype ✦ learn web fundamentals & follow standards ✦ fi nd resources that curate the current hype ✦ fi ne-tune your bullshit detector ✦ evaluate consequences ✦ pick up proofed technologies What SPAs got right – lessons for boring web development
32. Book a Simon individual workshops for teams introduce components to your team modernize your frontend toolchain
33. Simon Praetorius Questions? What SPAs got right – lessons for boring web development
34. Simon Praetorius TYPO3 TechLead & Developer www.praetorius.me s2b @s2b@norden.social moin@praetorius.me