The State of Fluid (2025)

Fluid is at the heart of nearly every TYPO3 project, but its development often flies under the radar. This talk from TYPO3 Developer Days 2025 explores the new features that have landed in Fluid and takes a glimpse at what's next for TYPO3's templating language.

https://t3dd.typo3.com/schedule/sessions/the-state-of-fluid-whats-new-and-whats-next-976

#typo3 #t3dd25

Transcript

1. SIMON PRAETORIUS what’s new and what’s next The State of Fluid
2. Fluid Maintainer Team Vite Integration for TYPO3 13 years in TYPO3 agencies independent since 2023 Simon Praetorius
3. Simon Praetorius The State of Fluid practical reusable flexible Fluid
4. Simon Praetorius practical reusable flexible Fluid The State of Fluid
5. Simon Praetorius New ViewHelpers The State of Fluid – Practical Fluid
6. Simon Praetorius The State of Fluid – Practical Fluid New ViewHelpers ✦ <f:constant> ✦ <f:first> and <f:last> ✦ <f:join> and <f:split> ✦ <f:replace> ✦ TYPO3 ViewHelpers moved to Fluid Standalone Fluid 2
7. Simon Praetorius The State of Fluid – Practical Fluid New ViewHelpers ✦ <f:flatten> ✦ <f:shuffle> ✦ more to come … Fluid 4
8. Simon Praetorius Tag-Based ViewHelpers The State of Fluid – Practical Fluid e. g. <f:for m .*>
9. Simon Praetorius The State of Fluid – Practical Fluid Arbitrary Arguments Fluid 2 <f:for m .textfield name="zipcode" additionalAttributes="{ pattern: '^[0-9]{5} $ ' }" />
10. Simon Praetorius The State of Fluid – Practical Fluid Arbitrary Arguments Fluid 2 <f:for m .textfield name="zipcode" pattern="^[0-9]{5} $ " />
11. Simon Praetorius The State of Fluid – Practical Fluid Boolean Arguments Fluid 4 <f:for m .textfield name="zipcode" readonly="{isReadonly}" />
12. Simon Praetorius The State of Fluid – Practical Fluid Boolean Literals Fluid 4 <f:for m .textfield name="zipcode" readonly="{true}" />
13. Simon Praetorius Condition ViewHelpers The State of Fluid – Practical Fluid e. g. <f:if>
14. Simon Praetorius The State of Fluid – Practical Fluid Access Condition Result Fluid 4 <f:variable name="userIsAuthenticated" value="{f:security.ifAuthenticated()}" />
15. Simon Praetorius The State of Fluid – Practical Fluid Access Condition Result Fluid 4 <f:variable name="isValidAddress" value="{f:if(condition: '{street} && {city}')}" />
16. Simon Praetorius The State of Fluid – Practical Fluid Access Condition Result Fluid 4 <f:for m .textfield name="vat" readonly="{f:if(condition: '!{company}')}" />
17. Simon Praetorius ViewHelper API The State of Fluid – Practical Fluid
18. Simon Praetorius The State of Fluid – Practical Fluid renderStatic() ✦ unified ViewHelper API ✦ less boilerplate ✦ Dependency Injection ✦ stops working in ✦ Rector rule available Fluid 2 Fluid 5
19. Simon Praetorius Comments The State of Fluid – Practical Fluid
20. Simon Praetorius The State of Fluid – Practical Fluid Ignore Errors in Comments <f:comment> <f:undefinedViewHelper /> <f:viewHelperLeftOpen> </f:comment> Fluid 4 🥳
21. Simon Praetorius practical reusable flexible Fluid The State of Fluid
22. Simon Praetorius Partials The State of Fluid – Reusable Fluid
23. Simon Praetorius The State of Fluid – Reusable Fluid Define Partial API Fluid 4 <f:argument name="title" type="string" /> <f:argument name="tags" type="string[]" optional="{true}" /> <f:argument name="user" type="string" optional="{true}" default="ad mi n" />
24. Simon Praetorius The State of Fluid – Reusable Fluid ✦ strong defaults: arguments required by default ✦ strict validation: exception for missing arguments & wrong types ✦ progressive enhancement: no exceptions for undefined arguments Define Partial API Fluid 4
25. Simon Praetorius Components The State of Fluid – Reusable Fluid
26. Simon Praetorius “invent your own HTML elements” The State of Fluid – Reusable Fluid
27. Simon Praetorius “define ViewHelpers without writing PHP” The State of Fluid – Reusable Fluid
28. Simon Praetorius The State of Fluid – Reusable Fluid TeaserCard Component icon content title link
29. Simon Praetorius The State of Fluid – Reusable Fluid 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
30. Simon Praetorius The State of Fluid – Reusable Fluid Usage: MyTemplate.html <my:teaserCard title="TYPO3" link="https: // typo3.org" icon="typo3" > the Professional, Flexible Content Management System </my:teaserCard> Fluid 4 slot content
31. Simon Praetorius The State of Fluid – Reusable Fluid ✦ code reuse: no partialRootPaths configuration ✦ visual consistency: define markup once ✦ encapsulation: strict API enables refactoring ✦ separation of integration & frontend Why Components? Fluid 4
32. Simon Praetorius Getting Started The State of Fluid – Reusable Fluid
33. Simon Praetorius The State of Fluid – Reusable Fluid ComponentCollection Fluid 4 <my:teaserCard title="TYPO3" link="https: // typo3.org" icon="typo3" > the Professional, Flexible Content Management System </my:teaserCard>
34. Simon Praetorius The State of Fluid – Reusable Fluid ComponentCollection Fluid 4 <h t ml data-namespace-typo3-fluid="true" x ml ns:my="http: // typo3.org/ns/Vendor/Sitepackage/ Components/ComponentCollection" > <my:teaserCard title="TYPO3" actual class!
35. Simon Praetorius The State of Fluid – Reusable Fluid ComponentCollection Fluid 4 namespace Vendor\Sitepackage\Components; use TYPO3Fluid\Fluid\Core\Component\AbstractComponentCollection; # [Autoconfigure(public: true)] class ComponentCollection extends AbstractComponentCollection { }
36. Simon Praetorius The State of Fluid – Reusable Fluid ComponentCollection Fluid 4 public function ge t T emplatePaths(): TemplatePaths { $t emplatePaths = new TemplatePaths(); $t emplatePaths->se tT emplateRootPaths([ ExtensionManagementUtility::extPath( 'sitepackage', 'Resources/Private/Components', ), ]); return $t emplatePaths; }
37. Simon Praetorius The State of Fluid – Reusable Fluid https://docs.typo3.org/permalink/ fl uid:components
38. Supported by Budget Idea
39. Simon Praetorius Best Practices The State of Fluid – Reusable Fluid
40. Simon Praetorius The State of Fluid – Reusable Fluid ✦ Integration: Templates, Layouts & Partials ✦ Frontend: Components ✦ Public Extensions: (mostly) Templates, Layouts & Partials PSR-14 events in ComponentCollection Templates vs. Components
41. Simon Praetorius The State of Fluid – Reusable Fluid ✦ component API ≠ TYPO3 data structure ✦ prefer “atomic” types: DateT i m eInterface, FileInterface, TypolinkParameter ✦ avoid optional arguments API Design Domain\Model\Product Record
42. Simon Praetorius The State of Fluid – Reusable Fluid ✦ 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
43. Simon Praetorius The State of Fluid – Reusable Fluid 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>
44. Simon Praetorius The State of Fluid – Reusable Fluid 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> </my: t w oColumns>
45. Simon Praetorius The State of Fluid – Reusable Fluid Components / Molecule / Slider / ✦ Slider.html ✦ Slider.css ✦ Slider.js ✦ Slider.labels.xlf Asset Co-Location bundle with frontend toolchain
46. Simon Praetorius practical reusable flexible Fluid The State of Fluid
47. Simon Praetorius TYPO3 ViewFactory The State of Fluid – Flexible Fluid
48. Simon Praetorius The State of Fluid – Flexible Fluid ViewFactory TYPO3 13 ✦ new StandaloneVie w () ✦ new TemplateVie w () ✦ goal: replaceable views via Dependency Injection
49. Simon Praetorius The State of Fluid – Flexible Fluid ViewFactory TYPO3 13 use TYPO3\C M S \Core\View\Vie wF actoryInterface; public function __construct( private readonly Vie wF actoryInterface $v ie w F actory, ) {}
50. Simon Praetorius The State of Fluid – Flexible Fluid ViewFactory TYPO3 13 $v ie wF actoryData = new Vie wF actoryData( templateRootPaths: ['EXT:myExt/Resources/Private/Templates'], partialRootPaths: ['EXT:myExt/Resources/Private/Partials'], layoutRootPaths: ['EXT:myExt/Resources/Private/Layouts'], request: $request, ); $v iew = $t his->vie w F actory->create( $v ie wF actoryData);
51. Simon Praetorius The State of Fluid – Flexible Fluid ViewFactory TYPO3 13 $v iew->assign('myData', 'myData'); $result = $v iew->render('path/to/template');
52. Simon Praetorius The State of Fluid – Flexible Fluid https://docs.typo3.org/permalink/t3coreapi:generic-view-factory
53. Simon Praetorius The State of Fluid – Flexible Fluid Replacing a View TYPO3 13 Vendor\SomeExtension\Service\SomeService: arguments: $v ie wF actory: '@Praetorius\Sitepackage\View\MyVie wF actory'
54. Simon Praetorius ViewHelperResolver Delegates The State of Fluid – Flexible Fluid
55. Simon Praetorius The State of Fluid – Flexible Fluid ✦ API behind components implementation ✦ take control of ViewHelper namespace (instead of just one ViewHelper) ✦ extension opportunities ✦ connect external component libraries (Mustache, Twig, …) ViewHelperResolver Delegates Fluid 4 ✨
56. Simon Praetorius The State of Fluid – Flexible Fluid https://docs.typo3.org/permalink/ fl uid:component-providers
57. Simon Praetorius The State of Fluid What’s Next? Fluid 5 ✦ straightforward cache warmup ✦ deprecation checker ✦ improved ViewHelper argument validation ✦ refactoring & cleanup
58. Simon Praetorius The State of Fluid Worth Checking Out
59. Simon Praetorius The State of Fluid Takeaways ✦ improved ViewHelpers ✦ API for partials ✦ components ✦ create & replace views in TYPO3 ✦ extension opportunities with new Fluid APIs
60. individual workshops for teams introduce components to your team modernize your frontend toolchain Book a Simon
61. Simon Praetorius Questions? The State of Fluid – Flexible Fluid
62. Simon Praetorius TYPO3 TechLead & Developer www.praetorius.me s2b @s2b@norden.social moin@praetorius.me