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

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