Fluid Components in Production

About a year ago, sitegeist released a community extension that makes it possible to create encapsulated components with Fluid. Since then, thinking in components became an integral part of how the TYPO3 teams at sitegeist build websites. In this talk, I want to present examples from real projects that use components, some of our learnings, and the technical challenges that remain to be solved.

https://github.com/sitegeist/fluid-components

Watch this talk at TYPO3 Developer Days 2019:

https://www.youtube.com/watch?v=TmSsCXDdz5Y

#t3dd19 #t3chh

Transcript

1. Real Values. Simon Praetorius
 Fluid Components in Production
2. Real Values. ➊ About me ➋ What is a component? ➌ How do Fluid Components work? ➍ What are the challenges? ➎ What’s next? Simon Praetorius: Fluid Components in Production
3. Real Values. Simon Praetorius: Fluid Components in Production > ➊ About me Simon Praetorius 2004
 first steps in HTML
 since 2009
 working with TYPO3
 since 2017
 Senior TYPO3 Developer @ sitegeist (Hamburg)
 Technical Lead
 Software Architecture
 TYPO3 Development and Integration
 TYPO3 Coaching
 Open Source
4. Real Values. ➋ What is a component?* Simon Praetorius: Fluid Components in Production * What do I mean when I talk about components?
5. Real Values. Simon Praetorius: Fluid Components in Production > ➋ What is a component? ♻ # $ ♿ presentational logicless encapsulated clear API enforce guidelines reusable ⌨ code
6. Real Values. Simon Praetorius: Fluid Components in Production ➌ How do Fluid Components work?
7. Real Values. TYPO3 Extension github.com/sitegeist/fluid-components Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work?
8. Real Values. Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work? “Why do we need another extension?” Partials ViewHelpers Fluid Components language API definition reusability
9. Real Values. Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work? “Why do we need another extension?” Partials ViewHelpers Fluid Components language ✔ written in Fluid API definition ✖ reusability ✖ partialRootPaths
10. Real Values. Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work? “Why do we need another extension?” Partials ViewHelpers Fluid Components language ✔ written in Fluid ✖ written in PHP API definition ✖ ✔ reusability ✖ partialRootPaths ✔ namespaces
11. Real Values. Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work? “Why do we need another extension?” Partials ViewHelpers Fluid Components language ✔ written in Fluid ✖ written in PHP ✔ written in Fluid API definition ✖ ✔ ✔ reusability ✖ partialRootPaths ✔ namespaces ✔ namespaces
12. Real Values. Development Workflow Layout Template Partials Integration Renderer Component API $ FRONTEND ) INTEGRATOR Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work?
13. Real Values. Example: Teaser Molecule* Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work? * Atomic Design by Brad Frost: http://bradfrost.com/blog/post/atomic-web-design/ ICON TITLE DESCRIPTION LINK THEME
14. Real Values. Component API Definition API $ FRONTEND ) INTEGRATOR Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work? Integration Component
15. Real Values. Component API Definition <fc:component> <fc:param name="title" type="string" /> <fc:param name="description" type="string" /> <fc:param name="link" type="SMS\FluidComponents\Domain\Model\Typolink" /> <fc:param name="icon" type="string" optional="1" /> <fc:param name="theme" type="string" optional="1" default="light" /> [...] </fc:component> Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work? )+$ Components/Molecule/Teaser/Teaser.html
16. Real Values. Component Rendering Definition Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work? Renderer $ FRONTEND Integration Component
17. Real Values. Component Rendering Definition <fc:component> <fc:param name="title" type="string" /> [...] <fc:renderer> <a href="{link}" class="teaser teaser--{theme}"> <h3 class="teaser__title">{title}</h3> <p class="teaser__description">{description}</p> <f:if condition="{icon}"> <my:atom.icon icon="{icon}" class="teaser__icon" /> </f:if> </a> </fc:renderer> </fc:component> Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work? $ Components/Molecule/Teaser/Teaser.html
18. Real Values. Component Integration Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work? Layout Template Partials API ) INTEGRATOR Integration Component
19. Real Values. Component Integration {namespace my=Sitegeist\Demo\Components} <my:molecule.teaser title="TYPO3" description="The professional, flexible Content Management System" link="https://typo3.org" icon="typo3" /> Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work? ) Templates/Teaser.html
20. Real Values. Simon Praetorius: Fluid Components in Production ➍ What are the challenges?
21. Real Values. Simon Praetorius: Fluid Components in Production > ➍ What are the challenges? ♻ # logicless clear API $ ♿ ⌨
22. Real Values. Simon Praetorius: Fluid Components in Production > ➍ What are the challenges? Convoluted ViewHelper API <f:image src="EXT:Resources/Public/Images/logo.png" /> <f:image src="2:/myFolder/myImage.jpg" /> <f:image src="23" /> <f:image src="42" treatIdAsReference="1" /> <f:image image="{myFileObject}" /> <f:image image="{myFileReferenceObject}" /> <f:image image="{myExtbaseFileReferenceObject}" /> <f:link.page pageUid="1337">... <f:link.typolink parameter='t3://page?uid=23 _blank - "T3DD19 Location"'>...
23. Real Values. Simon Praetorius: Fluid Components in Production > ➍ What are the challenges? Missing Data Structures class Typolink extends Link { protected $uri; protected $title; protected $target; protected $class; } Classes/Domain/Model/Typolink.php Classes/Domain/Model/Image.php abstract class Image { protected $publicUrl; protected $alternative; protected $title; } class FalImage extends Image {} class LocalImage extends Image {} class RemoteImage extends Image {} class PlaceholderImage extends Image {}
24. Real Values. Simon Praetorius: Fluid Components in Production > ➍ What are the challenges? Typolink Data Structure <my:molecule.teaser link="{myTypolinkObject}" ...> Component Integration Component API <fc:param name="link" type="SMS\FluidComponents\Domain\Model\Typolink" />
25. Real Values. Simon Praetorius: Fluid Components in Production > ➍ What are the challenges? Typolink Data Structure <my:molecule.teaser link="1337" ...> Component Integration class Typolink implements ConstructibleFromInteger <fc:param name="link" type="SMS\FluidComponents\Domain\Model\Typolink" /> Component API Data Structure
26. Real Values. Simon Praetorius: Fluid Components in Production > ➍ What are the challenges? Typolink Data Structure Component API <my:molecule.teaser link='t3://page?uid=23 _blank - "T3DD19 Location"' ...> <my:molecule.teaser link="{f:uri.page(pageUid: 1337)}" ...> <my:molecule.teaser link="mailto:praetorius@sitegeist.de" ...> Component Integration class Typolink implements ConstructibleFromString Data Structure <fc:param name="link" type="SMS\FluidComponents\Domain\Model\Typolink" />
27. Real Values. Simon Praetorius: Fluid Components in Production > ➍ What are the challenges? Typolink Data Structure <my:molecule.teaser link="{ uri: 'https://www.typo3.org', target: '_blank' }" ...> Component Integration class Typolink implements ConstructibleFromArray Component API Data Structure <fc:param name="link" type="SMS\FluidComponents\Domain\Model\Typolink" />
28. Real Values. Ideal Development Workflow Integration Component Presentation API Data Acquisition Data Transformation Component Assembling $ FRONTEND ) INTEGRATOR Simon Praetorius: Fluid Components in Production > ➍ What are the challenges?
29. Real Values. Simon Praetorius: Fluid Components in Production ➎ What’s next?
30. Real Values. Simon Praetorius: Fluid Components in Production > ➎ What’s next? Living Styleguide?
31. Real Values. Fluid Styleguide! Simon Praetorius: Fluid Components in Production > ➎ What’s next?
32. Real Values. Simon Praetorius: Fluid Components in Production > ➎ What’s next?
33. Real Values. Simon Praetorius: Fluid Components in Production > ➎ What’s next?
34. Real Values. Simon Praetorius: Fluid Components in Production > ➎ What’s next?
35. Real Values. Simon Praetorius: Fluid Components in Production > ➎ What’s next?
36. Real Values. Simon Praetorius: Fluid Components in Production > ➎ What’s next?
37. Real Values. coming soon, stay tuned … Simon Praetorius: Fluid Components in Production > ➎ What’s next?
38. Real Values. Links Extension github.com/sitegeist/fluid-components sitegeist @sitegeist_de / techblog.sitegeist.de / sitegeist.de Simon Praetorius @s2bproject / @somethingphp / praetorius@sitegeist.de Simon Praetorius: Fluid Components in Production
39. Real Values. Thank you!