Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Simon Praetorius

August 03, 2019
Tweet

More Decks by Simon Praetorius

Other Decks in Technology

Transcript

  1. Real Values.
    Simon Praetorius

    Fluid Components in Production

    View full-size 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 full-size 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 full-size slide

  4. Real Values.

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

    View full-size slide

  5. Real Values.
    Simon Praetorius: Fluid Components in Production > ➋ What is a component?

    # $

    presentational
    logicless
    encapsulated
    clear API
    enforce guidelines

    reusable

    code

    View full-size slide

  6. Real Values.
    Simon Praetorius: Fluid Components in Production

    How do Fluid Components work?

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

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

    View full-size slide

  15. Real Values.
    Component API Definition






    [...]

    Simon Praetorius: Fluid Components in Production > ➌ How do Fluid Components work?
    )+$
    Components/Molecule/Teaser/Teaser.html

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  20. Real Values.
    Simon Praetorius: Fluid Components in Production

    What are the challenges?

    View full-size slide

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

    #
    logicless
    clear API
    $


    View full-size slide

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







    ...
    ...

    View full-size 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 full-size slide

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

    Component Integration
    Component API

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size slide

  29. Real Values.
    Simon Praetorius: Fluid Components in Production

    What’s next?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Real Values.
    Links
    Extension
    github.com/sitegeist/fluid-components
    sitegeist
    @sitegeist_de / techblog.sitegeist.de / sitegeist.de
    Simon Praetorius
    @s2bproject / @somethingphp / [email protected]
    Simon Praetorius: Fluid Components in Production

    View full-size slide

  39. Real Values.
    Thank you!

    View full-size slide