SlideShare a Scribd company logo
1 of 77
Download to read offline
T3C0N09 Dallas                  Inspiring people to
                                share
Fluid - The Zen of Templating
Fluid - The Zen of Templating
                 16.04.2009



Sebastian Kurfürst <sebastian@typo3.org>
- WARNING -
                                TYPO3 addict




                                Inspiring people to
Fluid - The Zen of Templating   share
Target audience


                TYPO3 v4 Developers



                TYPO3 v5 Developers


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


                    v4          v5




                                     Inspiring people to
Fluid - The Zen of Templating        share
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
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
Current template engines


What should a template engine do?
      renders data

      “lives” in the view




                                    Inspiring people to
Fluid - The Zen of Templating       share
Designers don‘t write PHP, they write HTML
Source: http://en.wikipedia.org/wiki/Template_engine_(web)




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




                                          Inspiring people to
Fluid - The Zen of Templating             share
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
Current Template Engines


Classic TYPO3 Templating

                           ###CONTENTS###

                            <h2>###TITLE###</h2>
                                      Text

                           ###CONTENTS###




                                                   Inspiring people to
Fluid - The Zen of Templating                      share
Current Template Engines


Classic TYPO3 Templating


                           Implementing a loop
                                   Text




                                                 Inspiring people to
Fluid - The Zen of Templating                    share
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
Current Template Engines


Smarty
    <ul>
    {foreach from=$myArray item=foo}
       <li>{$foo}</li>
    {/foreach}
    </ul>




                                       Inspiring people to
Fluid - The Zen of Templating          share
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
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
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
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
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
The Zen of
                    Templating



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



intuitive   easily extensible
                                http://www.sxc.hu/photo/821903
»      Simplicity is the ultimate sophistication.


                                                                            «
                                                     Leonardo Da Vinci


                                                      Inspiring people to
Fluid - The Zen of Templating                         share
Goals of Fluid
simple, elegant
                                                    template engine




http://www.flickr.com/photos/josefstuefer/9699426/
Help the template writer
     in many ways
Easy and clean
         extensibility

http://www.sxc.hu/photo/338064
Support for different
  output formats
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
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
http://www.sxc.hu/photo/816749




          Basic ingredients
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
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
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
Fluid Core does not contain any output
    logic, and no control structures!
<f:...>

Every tag is a class!
{namespace f=F3FluidViewHelpers}
v5

               <f:link>...</f:link>


     F3FluidViewHelpersLinkViewHelper
{namespace f=Tx_Fluid_ViewHelpers}
v4

               <f:link>...</f:link>


     Tx_Fluid_ViewHelpers_LinkViewHelper
{namespace f=F3FluidViewHelpers}
v5

             <f:form.textbox />


F3FluidViewHelpersFormTextboxViewHelper
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
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
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
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
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
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
Fluid in FLOW3 and TYPO3 4.3


Class naming



Only the class names are different.


                                Inspiring people to
Fluid - The Zen of Templating   share
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
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
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
A practical example
                                v5




                                         Inspiring people to
Fluid - The Zen of Templating            share
v5
An example
v5
     Layouts
An example
v5
     Loops
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
Writing your own ViewHelper
v4
         ViewHelpers encapsulate output logic.




                                                 Inspiring people to
     Fluid - The Zen of Templating               share
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
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
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
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
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
Next steps




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




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




                                        Inspiring people to
Fluid - The Zen of Templating           share
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
Next steps


Automatic documentation generation
      PHPDoc comments are enforced

      ViewHelper reference generated automatically from this




                                                               Inspiring people to
Fluid - The Zen of Templating                                  share
Conclusion
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
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
Work in Progress
          http://www.sxc.hu/photo/956013
We need help and
       feedback!
          http://www.sxc.hu/photo/1132907
??????
                                  ?
                                 ?
                                ?
                              ??
                             ?
                             ?


                                      Inspiring people to
Fluid - The Zen of Templating         share
inspiring people to share.

More Related Content

Similar to Fluid - The Zen of Templating

