$30 off During Our Annual Pro Sale. View Details »

Expedition into the Frontend Jungle

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.

Simon Praetorius

August 05, 2023
Tweet

More Decks by Simon Praetorius

Other Decks in Technology

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
    @[email protected]
    [email protected]

    View Slide