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
2. Real Values. ➊ Was sind Komponenten? ➋ Warum Komponenten? ➌ Fluid Components + Demo ➍ Ideen & Ausblick
3. Real Values. ➊ Was sind Komponenten? Presentational Component ohne Logik gekapselt klare Schnittstelle
4. Real Values. ➋ Warum Komponenten? •Wiederverwendbarkeit •Lesbarkeit und Strukturierung (Atomic Design) •Refactoring •Design-Guidelines sicherstellen •bessere Zusammenarbeit FE 㲗 BE
5. Real Values. ➋ Zusammenarbeit Layout Template Partial Partial Integration Renderer Komponente API FRONTEND INTEGRATOR
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
7. Real Values. ➌ Fluid Components Layout Template Partial Partial Integration API Renderer Komponente FRONTEND INTEGRATOR
8. Real Values. ➌ Fluid Components Integration API Komponente FRONTEND
9. 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>
10. Real Values. ➌ Fluid Components Integration Renderer Komponente FRONTEND
11. 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>
12. Real Values. ➌ Fluid Components Template Integration Komponente INTEGRATOR
13. Real Values. ➌ Komponenten-Integration {namespace my=VENDOR\MyExtension\Components} <my:teaser title="TYPO3" description="The professional, flexible Content Management System" link="https://typo3.org" icon="typo3" />
14. Real Values. Demo
15. Real Values. ➍ Ideen & Ausblick •stabiler Prototyp •Baustellen: •Translations •fluid_styled_content •Formulare •Link-Felder •Responsive Images
16. Real Values. ➍ Ideen & Ausblick •Frontend-Building für Komponenten •Integration in Fluid? •Living Styleguide •Fixtures (statisch, dynamisch) •Metadaten für Komponenten
17. Real Values. Links Extension github.com/sitegeist/fluid-components sitegeist @sitegeist_de / techblog.sitegeist.de Simon Praetorius @s2bproject / @somethingphp
18. Real Values. Vielen Dank!