Hitchhiker’s Guide to TYPO3 5.0
Hitchhiker’s Guide to TYPO3 5.0Hitchhiker’s Guide to TYPO3 5.0
Hitchhiker’s Guide to TYPO3 5.0Robert Lemke
 
Implementing a JSR-283 Content Repository in PHP
Implementing a JSR-283 Content Repository in PHPImplementing a JSR-283 Content Repository in PHP
Implementing a JSR-283 Content Repository in PHPKarsten Dambekalns
 
A Content Repository for TYPO3 5.0
A Content Repository for TYPO3 5.0A Content Repository for TYPO3 5.0
A Content Repository for TYPO3 5.0Karsten Dambekalns
 
Flink Forward SF 2017: Dean Wampler - Streaming Deep Learning Scenarios with...
Flink Forward SF 2017: Dean Wampler -  Streaming Deep Learning Scenarios with...Flink Forward SF 2017: Dean Wampler -  Streaming Deep Learning Scenarios with...
Flink Forward SF 2017: Dean Wampler - Streaming Deep Learning Scenarios with...Flink Forward
 
HTTP cache @ PUG Rome 03-29-2011
HTTP cache @ PUG Rome 03-29-2011HTTP cache @ PUG Rome 03-29-2011
HTTP cache @ PUG Rome 03-29-2011Alessandro Nadalin
 
Double the Collaboration Value of Confluence - Ben Mackie
Double the Collaboration Value of Confluence - Ben MackieDouble the Collaboration Value of Confluence - Ben Mackie
Double the Collaboration Value of Confluence - Ben MackieAtlassian
 
Digital Library Federation, Fall 07, Connotea Presentation
Digital Library Federation, Fall 07, Connotea PresentationDigital Library Federation, Fall 07, Connotea Presentation
Digital Library Federation, Fall 07, Connotea PresentationIan Mulvany
 
Introduction to Semantic Web for GIS Practitioners
Introduction to Semantic Web for GIS PractitionersIntroduction to Semantic Web for GIS Practitioners
Introduction to Semantic Web for GIS PractitionersEmanuele Della Valle
 
Realizing a Semantic Web Application - ICWE 2010 Tutorial
Realizing a Semantic Web Application - ICWE 2010 TutorialRealizing a Semantic Web Application - ICWE 2010 Tutorial
Realizing a Semantic Web Application - ICWE 2010 TutorialEmanuele Della Valle
 
Workflows with TYPO3 Workspaces 4.5
Workflows with TYPO3 Workspaces 4.5Workflows with TYPO3 Workspaces 4.5
Workflows with TYPO3 Workspaces 4.5Benni Mack
 
Contribute to TYPO3 CMS
Contribute to TYPO3 CMSContribute to TYPO3 CMS
Contribute to TYPO3 CMSOliver Hader
 
Asynchronous I/O in Python 3
Asynchronous I/O in Python 3Asynchronous I/O in Python 3
Asynchronous I/O in Python 3Feihong Hsu
 

Similar to Fluid - The Zen of Templating (12)

Hitchhiker’s Guide to TYPO3 5.0
Hitchhiker’s Guide to TYPO3 5.0Hitchhiker’s Guide to TYPO3 5.0
Hitchhiker’s Guide to TYPO3 5.0
 
Implementing a JSR-283 Content Repository in PHP
Implementing a JSR-283 Content Repository in PHPImplementing a JSR-283 Content Repository in PHP
Implementing a JSR-283 Content Repository in PHP
 
A Content Repository for TYPO3 5.0
A Content Repository for TYPO3 5.0A Content Repository for TYPO3 5.0
A Content Repository for TYPO3 5.0
 
Flink Forward SF 2017: Dean Wampler - Streaming Deep Learning Scenarios with...
Flink Forward SF 2017: Dean Wampler -  Streaming Deep Learning Scenarios with...Flink Forward SF 2017: Dean Wampler -  Streaming Deep Learning Scenarios with...
Flink Forward SF 2017: Dean Wampler - Streaming Deep Learning Scenarios with...
 
HTTP cache @ PUG Rome 03-29-2011
HTTP cache @ PUG Rome 03-29-2011HTTP cache @ PUG Rome 03-29-2011
HTTP cache @ PUG Rome 03-29-2011
 
