$30 off During Our Annual Pro Sale. View Details »

Fluid Components

Fluid Components

(Presentational) Components in Fluid-Templates

The presented TYPO3 extensions puts frontend developers in a position to create encapsulated components in pure Fluid. By defining a clear interface (API) for the integration, frontend developers can implement components independent of backend developers. The goal is to create presentational components which have no side effects and aren't responsible for data acquisition. The sole concern of a presentational component should be how things look.

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

#t3muh

Simon Praetorius

February 13, 2019
Tweet

More Decks by Simon Praetorius

Other Decks in Technology

Transcript

  1. Real Values.
    Simon Praetorius

    Fluid Components
    (Presentational) Components in Fluid-Templates

    View Slide

  2. Real Values.
    ➊ Was sind Komponenten?
    ➋ Warum Komponenten?
    ➌ Fluid Components + Demo
    ➍ Ideen & Ausblick

    View Slide

  3. Real Values.
    ➊ Was sind Komponenten?
    Presentational
    Component
    ohne Logik
    gekapselt
    klare Schnittstelle

    View Slide

  4. Real Values.
    ➋ Warum Komponenten?
    •Wiederverwendbarkeit
    •Lesbarkeit und Strukturierung (Atomic Design)
    •Refactoring
    •Design-Guidelines sicherstellen
    •bessere Zusammenarbeit FE 㲗 BE

    View Slide

  5. Real Values.
    ➋ Zusammenarbeit
    Layout
    Template
    Partial
    Partial
    Integration
    Renderer
    Komponente
    API
    FRONTEND
    INTEGRATOR

    View Slide

  6. Real Values.
    ➌ Fluid Components
    •Extension: fluid_components

    github.com/sitegeist/fluid-components
    •Komponenten in Fluid-Templates
    •Mischung aus ViewHelper und Partial
    •ViewHelper als Markup
    •Partial mit Namespace und API

    View Slide

  7. Real Values.
    ➌ Fluid Components
    Layout
    Template
    Partial
    Partial
    Integration
    API Renderer
    Komponente
    FRONTEND
    INTEGRATOR

    View Slide

  8. Real Values.
    ➌ Fluid Components
    Integration
    API
    Komponente
    FRONTEND

    View Slide

  9. Real Values.
    ➌ Komponenten-API





    light
    [...]

    View Slide

  10. Real Values.
    ➌ Fluid Components
    Integration
    Renderer
    Komponente
    FRONTEND

    View Slide

  11. Real Values.
    ➌ Komponenten-Renderer


    [...]


    {title}
    {description}






    View Slide

  12. Real Values.
    ➌ Fluid Components
    Template
    Integration Komponente
    INTEGRATOR

    View Slide

  13. Real Values.
    ➌ Komponenten-Integration
    {namespace my=VENDOR\MyExtension\Components}
    title="TYPO3"
    description="The professional, flexible Content Management System"
    link="https://typo3.org"
    icon="typo3"
    />

    View Slide

  14. Real Values.
    Demo

    View Slide

  15. Real Values.
    ➍ Ideen & Ausblick
    •stabiler Prototyp
    •Baustellen:
    •Translations
    •fluid_styled_content
    •Formulare
    •Link-Felder
    •Responsive Images

    View Slide

  16. Real Values.
    ➍ Ideen & Ausblick
    •Frontend-Building für Komponenten
    •Integration in Fluid?
    •Living Styleguide
    •Fixtures (statisch, dynamisch)
    •Metadaten für Komponenten

    View Slide

  17. Real Values.
    Links
    Extension
    github.com/sitegeist/fluid-components
    sitegeist
    @sitegeist_de / techblog.sitegeist.de
    Simon Praetorius
    @s2bproject / @somethingphp

    View Slide

  18. Real Values.
    Vielen Dank!

    View Slide