Fluid - The Zen of Templating

7,543 views
7,427 views

Published on

Fluid is the next-generation templating framework for FLOW3 and TYPO3 v4. It will enter the core of TYPO3 with version 4.3, and at the same time be available in FLOW3.
The recorded presentation can be found at http://t3dd09.typo3.org/recordings.html

Published in: Technology, Spiritual
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
7,543
On SlideShare
0
From Embeds
0
Number of Embeds
542
Actions
Shares
0
Downloads
182
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Fluid - The Zen of Templating

  1. 1. T3C0N09 Dallas Inspiring people to share Fluid - The Zen of Templating
  2. 2. Fluid - The Zen of Templating 16.04.2009 Sebastian Kurfürst <sebastian@typo3.org>
  3. 3. - WARNING - TYPO3 addict Inspiring people to Fluid - The Zen of Templating share
  4. 4. Target audience TYPO3 v4 Developers TYPO3 v5 Developers Inspiring people to Fluid - The Zen of Templating share
  5. 5. TYPO3 v4 and v5 v4 v5 Inspiring people to Fluid - The Zen of Templating share
  6. 6. Abstract Current Template Engines How should templating be? Basic ingredients Fluid in FLOW3 and TYPO3 v4 Fluid A practical example Writing a custom ViewHelper Next steps Inspiring people to Fluid - The Zen of Templating share
  7. 7. Abstract Current Template Engines How should templating be? Basic ingredients Fluid in FLOW3 and TYPO3 v4 Fluid A practical example Writing a custom ViewHelper Next steps Inspiring people to Fluid - The Zen of Templating share
  8. 8. Current template engines What should a template engine do? renders data “lives” in the view Inspiring people to Fluid - The Zen of Templating share
  9. 9. Designers don‘t write PHP, they write HTML
  10. 10. Source: http://en.wikipedia.org/wiki/Template_engine_(web) Inspiring people to Fluid - The Zen of Templating share
  11. 11. Current template engines Classic TYPO3 Smarty PHPTAL Templating Inspiring people to Fluid - The Zen of Templating share
  12. 12. Current Template Engines Classic TYPO3 Templating marker / subpart based no control flow not extensible working with arrays / objects not possible Inspiring people to Fluid - The Zen of Templating share
  13. 13. Current Template Engines Classic TYPO3 Templating ###CONTENTS### <h2>###TITLE###</h2> Text ###CONTENTS### Inspiring people to Fluid - The Zen of Templating share
  14. 14. Current Template Engines Classic TYPO3 Templating Implementing a loop Text Inspiring people to Fluid - The Zen of Templating share
  15. 15. Current Template Engines Classic TYPO3 Templating ###CONTENTS### $subEl = getSubpart(“SUBELEMENT“); <ul> $out = ‘‘; Text ###SUBELEMENT### foreach ($recordList as $record) { <li>###TITLE###</li> $out .= substituteMarker($subEl, ‘TITLE‘, $record[‘title‘]); ###SUBELEMENT### } </ul> return substituteSubpart($template, ‘SUBELEMENT‘, $out); ###CONTENTS### Inspiring people to Fluid - The Zen of Templating share
  16. 16. Current Template Engines Smarty <ul> {foreach from=$myArray item=foo} <li>{$foo}</li> {/foreach} </ul> Inspiring people to Fluid - The Zen of Templating share
  17. 17. Current Template Engines Smarty PHP4 based custom {...} syntax - no autocompletion functions belong to language -> not namespaced built-in functions custom functions can collide with each other Inspiring people to Fluid - The Zen of Templating share
  18. 18. Current Template Engines PHPTAL <div class=quot;itemquot; tal:repeat=quot;item itemsArrayquot;> <span tal:condition=quot;item/hasDatequot; tal:replace=quot;item/getDatequot;/> <a href=quot;${item/getUrl}quot; tal:content=quot;item/getTitlequot;/> <p tal:content=quot;value/getContentquot;/> </div> Inspiring people to Fluid - The Zen of Templating share
  19. 19. Current Template Engines PHPTAL well-formed XML, but NOT VALID (no DTD / Schema) weird semantics PHP in template possible No autocompletion Difficult to extend Inspiring people to Fluid - The Zen of Templating share
  20. 20. Current Template Engines Drawbacks of existing template engines not completely OOP / break OOP paradigms at some places difficult to use for non-HTML templates no autocompletion in editors not easily extensible Inspiring people to Fluid - The Zen of Templating share
  21. 21. Abstract Current Template Engines How should templating be? Basic ingredients Fluid in FLOW3 and TYPO3 v4 Fluid A practical example Writing a custom ViewHelper Next steps Inspiring people to Fluid - The Zen of Templating share
  22. 22. The Zen of Templating simple powerful http://www.sxc.hu/photo/821903
  23. 23. The Zen of Templating intuitive easily extensible http://www.sxc.hu/photo/821903
  24. 24. » Simplicity is the ultimate sophistication. « Leonardo Da Vinci Inspiring people to Fluid - The Zen of Templating share
  25. 25. Goals of Fluid
  26. 26. simple, elegant template engine http://www.flickr.com/photos/josefstuefer/9699426/
  27. 27. Help the template writer in many ways
  28. 28. Easy and clean extensibility http://www.sxc.hu/photo/338064
  29. 29. Support for different output formats
  30. 30. How should templating be Goals of Fluid Simple, elegant template engine support for the template writer in many ways simple and clean extensibility different output formats possible Inspiring people to Fluid - The Zen of Templating share
  31. 31. Abstract Current Template Engines How should templating be? Basic ingredients Fluid in FLOW3 and TYPO3 v4 Fluid A practical example Writing a custom ViewHelper Next steps Inspiring people to Fluid - The Zen of Templating share
  32. 32. http://www.sxc.hu/photo/816749 Basic ingredients
  33. 33. Basic ingredients Variables $this->view->assign(‘blogTitle’, $blog->getTitle()); <h1>The name of the blog is: {blogTitle}</h1> Inspiring people to Fluid - The Zen of Templating share
  34. 34. Basic ingredients Object accessors $this->view->assign(‘blog’, $blog); <h1>The name of the blog is: {blog.title}</h1> Author: {blog.author} can be nested Getters are called automatically Inspiring people to Fluid - The Zen of Templating share
  35. 35. Basic ingredients ViewHelpers (Tags) Namespace Declaration Output logic is encapsulated in View Helpers (Tags) {namespace f=F3FluidViewHelpers} v5 <f:link action=“someAction“>Administration</f:link> Invocation of {namespace f=Tx_Fluid_ViewHelpers} a tag v4 <f:link action=“someAction“>Administration</f:link> Inspiring people to Fluid - The Zen of Templating share
  36. 36. Fluid Core does not contain any output logic, and no control structures!
  37. 37. <f:...> Every tag is a class!
  38. 38. {namespace f=F3FluidViewHelpers} v5 <f:link>...</f:link> F3FluidViewHelpersLinkViewHelper
  39. 39. {namespace f=Tx_Fluid_ViewHelpers} v4 <f:link>...</f:link> Tx_Fluid_ViewHelpers_LinkViewHelper
  40. 40. {namespace f=F3FluidViewHelpers} v5 <f:form.textbox /> F3FluidViewHelpersFormTextboxViewHelper
  41. 41. Basic ingredients Arrays <f:link action=“show“ arguments=“{id: blog.id, name: ‘Hello’}“>show posting</ f:link> JSON object syntax Inspiring people to Fluid - The Zen of Templating share
  42. 42. Basic ingredients Basic ingredients Object accessors: {blog.title} ViewHelpers: <f:for each=“{blog.posts}“ as=“post“>...</f:for> Arrays Inspiring people to Fluid - The Zen of Templating share
  43. 43. Abstract Current Template Engines How should templating be? Basic ingredients Fluid in FLOW3 and TYPO3 v4 Fluid A practical example Writing a custom ViewHelper Next steps Inspiring people to Fluid - The Zen of Templating share
  44. 44. Fluid in FLOW3 and TYPO3 4.3 Fluid is included in TYPO3 4.3 and FLOW3 Difference: Class names, ViewHelpers Inspiring people to Fluid - The Zen of Templating share
  45. 45. Fluid in FLOW3 and TYPO3 4.3 Class naming FLOW3 TYPO3 4.3 namespace F3FluidViewHelpers; class ForViewHelper { class Tx_Fluid_ViewHelpers_ForViewHelper { ... ... } } Inspiring people to Fluid - The Zen of Templating share
  46. 46. Fluid in FLOW3 and TYPO3 4.3 Class naming FLOW3 TYPO3 4.3 {namespace f=F3FluidViewHelpers} {namespace f=Tx_Fluid_ViewHelpers} Inspiring people to Fluid - The Zen of Templating share
  47. 47. Fluid in FLOW3 and TYPO3 4.3 Class naming Only the class names are different. Inspiring people to Fluid - The Zen of Templating share
  48. 48. Fluid in FLOW3 and TYPO3 4.3 Class naming Everything applies to FLOW3 and TYPO3 4.3. Inspiring people to Fluid - The Zen of Templating share
  49. 49. Fluid in FLOW3 and TYPO3 4.3 Internal structure TemplateView View Helpers (Tags) TemplateView View Helpers (Tags) v5 v4 Fluid Core v5v4 Inspiring people to Fluid - The Zen of Templating share
  50. 50. Abstract Current Template Engines How should templating be? Basic ingredients Fluid in FLOW3 and TYPO3 v4 Fluid A practical example Writing a custom ViewHelper Next steps Inspiring people to Fluid - The Zen of Templating share
  51. 51. A practical example v5 Inspiring people to Fluid - The Zen of Templating share
  52. 52. v5
  53. 53. An example v5 Layouts
  54. 54. An example v5 Loops
  55. 55. Abstract Current Template Engines How should templating be? Basic ingredients Fluid in FLOW3 and TYPO3 v4 Fluid A practical example Writing a custom ViewHelper Next steps Inspiring people to Fluid - The Zen of Templating share
  56. 56. Writing your own ViewHelper v4 ViewHelpers encapsulate output logic. Inspiring people to Fluid - The Zen of Templating share
  57. 57. Writing your own view helper Task: Write a “Gravatar“ ViewHelper v4 should take an e-mail address and output the gravatar image, if any. Expected output: <img src=“http://www.gravatar.com/avatar/md5($email).jpg“ /> Inspiring people to Fluid - The Zen of Templating share
  58. 58. Writing your own view helper Task: Write a “Gravatar“ ViewHelper v4 Expected usage: {namespace blog=Tx_Blog_ViewHelpers} <blog:gravatar email=“sebastian@typo3.org“ /> Inspiring people to Fluid - The Zen of Templating share
  59. 59. Writing your own view helper 1. Create a ViewHelper skeleton v4 class Tx_Blog_ViewHelpers_GravatarViewHelper extends Tx_Fluid_Core_AbstractViewHelper { public function render() { return ‘Hello World‘; } } This will output “Hello World” when the ViewHelper is rendered. Inspiring people to Fluid - The Zen of Templating share
  60. 60. Writing your own view helper 2. Implement the ViewHelper! v4 The PHPDoc must exist (for validation) /** * @param string $email The email to render as gravatar */ public function render($email) { return ‘http://www.gravatar.com/gravatar/‘ . md5($email); All method parameters will } be ViewHelper arguments automatically Inspiring people to Fluid - The Zen of Templating share
  61. 61. Abstract Current Template Engines How should templating be? Basic ingredients Fluid in FLOW3 and TYPO3 v4 Fluid A practical example Writing a custom ViewHelper Next steps Inspiring people to Fluid - The Zen of Templating share
  62. 62. Next steps Inspiring people to Fluid - The Zen of Templating share
  63. 63. Helping the template writer Inspiring people to Fluid - The Zen of Templating share
  64. 64. Autocompletion wizard Inspiring people to Fluid - The Zen of Templating share
  65. 65. Next steps Autocompletion Generate XML Schema of source code comments should work with all XML Schema aware editors (tested with Eclipse) Inspiring people to Fluid - The Zen of Templating share
  66. 66. Next steps Automatic documentation generation PHPDoc comments are enforced ViewHelper reference generated automatically from this Inspiring people to Fluid - The Zen of Templating share
  67. 67. Conclusion
  68. 68. Conclusion Avoiding the drawbacks Fluid is completely object oriented easy to use for non-HTML templates Planned: autocompletion in editors Extensibility is a core concept of Fluid - Eat your own dogfood! Inspiring people to Fluid - The Zen of Templating share
  69. 69. Conclusion The next-generation template engine Fluid will be used in FLOW3 and TYPO3 v4 People need to learn it only once Inspiring people to Fluid - The Zen of Templating share
  70. 70. Work in Progress http://www.sxc.hu/photo/956013
  71. 71. We need help and feedback! http://www.sxc.hu/photo/1132907
  72. 72. ?????? ? ? ? ?? ? ? Inspiring people to Fluid - The Zen of Templating share
  73. 73. inspiring people to share.

×