Double the Collaboration Value of Confluence - Ben Mackie
Double the Collaboration Value of Confluence - Ben MackieDouble the Collaboration Value of Confluence - Ben Mackie
Double the Collaboration Value of Confluence - Ben Mackie
 
Digital Library Federation, Fall 07, Connotea Presentation
Digital Library Federation, Fall 07, Connotea PresentationDigital Library Federation, Fall 07, Connotea Presentation
Digital Library Federation, Fall 07, Connotea Presentation
 
Introduction to Semantic Web for GIS Practitioners
Introduction to Semantic Web for GIS PractitionersIntroduction to Semantic Web for GIS Practitioners
Introduction to Semantic Web for GIS Practitioners
 
Realizing a Semantic Web Application - ICWE 2010 Tutorial
Realizing a Semantic Web Application - ICWE 2010 TutorialRealizing a Semantic Web Application - ICWE 2010 Tutorial
Realizing a Semantic Web Application - ICWE 2010 Tutorial
 
Workflows with TYPO3 Workspaces 4.5
Workflows with TYPO3 Workspaces 4.5Workflows with TYPO3 Workspaces 4.5
Workflows with TYPO3 Workspaces 4.5
 
Contribute to TYPO3 CMS
Contribute to TYPO3 CMSContribute to TYPO3 CMS
Contribute to TYPO3 CMS
 
Asynchronous I/O in Python 3
Asynchronous I/O in Python 3Asynchronous I/O in Python 3
Asynchronous I/O in Python 3
 

More from Sebastian Kurfürst

More from Sebastian Kurfürst (7)

FLOW3 Goes Semantic
FLOW3 Goes SemanticFLOW3 Goes Semantic
FLOW3 Goes Semantic
 
Advanced Fluid
Advanced FluidAdvanced Fluid
Advanced Fluid
 
Fluid for Designers
Fluid for DesignersFluid for Designers
Fluid for Designers
 
Workshop Extension-Entwicklung mit Extbase und Fluid
Workshop Extension-Entwicklung mit Extbase und FluidWorkshop Extension-Entwicklung mit Extbase und Fluid
Workshop Extension-Entwicklung mit Extbase und Fluid
 
MVC for TYPO3 4.3 with extbase
MVC for TYPO3 4.3 with extbaseMVC for TYPO3 4.3 with extbase
MVC for TYPO3 4.3 with extbase
 
FLOW3 - der aktuelle Stand. TYPO3 Usergroup Dresden
FLOW3 - der aktuelle Stand. TYPO3 Usergroup DresdenFLOW3 - der aktuelle Stand. TYPO3 Usergroup Dresden
FLOW3 - der aktuelle Stand. TYPO3 Usergroup Dresden
 
Continuous Integration at T3CON08
Continuous Integration at T3CON08Continuous Integration at T3CON08
Continuous Integration at T3CON08
 

Recently uploaded

How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfSrushith Repakula
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfFIDO Alliance
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...ScyllaDB
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptxFIDO Alliance
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsLeah Henrickson
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxFIDO Alliance
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch TuesdayIvanti
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxFIDO Alliance
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfFIDO Alliance
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdfMuhammad Subhan
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfFIDO Alliance
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераMark Opanasiuk
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe中 央社
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024Lorenzo Miniero
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Patrick Viafore
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Hiroshi SHIBATA
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Paige Cruz
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxFIDO Alliance
 

Recently uploaded (20)

How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on ThanabotsContinuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
Continuing Bonds Through AI: A Hermeneutic Reflection on Thanabots
 
Design Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptxDesign Guidelines for Passkeys 2024.pptx
Design Guidelines for Passkeys 2024.pptx
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
“Iamnobody89757” Understanding the Mysterious of Digital Identity.pdf
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
Observability Concepts EVERY Developer Should Know (DevOpsDays Seattle)
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 

Fluid - The Zen of Templating

  • 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
  • 16.
  • 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
  • 22.
  • 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
  • 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
  • 33.
  • 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!
  • 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
  • 68.
  • 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
  • 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