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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

4. Simon Praetorius
   Expedition into the Frontend Jungle
   Single-Page App
   UI Kit
   Modular Frontend
   1
   2 3
   

   View Slide

5. Simon Praetorius
   Expedition into the Frontend Jungle
   1 Single-Page App
   

   View Slide

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
   

   View Slide

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
   

   View Slide

8. Single-Page App
   
   
   vs.
   
   
   Multi-Page App
   Simon Praetorius
   Single-Page App – Expedition into the Frontend Jungle
   

   View Slide

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
   

   View Slide

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
    

    View Slide

11. UI Kit
    
    
    (e. g. Bootstrap)
    Simon Praetorius
    Expedition into the Frontend Jungle
    2
    

    View Slide

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
    

    View Slide

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
    

    View Slide

14. UI Kit
    
    
    vs.
    
    
    Individual CSS
    Simon Praetorius
    UI Kit – Expedition into the Frontend Jungle
    

    View Slide

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
    

    View Slide

16. Individual CSS
    ✦ individual projects
    
    
    ✦ individual design
    
    
    ✦ bigger projects
    
    
    ✦ dedicated frontend developer
    
    
    Simon Praetorius
    UI Kit – Expedition into the Frontend Jungle
    

    View Slide

17. Simon Praetorius
    Expedition into the Frontend Jungle
    3 Modular Frontend
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

22. Reactive Framework
    
    
    vs.
    
    
    Light Framework
    Simon Praetorius
    Modular Frontend – Expedition into the Frontend Jungle
    

    View Slide

23. Reactive Framework
    ✦ complex frontend logic
    
    
    ✦ data-driven
    
    
    ✦ multi-step
    
    
    ✦ server APIs
    
    
    ✦ “adding something new”
    Simon Praetorius
    Modular Frontend – Expedition into the Frontend Jungle
    

    View Slide

24. Light Library
    ✦ progressive enhancement
    
    
    ✦ light DOM manipulation
    
    
    ✦ simple interactions
    
    
    ✦ “improving what’s already there”
    
    
    Simon Praetorius
    Modular Frontend – Expedition into the Frontend Jungle
    

    View Slide

25. Independent Components
    
    
    vs.
    
    
    TYPO3 Components
    Simon Praetorius
    Modular Frontend – Expedition into the Frontend Jungle
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

29. It depends on …
    Simon Praetorius
    Expedition into the Frontend Jungle
    

    View Slide

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)
    

    View Slide

31. law of the instrument
    If all you have is a hammer,
    
    
    everything looks like a nail.
    Simon Praetorius
    Expedition into the Frontend Jungle
    

    View Slide

32. I did some research
    Simon Praetorius
    Expedition into the Frontend Jungle
    

    View Slide

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
    

    View Slide

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
    

    View Slide

35. Simon Praetorius
    Expedition into the Frontend Jungle
    CSS Processing
    SCSS
    
    
    87
    PostCSS
    
    
    34
    12
    Tailwind
    9
    LESS none
    (regular usage)
    5
    

    View Slide

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)
    

    View Slide

37. Simon Praetorius
    Expedition into the Frontend Jungle
    JavaScript!
    JavaScript!
    TypeScript!
    66% 33%
    Preferred Dialect
    

    View Slide

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
    

    View Slide

39. Simon Praetorius
    Expedition into the Frontend Jungle
    Frontend Components
    9 %
    11 %
    14 %
    17 %
    49 % Fluid Partials
    Fluid Components
    client-side
    other
    no components
    

    View Slide

40. Questions?
    Simon Praetorius
    Expedition into the Frontend Jungle
    

    View Slide

41. Simon Praetorius
    Web Consultant, Coach & Web Developer
    www.praetorius.me @s2bproject
    @s2b@norden.social
    moin@praetorius.me
    

    View Slide