Fluid Templating in TYPO3 14

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

(slides updated to reflect recent changes in TYPO3 Core)
#typo3

Transcript

1. SIMON PRAETORIUS Fluid Templating in TYPO3 14
2. Simon Praetorius 13 years in TYPO3 agencies independent since 2023 backend frontend Fluid Maintainer Team Vite for TYPO3
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> ✦ <f:resource> ✦ <f:render.record> ✦ <f:render.contentArea> ✦ <f:render.text> 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 Fluid-related CLI commands Feature: #108846 - Console command to inspect global ViewHelper namespaces https://docs.typo3.org/permalink/ changelog:feature-108846-1770196894 Feature: #108763 - Console command to analyse Fluid templates https://docs.typo3.org/permalink/ changelog:feature-108763-1769331943 Fluid Templating in TYPO3 14 TYPO3 14
18. Simon Praetorius Improved Exception Messages [FEATURE] Improved exceptions in Fluid templates https://review.typo3.org/c/Packages/TYPO3.CMS/+/93091 [TASK] Improve exception messages for missing Fluid templates https://review.typo3.org/c/Packages/TYPO3.CMS/+/93044 Fluid Templating in TYPO3 14 TYPO3 14
19. Simon Praetorius Components Fluid Templating in TYPO3 14
20. Simon Praetorius “invent your own HTML elements” Fluid Templating in TYPO3 14
21. Simon Praetorius “define ViewHelpers without writing PHP” Fluid Templating in TYPO3 14
22. Simon Praetorius TeaserCard Component icon content title link Fluid Templating in TYPO3 14
23. 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
24. 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
25. 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
26. Simon Praetorius Getting Started Fluid Templating in TYPO3 14
27. 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
28. Simon Praetorius Feature: #108508 - Fluid components integration https://docs.typo3.org/permalink/ changelog:feature-108508-1765987901 Feature: #108508 - PSR-14 events for Fluid components https://docs.typo3.org/permalink/ changelog:feature-108508-1765987847 ComponentCollection TYPO3 14 Fluid Templating in TYPO3 14
29. Simon Praetorius IDE Autocomplete for Components 92893: [FEATURE] Components autocomplete via XSD schema https://review.typo3.org/c/Packages/TYPO3.CMS/+/92893 Fluid Templating in TYPO3 14 TYPO3 14
30. 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
31. 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
32. 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
33. Simon Praetorius Integration Fluid Templating in TYPO3 14
34. Simon Praetorius Render.ContentArea ViewHelper Feature: #108726 - Introduce Fluid f:render.contentArea ViewHelper https://docs.typo3.org/permalink/ changelog:feature-108726-1769071158 Fluid Templating in TYPO3 14 TYPO3 14
35. Simon Praetorius Render.Record ViewHelper Feature: #108726 - Introduce Fluid f:render.record ViewHelper https://docs.typo3.org/permalink/ changelog:feature-108726-1769503907 Feature: #108726 - Add PSR-14 Events ModifyRenderedContentAreaEvent and ModifyRenderedRecordEvent https://docs.typo3.org/permalink/ changelog:feature-108726-1769073579 Fluid Templating in TYPO3 14 TYPO3 14
36. Simon Praetorius Render.Text ViewHelper Feature: #108868 - Introduce Fluid f:render.text ViewHelper https://docs.typo3.org/permalink/ changelog:feature-108868-1770281522 Fluid Templating in TYPO3 14 TYPO3 14
37. individual workshops for teams introduce components to your team modernize your frontend toolchain Book a Simon
38. Simon Praetorius Questions? Fluid Templating in TYPO3 14
39. Simon Praetorius TYPO3 TechLead & Developer www.praetorius.me s2b @s2b@norden.social moin@praetorius.me