TYPO3 Template Engine Integration Explained

When it comes to rendering content, TYPO3 is extremely flexible. You have to search a long time for a system that offers something comparable. With TypoScript and Fluid, we have endless possibilities to render the content exactly as we need it.

We take a closer look at what is normally taken for granted. How does TYPO3 render content and what possibilities do we have to customize it? This talk is not about how to write especially nice fluid templates. You will learn how the Fluid-Template Engine is integrated into TYPO3 and how to integrate your own Template Engine into TYPO3. We will integrate Twig because we can.

Transcript

1. TEMPLATE ENGINE INTEGRATION TYPO3 info@typo3.com @typo3 August 1st, 2019 Karlsruhe, Germany
2. BENJAMIN KOTT  Developer Advocate  Consultant  UI/UX Lead @benjaminkott benjamin.kott@typo3.com
3. WARNING: THERE WILL BE CODE! I WILL SPEAK FAST! IT WILL BE RECORDED! QUESTIONS AT THE END!
4. 1. Engine Definition 2. Examples 3. Portability 4. Integration 5. Twig in TYPO3 6. Summary 7. Q&A
5. DEFINITION A template engine is software designed to combine templates with a data model to produce result documents. The language that the templates are written in is known as a template language or templating language. A template engine is ordinarily included as a part of a web template system or application framework and may be used also as a preprocessor or filter. - Wikipedia - https://en.wikipedia.org/wiki/Template_processor
9. Blade Laravel Twig Symfony Fluid TYPO3
10. IMAGINE TYPO3 WOULD USE TWIG…
11. IMAGINE YOU COULD NOW SHARE TEMPLATES BETWEEN YOUR PATTERNLAB, SYMFONY, DRUPAL AND TYPO3!
12. YOUR FAVORITE TEMPLATE ENGINE IS NOT AS PORTABLE AS YOU MAY THINK.
13. FLAVORED ENGINES SYSTEM SPECIFIC FUNCTIONS
14. TWIG Tags apply autoescape block deprecated do embed extends flush for from if import include macro sandbox set use verbatim With Filters abs batch capitalize column convert_encoding date date_modify default escape filter first format inky inline_css join json_encode keys last length lower map markdown merge nl2br number_format raw reduce replace reverse round slice sort spaceless split striptags title trim upper url_encode Functions attribute block constant cycle date dump include max min parent random range source template_from_string Tests constant defined divisibleby empty even iterable null odd sameas
15. TWIG – SYMFONY Tags form_theme stopwatch trans trans_default_domain Transchoice Filters abbr_class abbr_method file_excerpt file_link file_relative format_args format_args_as_text format_file format_file_from_text humanize trans transchoice yaml_dump yaml_encode Functions absolute_url asset asset_version controller csrf_token expression form form_end form_errors form_help form_label form_rest form_row form_start form_widget is_granted logout_path logout_url path relative_path render render_esi url Tests rootform selectedchoice
16. TWIG – DRUPAL Filter t trans placeholder drupal_escape safe_join without clean_class clean_id render format_date Functions render_var url path link file_url attach_library active_theme_path active_theme create_attribute
17. SYMFONY TWIG != DRUPAL TWIG
18. YOU CAN NOT REUSE YOUR TEMPLATES OUTSIDE THE SYSTEM THEY HAVE BEEN BUILT FOR. FLAVOR AND NECESSARY EXTENSIONS ARE DESTROYING PORTABILITY.
19. WHAT WOULD BREAK?  Text formatting  Date strings  Forms  Links  Images  Media … anything that is flavored.
20. TYPO3 RENDERING
25. FLUIDTEMPLATE IS A TYPOSCRIPT EXTENSION
29. JUST RETURN A STRING
30. EXTBASE
31. EXTBASE DEFAULT VIEWS  TYPO3\CMS\Extbase\Mvc\View\EmptyView  TYPO3\CMS\Extbase\Mvc\View\JsonView  TYPO3\CMS\Extbase\Mvc\View\NotFoundView Extbase does not ship a FluidView
34. YOU CANNOT CHANGE THE DEFAULT VIEW FOR EVERYTHING. THAT’S A GOOD THING!
36. YOU CAN CHANGE IT FOR YOUR OWN EXTENSIONS TO ANY VIEW YOU WANT, AS LONG IT IS IMPLEMENTING THE VIEWINTERFACE.
37. EVERYONE ELSE IS ON ITS OWN. JUST RETURN A STRING.
38. LET´S ADD TWIG TO THE STACK.
39. ADDING TWIG 1. Register new cObject 2. Build a new StandaloneView 3. Build a new ExtbaseView 4. Implement Twig 5. Rebuild Page 6. Rebuild Content Elements 7. Rebuild all the Flavor
48. CACHE USING THE TYPO3 CACHING FRAMEWORK
54. LOADER TEMPLATES, PARTIALS, LAYOUTS AND MORE
60. ONLY THE TWIG FILESYSTEM-LOADER HAS SUPPORT FOR NAMESPACES
65. CONNECTING EVERYTHING
68. EXTENSIONS
71. 120 FILES AND 5,600 LINES OF CODE LATER
76. CONCLUSION
77. LEARNINGS  Any Template Engine possible  Multiple Template Engines at once  Easy to implement it yourself
78. QUESTIONS? BENJAMIN KOTT @benjaminkott benjamin.kott@typo3.com
79. THANK YOU