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

D598a1abc4f74b2e50744397bd586658?s=128

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

  2. Real Values. Why Components? State of the Ecosystem Best Practices

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

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

    projects with long-lasting consistent UX
  5. Real Values. Simon Praetorius: [r]evolution of Fluid Components reusing Fluid

    code is cumbersome HOWEVER
  6. Real Values. frontend structure is predetermined by backend HOWEVER Simon

    Praetorius: [r]evolution of Fluid Components
  7. Real Values. frontend monoliths discourage refactoring HOWEVER Simon Praetorius: [r]evolution

    of Fluid Components
  8. Real Values. “Let’s invent our own HTML elements” APPROACH (similar

    to modern frontend frameworks) Simon Praetorius: [r]evolution of Fluid Components
  9. Real Values. let frontend developers be responsible for frontend code

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

    Fluid Components
  11. Real Values. Core Features Data Transformation Developer APIs Simon Praetorius:

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

    call components CORE FEATURES
  13. Real Values. <fc:component> <fc:param name="label" type="string" /> <fc:param name="image" type="Image"

    /> <fc:renderer> <div class="imageCard"> <my:atom.image src="{image}" class="imageCard__image" /> {label} </div> </fc:renderer> </fc:component> Component “ImageCard” Simon Praetorius: [r]evolution of Fluid Components
  14. Real Values. Simon Praetorius: [r]evolution of Fluid Components parameter type

    handling CORE FEATURES
  15. Real Values. <div class="grid"> <f:for each="{data.gallery}" as="item"> <my:molecule.imageCard label="{item.title}" image="{item.image}"

    <!-- FileReference --> /> </f:for> </div> Content Element “ImageGallery” Simon Praetorius: [r]evolution of Fluid Components
  16. Real Values. Simon Praetorius: [r]evolution of Fluid Components Files, Images,

    Links, Navigations, Dates, Translation Labels DATA TRANSFORMATION
  17. Real Values. <div class="technologies"> <my:molecule.imageCard label="Fluid Components" image="123" <!-- File

    UID --> /> <my:molecule.imageCard label="TYPO3" image="EXT:sitepackage/Resources/Public/typo3.svg" /> <my:molecule.imageCard label="PHP" image="https://www.php.net/images/logos/php-logo-white.svg" /> </div> Partial “Technologies.html” Simon Praetorius: [r]evolution of Fluid Components
  18. Real Values. Simon Praetorius: [r]evolution of Fluid Components component settings,

    css prefixes, IDE auto-complete DEVELOPER APIs
  19. Real Values. Living Styleguide Frontend Workshop Quality Assurance Tool Simon

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

    with intro text LIVING STYLEGUIDE
  21. Real Values. Simon Praetorius: [r]evolution of Fluid Components

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

    in different variants and contexts LIVING STYLEGUIDE
  23. Real Values. Simon Praetorius: [r]evolution of Fluid Components

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

    files independent of TYPO3 database FRONTEND WORKSHOP
  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
  26. Real Values. Simon Praetorius: [r]evolution of Fluid Components frontend asset

    configuration and AssetCollector support FRONTEND WORKSHOP
  27. Real Values. Simon Praetorius: [r]evolution of Fluid Components automated and

    individual documentation FRONTEND WORKSHOP
  28. Real Values. Simon Praetorius: [r]evolution of Fluid Components

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

    responsive testing QUALITY ASSURANCE TOOL
  30. Real Values. Simon Praetorius: [r]evolution of Fluid Components

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

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

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

    limit component variants, avoid optional parameters
  34. Real Values. Simon Praetorius: [r]evolution of Fluid Components API DESIGN

    use data structures (e. g. Image) to make components more flexible
  35. Real Values. Simon Praetorius: [r]evolution of Fluid Components TOOL sitegeist/fluid-components-linter

    in CLI & Fluid Styleguide
  36. Real Values. Simon Praetorius: [r]evolution of Fluid Components

  37. Real Values. Simon Praetorius: [r]evolution of Fluid Components STRUCTURE co-locate

    assets (html, css, js, l18n) in component directory
  38. Real Values. Simon Praetorius: [r]evolution of Fluid Components Molecule /

    Slider ❖ Slider.html ❖ Slider.fixture.yaml ❖ Slider.scss ❖ Slider.js ❖ Slider.labels.xlf
  39. Real Values. Simon Praetorius: [r]evolution of Fluid Components TOOL NPM:

    sitegeist/conventional to collect & bundle FE assets
  40. Real Values. Simon Praetorius: [r]evolution of Fluid Components WORKFLOW develop

    & test components in Fluid Styleguide
  41. Real Values. Simon Praetorius: [r]evolution of Fluid Components WORKFLOW use

    Fluid Styleguide for rapid prototyping
  42. Real Values. Simon Praetorius: [r]evolution of Fluid Components DOCUMENTATION document

    design tokens in Fluid Styleguide
  43. Real Values. Simon Praetorius: [r]evolution of Fluid Components

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

  45. Real Values. Simon Praetorius: [r]evolution of Fluid Components audio, video

    and responsive images – component style MEDIA COMPONENTS
  46. Real Values. Simon Praetorius: [r]evolution of Fluid Components assure future

    development with more tests AUTOMATED TESTING
  47. Real Values. Simon Praetorius: [r]evolution of Fluid Components adapt early

    and often to avoid previous mishaps TYPO3 12.x SUPPORT
  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
  49. Real Values. Questions? Simon Praetorius: [r]evolution of Fluid Components

  50. Real Values.