Symfony Live 2011

being dangerous with Twig
a short story by Ryan Weaver

March 4th, 2011
being dangerous with Twig

     A 5-step guide to using Twig – the fast, secure and
           extensible PHP templating engine – to create clean
   template code, leverage powerful filters, make your designers
  write you love letters, write template functions that don't clog up your
global PHP namespace, take advantage of true template inheritance, hang out with
Django programmers and be able to talk template syntax, enjoy true and non- invasive
output escaping, have more time for your family, control whitespace, add global
    variables to all templates, stop lying when you try to tell yourself that <?php echo looks better than a
 simple {{, use the fancy for-else control, Rock some macros – little reusable code functions, do awesome stuff like “{% if i is divisibleby 2 %}”,
   mediate in the simplicity of your templates and drink more green tea, sandbox your template and whitelist capabilities – allowing Twig to be used in a CMS,
        take advantage of the fact that all templates compile to PHP classes that can extend a base class of your choosing, impress your friends by changing the print tag from
            {{ var }} to [all-your-base] var [are-belong-to-us], confuse the guy next to you by changing “is” and “is not” to mean the opposite things and convince him that he's misunderstood
                                             how logical expressions are used in programming languages all along, create a custom tag that takes the body of its block and tweets it,
                                                                                       write templates the expresses presentation and not program logic.




                                                                    Ryan Weaver
                                                                  Symfony Live 2011
@weaverryan


    » symfony

    » symfony documentation

    » collaboration

    » the lovely @leannapelham
iostudio: flying the symfony flag

  ●
      Advertising & Integrated Marketing Solutions

  • coming to you from
      » Nashville, TN
      » Washington, D.C.

  • 150 employees

  • and we're hiring!
act 1


        Why Twig?
because template
engines are awesome
Template engines

A template engine allows you to render a
presentation (HTML, XML, etc) via a template
in a controlled environment

It should allow special functionality that
makes creating templates easier (helpers,
template inheritance, etc)
a template engine
     is a tool
why not just render
 PHP templates?
PHP templating woes

» rendering template files is a hack: an include
  statement with output-buffering control

» no or faked template inheritance

» no isolation: PHP templates suck in any global
  variables or functions available
we need the brevity
   of templates

with the isolation of
  object-oriented
   programming
so give me some Twiggy pudding

 Twig is:                  Twig offers:
    » fast                    » true inheritance
    » flexible                » real output escaping
    » concise                 » tons of filters
    » secure                  » custom tags
    » fully-featured          » great documentation
    » Extensible              » global variables
    » designer-friendly       » the “for-else” control

             http://www.twig-project.org
Twig is concise

 and each template
compiles to an actual
     PHP object
seeing is believing
a moment of
templating zen
“The template system is meant to
express presentation, not program
             logic.”


             - Django documentation
Twig can easily be
 used anywhere
act 2


        Twig's simple life
Twig's three tags

Twig parses just three simple tags:

   » comment tag

   » print tag

   » block tag
a. do nothing (comment tags)

{# comment #}
   » totally ignored when rendered
b. say something (print tags)

{{ 'print me!' }}
   » prints the given expression
   » think “<?php echo”




   » If you're ultimately printing something, use
     this tag
c. do something (block tags)

{% set foo = 'inside a block tag' %}
  » used mostly for control-flow statements like if, for,
    include and block
  » can have beginning and end tags




   » if you're *doing* something and not *printing*
     something, use this tag
Twig's three tags


  » do nothing: {# comment tag #}

  » say something: {{ print tag }}

  » do something: {% block tag %}



   it's just that simple
act 3


        Everything is an
          expression
expressions: Twig guts

  » like PHP, most everything inside a tag
    is an expression




  » expressions are the most interesting and
    flexible part of Twig
Expressions   Block names
              Block-specific tokens
an expression can
 consist of many
 different things
strings, variables, arrays,
 functions, filters, tests,
       subscripts...
strings, numbers and variables
  » like any language, strings, numbers and
    variables are commonplace
arrays and hashes
  » arrays use [], hashes use {}
operators
  » twig has operators just like PHP, but extensible
    and with some extras
filters

   » a filter always follows a pipe (|) and modifies the
     value that precedes it
   » a filter may or may not take arguments
functions
  » just like PHP, returns a value based on some input
twig expresses himself


  » strings, numbers and variables

  » arrays and hashes

  » operators

  » filters

  » functions

   hey – it's simple like PHP, but flexible...
act 4


  twig on the battlefield
the test...


 » a template that displays a list of “widgets” in
   odd-even rows

 » render tags and other info about each widget

 » create basic, clean pagination
Resources/views/Main/widgets.html.twig
inside the SfLivePlayBundle
block tag




print tag
Let's clean things up
filter to title-case
   the widget name




filters to strip tags
and shorten the
widget's description
your presenter is lying to you...

   » the “truncate” filter isn't part of Twig, but
     is available via a repository of extensions

   » Everything in Twig is loaded via an Extension
     (even the core stuff)

   » Extensions are easy to use and create – we'll
     prove it later

   * https://github.com/fabpot/Twig-extensions
odd/even classes
   like a boss
 “really easily”
Twig function cycles through
the given array items




               Special variable available inside
               all “for” loops.
               The “loop” variable knows other
               tricks like “loop.last” and
               “loop.revindex”
flex some filters
apply the date filter




chain filters to turn a list of tags
into a comma-separated list
convenience,
 readability
even management
knows what this does
pagination?
function returns a positive
      radius of numbers around the
      center (e.g. 3, 4, 5, 6, 7)




the awesome loop variable tells us
when we're in the last iteration
the audacity: your speaker just lied again

 » but.... the “radius” function doesn't actually
   exist in Twig.




  but since it's pretty handy, let's create it!
act 5


        Twig extensions
Twig extensions
 everything in Twig is loaded by an “Extension” class:

   » filters
   » functions
   » operators
   » tests (e.g. divisbleby)
   » custom tags

  Extensions are EASY!
step 1: create a class that extends Twig_Extension
step 2: tell Twig about the extension
step 2: tell Twig about the extension (Symfony2)




* don't forget to import this file from your
  application's configuration (i.e. app/config/config.yml)
step 3: add some guts to the extension class
step 4: Celebrate!!!
* buy a round of drinks
* watch the sun set
* ask a cute stranger out to dinner
I want more!
 ok great – do some reading!

   » http://www.twig-project.org/doc/advanced.html
   » http://www.twig-project.org/doc/extensions.html


 seriously – the Twig docs are quite excellent
act 6


        after-dinner mint

             mmm
screw with the Twig syntax

   » because Twig is totally sandboxed (i.e. you
    control exactly what can and cannot be done
    inside a template, Twig is a perfect fit for a CMS.


   » and if Twig's syntax scares your clients... change it!
cool, what about
     debugging?

a debug tag ships with
 the twig-extensions
the “debug” extension is available for you
in Symfony2 - just enable it
prints every variable
              available




prints the foo variable
but we've only just
scratched the surface
there's much much more

   » inheritance                   name can be:
                                    * an item on an array
                                    * property on an object
   » macros (reusable code bits)    * getName()


   » subscripts



  or you can force it to
  *just* fetch “name”
  as an array item
Twig, he's a people-person

   » Twig loves contributions, so *get involved*!


   » https://github.com/fabpot/twig
   » https://github.com/fabpot/twig-extensions
   » http://groups.google.com/group/twig-users
The Symfony documentation wants you!

  » The Symfony2 documentation is a community effort


  » The best way as a beginner to get involved
   immediately!


  » Talk to me!!!
thank you


                        Ryan Weaver
                        iostudio
                        @weaverryan
                        www.thatsquality.com
                        ryan [at] thatsquality.com


        *do* reach out to me – i'd love to talk nerd with you

comments, feedback, questions


                        http://joind.in/2765

Being Dangerous with Twig (Symfony Live Paris)

  • 1.
    Symfony Live 2011 beingdangerous with Twig a short story by Ryan Weaver March 4th, 2011
  • 2.
    being dangerous withTwig A 5-step guide to using Twig – the fast, secure and extensible PHP templating engine – to create clean template code, leverage powerful filters, make your designers write you love letters, write template functions that don't clog up your global PHP namespace, take advantage of true template inheritance, hang out with Django programmers and be able to talk template syntax, enjoy true and non- invasive output escaping, have more time for your family, control whitespace, add global variables to all templates, stop lying when you try to tell yourself that <?php echo looks better than a simple {{, use the fancy for-else control, Rock some macros – little reusable code functions, do awesome stuff like “{% if i is divisibleby 2 %}”, mediate in the simplicity of your templates and drink more green tea, sandbox your template and whitelist capabilities – allowing Twig to be used in a CMS, take advantage of the fact that all templates compile to PHP classes that can extend a base class of your choosing, impress your friends by changing the print tag from {{ var }} to [all-your-base] var [are-belong-to-us], confuse the guy next to you by changing “is” and “is not” to mean the opposite things and convince him that he's misunderstood how logical expressions are used in programming languages all along, create a custom tag that takes the body of its block and tweets it, write templates the expresses presentation and not program logic. Ryan Weaver Symfony Live 2011
  • 3.
    @weaverryan » symfony » symfony documentation » collaboration » the lovely @leannapelham
  • 4.
    iostudio: flying thesymfony flag ● Advertising & Integrated Marketing Solutions • coming to you from » Nashville, TN » Washington, D.C. • 150 employees • and we're hiring!
  • 5.
    act 1 Why Twig?
  • 6.
  • 8.
    Template engines A templateengine allows you to render a presentation (HTML, XML, etc) via a template in a controlled environment It should allow special functionality that makes creating templates easier (helpers, template inheritance, etc)
  • 9.
  • 10.
    why not justrender PHP templates?
  • 11.
    PHP templating woes »rendering template files is a hack: an include statement with output-buffering control » no or faked template inheritance » no isolation: PHP templates suck in any global variables or functions available
  • 12.
    we need thebrevity of templates with the isolation of object-oriented programming
  • 13.
    so give mesome Twiggy pudding Twig is: Twig offers: » fast » true inheritance » flexible » real output escaping » concise » tons of filters » secure » custom tags » fully-featured » great documentation » Extensible » global variables » designer-friendly » the “for-else” control http://www.twig-project.org
  • 14.
    Twig is concise and each template compiles to an actual PHP object
  • 15.
  • 19.
  • 20.
    “The template systemis meant to express presentation, not program logic.” - Django documentation
  • 21.
    Twig can easilybe used anywhere
  • 23.
    act 2 Twig's simple life
  • 24.
    Twig's three tags Twigparses just three simple tags: » comment tag » print tag » block tag
  • 25.
    a. do nothing(comment tags) {# comment #} » totally ignored when rendered
  • 26.
    b. say something(print tags) {{ 'print me!' }} » prints the given expression » think “<?php echo” » If you're ultimately printing something, use this tag
  • 27.
    c. do something(block tags) {% set foo = 'inside a block tag' %} » used mostly for control-flow statements like if, for, include and block » can have beginning and end tags » if you're *doing* something and not *printing* something, use this tag
  • 28.
    Twig's three tags » do nothing: {# comment tag #} » say something: {{ print tag }} » do something: {% block tag %} it's just that simple
  • 29.
    act 3 Everything is an expression
  • 30.
    expressions: Twig guts » like PHP, most everything inside a tag is an expression » expressions are the most interesting and flexible part of Twig
  • 31.
    Expressions Block names Block-specific tokens
  • 32.
    an expression can consist of many different things
  • 33.
    strings, variables, arrays, functions, filters, tests, subscripts...
  • 34.
    strings, numbers andvariables » like any language, strings, numbers and variables are commonplace
  • 35.
    arrays and hashes » arrays use [], hashes use {}
  • 36.
    operators »twig has operators just like PHP, but extensible and with some extras
  • 37.
    filters » a filter always follows a pipe (|) and modifies the value that precedes it » a filter may or may not take arguments
  • 38.
    functions »just like PHP, returns a value based on some input
  • 39.
    twig expresses himself » strings, numbers and variables » arrays and hashes » operators » filters » functions hey – it's simple like PHP, but flexible...
  • 40.
    act 4 twig on the battlefield
  • 41.
    the test... »a template that displays a list of “widgets” in odd-even rows » render tags and other info about each widget » create basic, clean pagination
  • 42.
  • 43.
  • 44.
  • 45.
    filter to title-case the widget name filters to strip tags and shorten the widget's description
  • 46.
    your presenter islying to you... » the “truncate” filter isn't part of Twig, but is available via a repository of extensions » Everything in Twig is loaded via an Extension (even the core stuff) » Extensions are easy to use and create – we'll prove it later * https://github.com/fabpot/Twig-extensions
  • 47.
    odd/even classes like a boss “really easily”
  • 48.
    Twig function cyclesthrough the given array items Special variable available inside all “for” loops. The “loop” variable knows other tricks like “loop.last” and “loop.revindex”
  • 49.
  • 50.
    apply the datefilter chain filters to turn a list of tags into a comma-separated list
  • 51.
  • 52.
  • 53.
  • 54.
    function returns apositive radius of numbers around the center (e.g. 3, 4, 5, 6, 7) the awesome loop variable tells us when we're in the last iteration
  • 55.
    the audacity: yourspeaker just lied again » but.... the “radius” function doesn't actually exist in Twig. but since it's pretty handy, let's create it!
  • 56.
    act 5 Twig extensions
  • 57.
    Twig extensions everythingin Twig is loaded by an “Extension” class: » filters » functions » operators » tests (e.g. divisbleby) » custom tags Extensions are EASY!
  • 58.
    step 1: createa class that extends Twig_Extension
  • 59.
    step 2: tellTwig about the extension
  • 60.
    step 2: tellTwig about the extension (Symfony2) * don't forget to import this file from your application's configuration (i.e. app/config/config.yml)
  • 61.
    step 3: addsome guts to the extension class
  • 62.
    step 4: Celebrate!!! *buy a round of drinks * watch the sun set * ask a cute stranger out to dinner
  • 63.
    I want more! ok great – do some reading! » http://www.twig-project.org/doc/advanced.html » http://www.twig-project.org/doc/extensions.html seriously – the Twig docs are quite excellent
  • 64.
    act 6 after-dinner mint mmm
  • 65.
    screw with theTwig syntax » because Twig is totally sandboxed (i.e. you control exactly what can and cannot be done inside a template, Twig is a perfect fit for a CMS. » and if Twig's syntax scares your clients... change it!
  • 67.
    cool, what about debugging? a debug tag ships with the twig-extensions
  • 68.
    the “debug” extensionis available for you in Symfony2 - just enable it
  • 69.
    prints every variable available prints the foo variable
  • 70.
    but we've onlyjust scratched the surface
  • 71.
    there's much muchmore » inheritance name can be: * an item on an array * property on an object » macros (reusable code bits) * getName() » subscripts or you can force it to *just* fetch “name” as an array item
  • 72.
    Twig, he's apeople-person » Twig loves contributions, so *get involved*! » https://github.com/fabpot/twig » https://github.com/fabpot/twig-extensions » http://groups.google.com/group/twig-users
  • 73.
    The Symfony documentationwants you! » The Symfony2 documentation is a community effort » The best way as a beginner to get involved immediately! » Talk to me!!!
  • 74.
    thank you Ryan Weaver iostudio @weaverryan www.thatsquality.com ryan [at] thatsquality.com *do* reach out to me – i'd love to talk nerd with you comments, feedback, questions http://joind.in/2765