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
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.