Expedition into the Frontend Jungle

Frontend technologies evolve rapidly, often outpacing their backend counterparts. Every few months, there seems to be a new kid on the block, demanding our immediate attention and often suggesting that our current technology stack is outdated. However, staying up-to-date with the latest frontend trends often diverts resources from addressing the real challenges in our client projects.

This talk aims to provide a high-level overview of different frontend approaches tailored explicitly for TYPO3 sites. Besides the technology, we look at organizational and project parameters that might affect your frontend technology decision. By considering these factors together, you can make an informed decision that remains relevant, and stable decision over time.

This talk was part of TYPO3 Developer Days 2023.

Transcript

1. SIMON PRAETORIUS Expedition into the Frontend Jungle Frontend Approaches for TYPO3 in 2023
2. 13 years in TYPO3 agencies OpenSource: ✦ Fluid Components ✦ Vite AssetCollector ✦ Fluid Maintainer Team independent since June 2023 hire me for 
 your project! Simon Praetorius
3. every senior developer ever What is the best frontend approach for TYPO3 projects in 2023? It depends. Simon Praetorius Expedition into the Frontend Jungle
4. Simon Praetorius Expedition into the Frontend Jungle Single-Page App UI Kit Modular Frontend 1 2 3
5. Simon Praetorius Expedition into the Frontend Jungle 1 Single-Page App
6. Characteristics ✦ TYPO3 provides raw JSON ✦ reactive frontend framework ✦ client-site routing ✦ client-side HTML generation ✦ bundling for CSS and JS Simon Praetorius Single-Page App – Expedition into the Frontend Jungle
7. SPA Architecture Simon Praetorius Single-Page App – Expedition into the Frontend Jungle DATA MARKUP STYLING INTERACTION modern CSS + post processing PostCSS, LightningCSS reactive framework React, Vue, Svelte optional: server-side rendering (requires node server) NextJS, NuxtJS, Astro, SvelteKit Headless CMS EXT:headless utility-first framework Tailwind REST API ExtBase JSONView, PSR-15 Middleware
8. Single-Page App vs. Multi-Page App Simon Praetorius Single-Page App – Expedition into the Frontend Jungle
9. Single-Page App ✦ data-driven project ✦ client-side complexity ✦ client-side interaction across whole project ✦ know-how of frontend architecture ✦ extra requirements for SSR Simon Praetorius Single-Page App – Expedition into the Frontend Jungle
10. Multi-Page App ✦ content-driven project ✦ mostly server-side complexity ✦ client-side interaction in distinct “interactive islands” ✦ know-how of TYPO3 integration Simon Praetorius Single-Page App – Expedition into the Frontend Jungle
11. UI Kit (e. g. Bootstrap) Simon Praetorius Expedition into the Frontend Jungle 2
12. Characteristics ✦ all-in-one solution ✦ framework standards ✦ framework documentation ✦ fast prototyping ✦ limited customization and extensibility Simon Praetorius UI Kit – Expedition into the Frontend Jungle
13. UI Kit Architecture Simon Praetorius UI Kit – Expedition into the Frontend Jungle DATA JS from UI Kit MARKUP STYLING INTERACTION CSS from UI Kit Fluid templates with CSS classes from UI Kit community extension Bootstrap Package
14. UI Kit vs. Individual CSS Simon Praetorius UI Kit – Expedition into the Frontend Jungle
15. UI Kit ✦ uniform project portfolio ✦ no highly individual design ✦ smaller projects ✦ no dedicated frontend developer ✦ backend-driven projects Simon Praetorius UI Kit – Expedition into the Frontend Jungle
16. Individual CSS ✦ individual projects ✦ individual design ✦ bigger projects ✦ dedicated frontend developer Simon Praetorius UI Kit – Expedition into the Frontend Jungle
17. Simon Praetorius Expedition into the Frontend Jungle 3 Modular Frontend
18. Characteristics ✦ individual solution ✦ customization and optimization ✦ ever-changing environment ✦ tooling required ✦ frontend know-how required Simon Praetorius Modular Frontend – Expedition into the Frontend Jungle
19. Modular Frontend Architecture Simon Praetorius Modular Frontend – Expedition into the Frontend Jungle DATA single-purpose libraries (Slider, Lightbox, …) MARKUP STYLING INTERACTION modern CSS + post processing PostCSS, LightningCSS TYPO3 components Fluid partials, EXT:fluid_components Headless CMS (selective) EXT:headless REST API ExtBase JSONView, PSR-15 Middleware inline JSON f:format.json() and data attributes independent components PatternLab light library for interaction and manipulation Alpine, Stimulus, Topwire light reactive framework Svelte, Lit utility-first framework Tailwind
20. Simple One-Pager Simon Praetorius Modular Frontend – Expedition into the Frontend Jungle DATA single-purpose libraries (Slider, Lightbox, …) MARKUP STYLING INTERACTION modern CSS + post processing PostCSS, LightningCSS TYPO3 components Fluid partials, EXT:fluid_components
21. + Interactive Island Simon Praetorius Modular Frontend – Expedition into the Frontend Jungle DATA single-purpose libraries (Slider, Lightbox, …) MARKUP STYLING INTERACTION modern CSS + post processing PostCSS, LightningCSS TYPO3 components Fluid partials, EXT:fluid_components REST API ExtBase JSONView, PSR-15 Middleware light reactive framework Svelte, Lit
22. Reactive Framework vs. Light Framework Simon Praetorius Modular Frontend – Expedition into the Frontend Jungle
23. Reactive Framework ✦ complex frontend logic ✦ data-driven ✦ multi-step ✦ server APIs ✦ “adding something new” Simon Praetorius Modular Frontend – Expedition into the Frontend Jungle
24. Light Library ✦ progressive enhancement ✦ light DOM manipulation ✦ simple interactions ✦ “improving what’s already there” Simon Praetorius Modular Frontend – Expedition into the Frontend Jungle
25. Independent Components vs. TYPO3 Components Simon Praetorius Modular Frontend – Expedition into the Frontend Jungle
26. Independent Components ✦ cover multiple platforms ✦ without Fluid know-how ✦ complexity in sync process ✦ separated ownership (frontend ↔︎ backend) Simon Praetorius Modular Frontend – Expedition into the Frontend Jungle
27. TYPO3 Components ✦ cover TYPO3 projects ✦ tight project integration with Fluid ✦ component library and project in sync ✦ shared ownership (frontend & backend) Simon Praetorius Modular Frontend – Expedition into the Frontend Jungle
28. every senior developer ever What is the best frontend approach for TYPO3 projects in 2023? It depends. Simon Praetorius Expedition into the Frontend Jungle
29. It depends on … Simon Praetorius Expedition into the Frontend Jungle
30. project ✦ complexity ✦ UI/UX prerequisites ✦ areas of interactivity Decision Factors Simon Praetorius Expedition into the Frontend Jungle people & tools ✦ team roles & skills ✦ project ownership ✦ reliability of tools 
 (cutting-edge vs. battle-tested)
