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

1. T3C0N09 Dallas Inspiring people to
share
Fluid - The Zen of Templating

2. Fluid - The Zen of Templating
16.04.2009
Sebastian Kurfürst <sebastian@typo3.org>

3. - WARNING -
TYPO3 addict
Inspiring people to
Fluid - The Zen of Templating share

4. Target audience
TYPO3 v4 Developers
TYPO3 v5 Developers
Inspiring people to
Fluid - The Zen of Templating share

5. TYPO3 v4 and v5
v4 v5
Inspiring people to
Fluid - The Zen of Templating share

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. 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. 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. Designers don‘t write PHP, they write HTML

10. Source: http://en.wikipedia.org/wiki/Template_engine_(web)
Inspiring people to
Fluid - The Zen of Templating share

11. Current template engines
Classic TYPO3 Smarty PHPTAL
Templating
Inspiring people to
Fluid - The Zen of Templating share

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. Current Template Engines
Classic TYPO3 Templating
###CONTENTS###
<h2>###TITLE###</h2>
Text
###CONTENTS###
Inspiring people to
Fluid - The Zen of Templating share

14. Current Template Engines
Classic TYPO3 Templating
Implementing a loop
Text
Inspiring people to
Fluid - The Zen of Templating share

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

17. Current Template Engines
Smarty
<ul>
{foreach from=$myArray item=foo}
<li>{$foo}</li>
{/foreach}
</ul>
Inspiring people to
Fluid - The Zen of Templating share

18. 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

19. 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

20. 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

21. 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

23. 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

24. The Zen of
Templating
simple powerful
http://www.sxc.hu/photo/821903

25. The Zen of
Templating
intuitive easily extensible
http://www.sxc.hu/photo/821903

26. » Simplicity is the ultimate sophistication.
«
Leonardo Da Vinci
Inspiring people to
Fluid - The Zen of Templating share

27. Goals of Fluid

28. simple, elegant
template engine
http://www.flickr.com/photos/josefstuefer/9699426/

29. Help the template writer
in many ways

30. Easy and clean
extensibility
http://www.sxc.hu/photo/338064

31. Support for different
output formats

32. 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

34. 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

35. http://www.sxc.hu/photo/816749
Basic ingredients

36. 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

37. 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

38. 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

39. Fluid Core does not contain any output
logic, and no control structures!

40. <f:...>
Every tag is a class!

41. {namespace f=F3FluidViewHelpers}
v5
<f:link>...</f:link>
F3FluidViewHelpersLinkViewHelper

42. {namespace f=Tx_Fluid_ViewHelpers}
v4
<f:link>...</f:link>
Tx_Fluid_ViewHelpers_LinkViewHelper

43. {namespace f=F3FluidViewHelpers}
v5
<f:form.textbox />
F3FluidViewHelpersFormTextboxViewHelper

44. 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

45. 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

46. 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

47. 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

48. 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

49. 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

50. Fluid in FLOW3 and TYPO3 4.3
Class naming
Only the class names are different.
Inspiring people to
Fluid - The Zen of Templating share

51. 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

52. 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

53. 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

54. A practical example
v5
Inspiring people to
Fluid - The Zen of Templating share

55. v5

56. An example
v5
Layouts

57. An example
v5
Loops

58. 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

59. Writing your own ViewHelper
v4
ViewHelpers encapsulate output logic.
Inspiring people to
Fluid - The Zen of Templating share

60. 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

61. 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

62. 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

63. 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

64. 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

65. Next steps
Inspiring people to
Fluid - The Zen of Templating share

66. Helping the template writer
Inspiring people to
Fluid - The Zen of Templating share

67. Autocompletion wizard
Inspiring people to
Fluid - The Zen of Templating share

69. 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

70. Next steps
Automatic documentation generation
PHPDoc comments are enforced
ViewHelper reference generated automatically from this
Inspiring people to
Fluid - The Zen of Templating share

71. Conclusion

72. 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

73. 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

74. Work in Progress
http://www.sxc.hu/photo/956013

75. We need help and
feedback!
http://www.sxc.hu/photo/1132907

76. ??????
?
?
?
??
?
?
Inspiring people to
Fluid - The Zen of Templating share

77. inspiring people to share.