Fluid Templating in TYPO3 14

This talk for Munich TYPO3 User Group demonstrates recent changes in Fluid, the templating engine used in TYPO3.

#typo3

Transcript

1. SIMON PRAETORIUS Fluid Templating in TYPO3 14
2. Fluid Maintainer Team Vite Integration for TYPO3 13 years in TYPO3 agencies independent since 2023 Simon Praetorius
3. Simon Praetorius Reminder: Fluid 4 Fluid Templating in TYPO3 14
4. Simon Praetorius Changes in Fluid 4 & TYPO3 13 Speaker Deck: The State of Fluid (2025) https://speakerdeck.com/s2b/the-state-of- fl uid-2025 Fluid Templating in TYPO3 14
5. Simon Praetorius New ViewHelpers Fluid Templating in TYPO3 14
6. Simon Praetorius New ViewHelpers ✦ <f:constant> ✦ <f:first> and <f:last> ✦ <f:join> and <f:split> ✦ <f:replace> Fluid 2 Fluid Templating in TYPO3 14
7. Simon Praetorius New ViewHelpers ✦ <f:flatten> ✦ <f:shuffle> ✦ <f:range> ✦ <f:length> ✦ <f: m erge> ✦ <f:starts Wi th> and <f:ends Wi th> ✦ <f:round>, <f:ceil> and <f:floor> ✦ <f: mi n> and <f: m ax> ✦ <f:contains> ✦ <f:argument> ✦ <f:slot> and <f:fragment> Fluid 4 Fluid Templating in TYPO3 14
8. Simon Praetorius New ViewHelpers ✦ <f:page. m eta> ✦ <f:page.title> ✦ <f:page.headerData> ✦ <f:page.footerData> TYPO3 14 Fluid Templating in TYPO3 14
9. Simon Praetorius Fluid 5 Fluid Templating in TYPO3 14
10. Simon Praetorius Strict Argument Processing for ViewHelpers Breaking: #108148 - Strict Types in Fluid ViewHelpers https://docs.typo3.org/permalink/ changelog:breaking-108148-1763288349 Fluid Templating in TYPO3 14 Fluid 5
11. Simon Praetorius Variable Names can’t start with _ Breaking: #108148 - Disallow Fluid variable names with underscore pre fi x https://docs.typo3.org/permalink/ changelog:breaking-108148-1763288414 Fluid Templating in TYPO3 14 Fluid 5
12. Simon Praetorius Union Types for ViewHelpers and Components Feature: #108148 - Union types for ViewHelpers https://docs.typo3.org/permalink/ changelog:feature-108148-1763297213 Fluid Templating in TYPO3 14 Fluid 5
13. Simon Praetorius Alternative Syntax within CDATA Feature: #108148 - Alternative Fluid syntax for CDATA sections https://docs.typo3.org/permalink/ changelog:feature-108148-1763288461 Fluid Templating in TYPO3 14 Fluid 5
14. Simon Praetorius *.fluid File Extension Feature: #108166 - Fluid fi le extension and template resolving https://docs.typo3.org/permalink/ changelog:feature-108166-1763400992 Fluid Templating in TYPO3 14 Fluid 5
15. Simon Praetorius Template Cache Warmup Feature: #108229 - Fluid cache warmup https://docs.typo3.org/permalink/ changelog:feature-108229-1763675198 Fluid Templating in TYPO3 14 Fluid 5
16. Simon Praetorius Configuration File for Global Namespaces Feature: #108524 - Con fi guration fi le to register global Fluid namespaces https://docs.typo3.org/permalink/ changelog:feature-108524-1766073747 Fluid Templating in TYPO3 14 TYPO3 14
17. Simon Praetorius Components Fluid Templating in TYPO3 14
18. Simon Praetorius “invent your own HTML elements” Fluid Templating in TYPO3 14
19. Simon Praetorius “define ViewHelpers without writing PHP” Fluid Templating in TYPO3 14
20. Simon Praetorius TeaserCard Component icon content title link Fluid Templating in TYPO3 14
21. Simon Praetorius Definition: TeaserCard.html <f:argument name="title" type="string" /> <f:argument name="link" type="string" /> <f:argument name="icon" type="string" optional="{true}" /> <div class="teaserCard"> . <f:slot /> Fluid 4 API implementation Fluid Templating in TYPO3 14
22. Simon Praetorius Usage: MyTemplate.html <my:teaserCard title="TYPO3" link="https: // typo3.org" icon="typo3" > the Professional, Flexible Content M anagement Syste m </ m y:teaserCard> Fluid 4 slot content Fluid Templating in TYPO3 14
23. Simon Praetorius ✦ code reuse: no partialRootPaths configuration ✦ visual consistency: define markup once ✦ encapsulation: strict API enables refactoring ✦ separation of integration & frontend Why Components? Fluid 4 Fluid Templating in TYPO3 14
24. Simon Praetorius Getting Started Fluid Templating in TYPO3 14
25. Simon Praetorius <my:teaserCard title="TYPO3" link="https: // typo3.org" icon="typo3" > the Professional, Flexible Content M anagement Syste m ComponentCollection Fluid Templating in TYPO3 14
26. Simon Praetorius Feature: #108508 - Fluid components integration (in review, not merged!) https://review.typo3.org/c/Packages/TYPO3.CMS/+/92123 https://forge.typo3.org/issues/108508 ComponentCollection TYPO3 14 Fluid Templating in TYPO3 14
27. Simon Praetorius TYPO3 14 ComponentCollection EXT:sitepackage/Configuration/Fluid/ComponentCollections.php return [ 'Vendor\\Sitepackage\\Components' => [ 'templatePaths' => [ 10 => 'EX T :sitepackage/Resources/Private/Components', ], ], ]; Fluid Templating in TYPO3 14
28. Simon Praetorius <h t ml data-namespace-typo3-fluid="true" x ml ns: m y="http: // typo3.org/ns/Vendor/Sitepackage/ Components" > <my:teaserCard title="TYPO3" TYPO3 14 ComponentCollection Fluid Templating in TYPO3 14
29. Simon Praetorius ComponentCollection in TYPO3 13 The State of Fluid (2025) https://speakerdeck.com/s2b/the-state-of- fl uid-2025?slide=32 Fluid Standalone Documentation https://docs.typo3.org/permalink/ fl uid:components TYPO3 13 Fluid Templating in TYPO3 14
30. Simon Praetorius Best Practices Fluid Templating in TYPO3 14
31. Simon Praetorius ✦ component API ≠ TYPO3 data structure ✦ prefer “atomic” types: DateT i m eInterface, FileInterface, TypolinkParameter ✦ avoid optional arguments API Design Domain\ M odel\Product Record Fluid Templating in TYPO3 14
32. Simon Praetorius ✦ no <f:format.raw> inside components ✦ use <f:format.h t ml > / <f:transfor m .h tml > outside components ✦ multiple slots possible: named slots Slots Fluid Templating in TYPO3 14
33. Simon Praetorius Named Slots Fluid 4 <div class=" tw oColumns"> <div class="col"> <f:slot name="column1" /> </div> <div class="col"> <f:slot name="column2" /> </div> </div> Fluid Templating in TYPO3 14
34. Simon Praetorius Named Slots Fluid 4 <my: tw oColumns> <f:fragment name="column1"> <b>content 1</b> </f:fragment> <f:fragment name="column2"> <i>content 2</i> </f:fragment> </ m y: t w oColumns> Fluid Templating in TYPO3 14
35. Simon Praetorius Components / Molecule / Slider / ✦ Slider.html ✦ Slider.css ✦ Slider.js ✦ Slider.labels.xlf Asset Co-Location bundle with frontend toolchain Fluid Templating in TYPO3 14
36. individual workshops for teams introduce components to your team modernize your frontend toolchain Book a Simon
37. Simon Praetorius Questions? Fluid Templating in TYPO3 14
38. Simon Praetorius TYPO3 TechLead & Developer www.praetorius.me s2b @s2b@norden.social moin@praetorius.me