Fluid Components in Production

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

D598a1abc4f74b2e50744397bd586658?s=128

Simon Praetorius

August 03, 2019
Tweet

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!