Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The [r]evolution of Fluid Components

The [r]evolution of Fluid Components

At DevDays 2019, I introduced our approach of highly reusable frontend components to the TYPO3 community. Much has happened since, but Fluid Components remain a major breakthrough in how sitegeist approaches TYPO3 projects. Every new project we started since 2019 uses Fluid Components and our Living Styleguide solution, and we haven't looked back since.

In this talk, I want to show you what we have learned from both small and big client projects, from community feedback, and from our valued Neos coworkers at sitegeist who chose a similar path a few years before us.

I will talk about advances in the core of Fluid Components, in Fluid Styleguide, and mention a few handy developer tools that evolved in our little component ecosystem.

https://fluidcomponents.sitegeist.de/

#typo3 #t3dd22

Simon Praetorius

August 05, 2022
Tweet

More Decks by Simon Praetorius

Other Decks in Technology

Transcript

  1. Real Values.
    THE [R]EVOLUTION OF


    FLUID COMPONENTS


    Simon Praetorius

    View Slide

  2. Real Values.
    Why Components?


    State of the Ecosystem


    Best Practices


    What’s next?
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  3. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    Why Components?

    View Slide

  4. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    GOAL
    TYPO3 projects with


    long-lasting consistent UX

    View Slide

  5. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    reusing Fluid code


    is cumbersome
    HOWEVER

    View Slide

  6. Real Values.
    frontend structure is


    predetermined by backend
    HOWEVER
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  7. Real Values.
    frontend monoliths


    discourage refactoring
    HOWEVER
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  8. Real Values.
    “Let’s invent our own


    HTML elements”
    APPROACH
    (similar to modern frontend frameworks)
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  9. Real Values.
    let frontend developers


    be responsible for frontend code
    APPROACH
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  10. Real Values.
    State of the Ecosystem
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  11. Real Values.
    Core Features
    Data Transformation
    Developer APIs
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  12. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    define & call components


    CORE FEATURES

    View Slide

  13. Real Values.


















    {label}









    Component “ImageCard”
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  14. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    parameter type handling


    CORE FEATURES

    View Slide

  15. Real Values.








    label="{item.title}"


    image="{item.image}"


    />






    Content Element “ImageGallery”
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  16. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    Files, Images, Links, Navigations,


    Dates, Translation Labels
    DATA TRANSFORMATION

    View Slide

  17. Real Values.





    label="Fluid Components"


    image="123"


    />




    label="TYPO3"


    image="EXT:sitepackage/Resources/Public/typo3.svg"


    />




    label="PHP"


    image="https://www.php.net/images/logos/php-logo-white.svg"


    />



    Partial “Technologies.html”
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  18. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    component settings, css prefixes,


    IDE auto-complete
    DEVELOPER APIs

    View Slide

  19. Real Values.
    Living Styleguide
    Frontend Workshop
    Quality Assurance Tool
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  20. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    component listing


    with intro text
    LIVING STYLEGUIDE

    View Slide

  21. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  22. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    view components in


    different variants and contexts
    LIVING STYLEGUIDE

    View Slide

  23. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  24. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    component fixture files


    independent of TYPO3 database
    FRONTEND WORKSHOP

    View Slide

  25. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    default:


    label: 'Talk at T3DD22'


    image:


    height: 200


    width: 300


    longLabel:


    label: 'Talk at TYPO3 Developer Days 2022'


    image:


    height: 200


    width: 300
    ImageCard.fixture.yaml

    View Slide

  26. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    frontend asset configuration and
    AssetCollector support
    FRONTEND WORKSHOP

    View Slide

  27. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    automated and individual


    documentation
    FRONTEND WORKSHOP

    View Slide

  28. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  29. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    localization and


    responsive testing
    QUALITY ASSURANCE TOOL

    View Slide

  30. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  31. Real Values.
    Best Practices
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  32. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    API DESIGN
    precise parameter naming,


    no abbreviations

    View Slide

  33. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    API DESIGN
    limit component variants,


    avoid optional parameters

    View Slide

  34. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    API DESIGN
    use data structures (e. g. Image)


    to make components more flexible

    View Slide

  35. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    TOOL
    sitegeist/fluid-components-linter


    in CLI & Fluid Styleguide

    View Slide

  36. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  37. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    STRUCTURE
    co-locate assets (html, css, js, l18n)


    in component directory

    View Slide

  38. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    Molecule / Slider


    ❖ Slider.html


    ❖ Slider.fixture.yaml


    ❖ Slider.scss


    ❖ Slider.js


    ❖ Slider.labels.xlf

    View Slide

  39. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    TOOL
    NPM: sitegeist/conventional


    to collect & bundle FE assets

    View Slide

  40. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    WORKFLOW
    develop & test components


    in Fluid Styleguide

    View Slide

  41. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    WORKFLOW
    use Fluid Styleguide for


    rapid prototyping

    View Slide

  42. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    DOCUMENTATION
    document design tokens


    in Fluid Styleguide

    View Slide

  43. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  44. Real Values.
    What’s next?
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  45. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    audio, video and responsive images –
    component style
    MEDIA COMPONENTS

    View Slide

  46. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    assure future development


    with more tests
    AUTOMATED TESTING

    View Slide

  47. Real Values.
    Simon Praetorius: [r]evolution of Fluid Components
    adapt early and often to avoid


    previous mishaps
    TYPO3 12.x SUPPORT

    View Slide

  48. Real Values.
    Links
    Introduction Website


    fluidcomponents.sitegeist.de


    Slack Channel


    #ext-fluid_components


    Simon Praetorius


    @simon.praetorius / [email protected]
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  49. Real Values.
    Questions?
    Simon Praetorius: [r]evolution of Fluid Components

    View Slide

  50. Real Values.

    View Slide