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

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.



Simon Praetorius

February 13, 2019

More Decks by Simon Praetorius

Other Decks in Technology


  1. Real Values. ➊ Was sind Komponenten? ➋ Warum Komponenten? ➌

    Fluid Components + Demo ➍ Ideen & Ausblick
  2. Real Values. ➋ Warum Komponenten? •Wiederverwendbarkeit •Lesbarkeit und Strukturierung (Atomic

    Design) •Refactoring •Design-Guidelines sicherstellen •bessere Zusammenarbeit FE 㲗 BE
  3. 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
  4. Real Values. ➌ Komponenten-API <fc:component> <fc:param name="title" type="string" /> <fc:param

    name="description" type="string" /> <fc:param name="link" type="string" /> <fc:param name="icon" type="string" optional="1" /> <fc:param name="theme" type="string" optional="1">light</fc:param> [...] </fc:component>
  5. Real Values. ➌ Komponenten-Renderer <fc:component> <fc:param name="title" type="string" /> [...]

    <fc:renderer> <a href="{link}" class="{component.class} {component.class}-{theme}"> <h3 class="{component.prefix}title">{title}</h3> <p class="{component.prefix}description">{description}</p> <f:if condition="{icon}"> <i class="icon icon-{icon} {component.prefix}icon"></i> </f:if> </a> </fc:renderer> </fc:component>
  6. Real Values. ➍ Ideen & Ausblick •stabiler Prototyp •Baustellen: •Translations

    •fluid_styled_content •Formulare •Link-Felder •Responsive Images
  7. Real Values. ➍ Ideen & Ausblick •Frontend-Building für Komponenten •Integration

    in Fluid? •Living Styleguide •Fixtures (statisch, dynamisch) •Metadaten für Komponenten