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

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 / praetorius@sitegeist.de
    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