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