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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

4. Real Values.
   ➋
   What is a component?*
   Simon Praetorius: Fluid Components in Production
   * What do I mean when I talk about components?
   

   View Slide

5. Real Values.
   Simon Praetorius: Fluid Components in Production > ➋ What is a component?
   ♻
   # $
   ♿
   presentational
   logicless
   encapsulated
   clear API
   enforce guidelines
   
   reusable
   ⌨
   code
   

   View Slide

6. Real Values.
   Simon Praetorius: Fluid Components in Production
   ➌
   How do Fluid Components work?
   

   View Slide

7. Real Values.
   TYPO3 Extension
   github.com/sitegeist/fluid-components
   Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work?
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
    

    View Slide

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
    

    View Slide

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?
    

    View Slide

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
    

    View Slide

14. Real Values.
    Component API Definition
    API
    $ FRONTEND
    ) INTEGRATOR
    Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work?
    Integration Component
    

    View Slide

15. Real Values.
    Component API Definition
    
    
    
    
    
    
    [...]
    
    Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work?
    )+$
    Components/Molecule/Teaser/Teaser.html
    

    View Slide

16. Real Values.
    Component Rendering Definition
    Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work?
    Renderer
    $ FRONTEND
    Integration Component
    

    View Slide

17. Real Values.
    Component Rendering Definition
    
    
    [...]
    
    
    {title}
    {description}
    
    
    
    
    
    
    Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work?
    $
    Components/Molecule/Teaser/Teaser.html
    

    View Slide

18. Real Values.
    Component Integration
    Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work?
    Layout
    Template
    Partials
    API
    ) INTEGRATOR
    Integration Component
    

    View Slide

19. Real Values.
    Component Integration
    {namespace my=Sitegeist\Demo\Components}
    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
    

    View Slide

20. Real Values.
    Simon Praetorius: Fluid Components in Production
    ➍
    What are the challenges?
    

    View Slide

21. Real Values.
    Simon Praetorius: Fluid Components in Production > ➍ What are the challenges?
    ♻
    #
    logicless
    clear API
    $
    ♿
    ⌨
    

    View Slide

22. Real Values.
    Simon Praetorius: Fluid Components in Production > ➍ What are the challenges?
    Convoluted ViewHelper API
    
    
    
    
    
    
    
    ...
    ...
    

    View Slide

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 {}
    

    View Slide

24. Real Values.
    Simon Praetorius: Fluid Components in Production > ➍ What are the challenges?
    Typolink Data Structure
    
    Component Integration
    Component API
    
    

    View Slide

25. Real Values.
    Simon Praetorius: Fluid Components in Production > ➍ What are the challenges?
    Typolink Data Structure
    
    Component Integration
    class Typolink implements ConstructibleFromInteger
    
    Component API
    Data Structure
    

    View Slide

26. Real Values.
    Simon Praetorius: Fluid Components in Production > ➍ What are the challenges?
    Typolink Data Structure
    Component API
    
    
    
    Component Integration
    class Typolink implements ConstructibleFromString
    Data Structure
    
    

    View Slide

27. Real Values.
    Simon Praetorius: Fluid Components in Production > ➍ What are the challenges?
    Typolink Data Structure
    
    Component Integration
    class Typolink implements ConstructibleFromArray
    Component API
    Data Structure
    
    

    View Slide

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?
    

    View Slide

29. Real Values.
    Simon Praetorius: Fluid Components in Production
    ➎
    What’s next?
    

    View Slide

30. Real Values.
    Simon Praetorius: Fluid Components in Production > ➎ What’s next?
    Living Styleguide?
    

    View Slide

31. Real Values.
    Fluid Styleguide!
    Simon Praetorius: Fluid Components in Production > ➎ What’s next?
    

    View Slide

32. Real Values.
    Simon Praetorius: Fluid Components in Production > ➎ What’s next?
    

    View Slide

33. Real Values.
    Simon Praetorius: Fluid Components in Production > ➎ What’s next?
    

    View Slide

34. Real Values.
    Simon Praetorius: Fluid Components in Production > ➎ What’s next?
    

    View Slide

35. Real Values.
    Simon Praetorius: Fluid Components in Production > ➎ What’s next?
    

    View Slide

36. Real Values.
    Simon Praetorius: Fluid Components in Production > ➎ What’s next?
    

    View Slide

37. Real Values.
    coming soon, stay tuned …
    Simon Praetorius: Fluid Components in Production > ➎ What’s next?
    

    View Slide

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
    

    View Slide

39. Real Values.
    Thank you!
    

    View Slide