Lock in $30 Savings on PRO—Offer Ends Soon! ⏳

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. Why Components? State of the Ecosystem Best Practices

    What’s next? Simon Praetorius: [r]evolution of Fluid Components
  2. Real Values. “Let’s invent our own HTML elements” APPROACH (similar

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

    APPROACH Simon Praetorius: [r]evolution of Fluid Components
  4. 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
  5. 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
  6. Real Values. Simon Praetorius: [r]evolution of Fluid Components Files, Images,

    Links, Navigations, Dates, Translation Labels DATA TRANSFORMATION
  7. 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
  8. Real Values. Simon Praetorius: [r]evolution of Fluid Components view components

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

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

    configuration and AssetCollector support FRONTEND WORKSHOP
  12. Real Values. Simon Praetorius: [r]evolution of Fluid Components API DESIGN

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

    use data structures (e. g. Image) to make components more flexible
  14. Real Values. Simon Praetorius: [r]evolution of Fluid Components Molecule /

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

    sitegeist/conventional to collect & bundle FE assets
  16. Real Values. Simon Praetorius: [r]evolution of Fluid Components audio, video

    and responsive images – component style MEDIA COMPONENTS
  17. Real Values. Simon Praetorius: [r]evolution of Fluid Components adapt early

    and often to avoid previous mishaps TYPO3 12.x SUPPORT