31. law of the instrument If all you have is a hammer, everything looks like a nail. Simon Praetorius Expedition into the Frontend Jungle
32. I did some research Simon Praetorius Expedition into the Frontend Jungle
33. ✦ 93 participants ✦ ⅔ agencies 
 ⅓ freelancers & others ✦ 45% full-stack 
 24% backend 
 16% integrator 
 12% frontend 
 3% non-dev Survey Participants Simon Praetorius Expedition into the Frontend Jungle
34. Simon Praetorius Expedition into the Frontend Jungle UI Kit Modular SPA UI Kit Modular SPA Frontend Approach recently future 26 60 7 15 52 26
35. Simon Praetorius Expedition into the Frontend Jungle CSS Processing SCSS 87 PostCSS 34 12 Tailwind 9 LESS none (regular usage) 5
36. Simon Praetorius Expedition into the Frontend Jungle JavaScript Frameworks jQuery 52 Vue 34 11 React 10 Alpine Lit 6 Stimulus 4 Svelte 3 (regular usage)
37. Simon Praetorius Expedition into the Frontend Jungle JavaScript! JavaScript! TypeScript! 66% 33% Preferred Dialect
38. Simon Praetorius Expedition into the Frontend Jungle Build Tools (regular usage) npm/yarn/pnpm webpack gulp vite grunt rollup esbuild 9 9 20 22 37 48 63
39. Simon Praetorius Expedition into the Frontend Jungle Frontend Components 9 % 11 % 14 % 17 % 49 % Fluid Partials Fluid Components client-side other no components
40. Questions? Simon Praetorius Expedition into the Frontend Jungle
41. Simon Praetorius Web Consultant, Coach & Web Developer www.praetorius.me @s2bproject @s2b@norden.social moin@praetorius.me