SlideShare a Scribd company logo
1 of 29
TWIG
About Me


           Wake Liu


wake.gs@gmail.com
Before the session starts
Do I need a template
      engine?
PHP is the most
powerful template
     engine
So, we really need a
 template engine ?
TWIG
Performance
• Compile & cache
• PHP Extension - Twig_Template::getAttribute()
• APC & Memcached
How it feels to use Twig
Clean and Beautiful
Variables
•   <?php echo $name; ?>   •   {{ name }}

•   <?php echo             •   {{ member.nickname }}
    $member->nickname;
    ?>                     •   {{ member[‘nickname’] }}

•   <?php                  •   {{
    echo                       member
    $member[‘nickname’];         ? member.nickname
    ?>                           : ‘Guest’
                               }}
Filters / Functions
• <?php echo nl2br ($content); ?>
• <?php echo html_entity_decode ($content); ?>
• <?php echo rand(0, 10); ?>
•   {{ content|nl2br }}

•   {{ content|raw }}     {{ content|nl2br|length }}


•   {{ random(10) }}
Logic & Loop

•   {% if %} {% elseif %} {% else %} {% endif %}



•   {% for key, value in data %}   {% endfor %}



•   {% set name = ‘wake’ %}
Organizational and
    reusable
Extends
layout.html
 <!DOCTYPE html>
                                        guest.html
<html lang="en">
<head>
 <meta charset="utf-8">                 {% extends layout.html %}
 <title>The HTML5 Herald</title>
</head>
<body>


   {% block wrapper %}
    default content
                                        member.html
   {% endblock %}                       {% extends layout.html %}
</body>
</html>
Horizontal reuse
                        page.html
navigator.html
                         {% use navigator.html %}
                         {% use login.html %}
{% block navigator %}   <div class=”wrapper”>
                         <div class=”navigator”>

                           {{ block (‘navigator’) }}
login.html               </div>

                         <div class=”login”>

                           {{ block (‘login’) }}
{% block login %}        </div>
                        </div>
Expandable
Filter, Function, Macro
       and others
The role of Twig
Template engine
View helper
MVC
Controller
                        Control ( Logic / Loop )

                    {
   C
             View       Data handling ( Filters / Functions )
              V         View binding ( Structures / Macros )
  Model

   M
Hmm, it looks not bad,
        but ...
......

 VS
Some more
interesting things
Photo URL passing
                             photo.html
original data                <img src=”


http://www/:size/photo.jpg    {{ url | image_to_large }}
                              ”>




php define                    Twig - addFilter
_LARGE_PHOTO ‘L’
_SMALL_PHOTO ‘S’              image_to_*
Template driven
member.php
                                  A.html
class Member {
                                  <div>


    function __get ($name) {       {{ member.age }}
      $loader = “_load$name”;     </div>


      return $this->$loader ();
    }                             B.html
    function _loadAge () {        <div>


      // load from database        {{ member.age }}
    }                             </div>


}
Thank you

 Q &A

More Related Content

What's hot

Dundee University HackU 2013 - Mojito
Dundee University HackU 2013 - MojitoDundee University HackU 2013 - Mojito
Dundee University HackU 2013 - Mojito
smartads
 
Short intro to JQuery and Modernizr
Short intro to JQuery and ModernizrShort intro to JQuery and Modernizr
Short intro to JQuery and Modernizr
Jussi Pohjolainen
 

What's hot (18)

jQuery Best Practice
jQuery Best Practice jQuery Best Practice
jQuery Best Practice
 
Dundee University HackU 2013 - Mojito
Dundee University HackU 2013 - MojitoDundee University HackU 2013 - Mojito
Dundee University HackU 2013 - Mojito
 
JQuery
JQueryJQuery
JQuery
 
Short intro to JQuery and Modernizr
Short intro to JQuery and ModernizrShort intro to JQuery and Modernizr
Short intro to JQuery and Modernizr
 
Understanding backbonejs
Understanding backbonejsUnderstanding backbonejs
Understanding backbonejs
 
Backbone
BackboneBackbone
Backbone
 
Backbone js in drupal core
Backbone js in drupal coreBackbone js in drupal core
Backbone js in drupal core
 
Introducing jQuery
Introducing jQueryIntroducing jQuery
Introducing jQuery
 
Optimizing Magento by Preloading Data
Optimizing Magento by Preloading DataOptimizing Magento by Preloading Data
Optimizing Magento by Preloading Data
 
Using of TDD practices for Magento
Using of TDD practices for MagentoUsing of TDD practices for Magento
Using of TDD practices for Magento
 
jQuery
jQueryjQuery
jQuery
 
Learning the basics of the Drupal API
Learning the basics of the Drupal APILearning the basics of the Drupal API
Learning the basics of the Drupal API
 
AngularJS and SPA
AngularJS and SPAAngularJS and SPA
AngularJS and SPA
 
Jquery
JqueryJquery
Jquery
 
In-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascriptIn-depth changes to Drupal 8 javascript
In-depth changes to Drupal 8 javascript
 
Django Templates
Django TemplatesDjango Templates
Django Templates
 
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-10) [Node.js] | NIC/NIELIT Web Technology
 
Get AngularJS Started!
Get AngularJS Started!Get AngularJS Started!
Get AngularJS Started!
 

Similar to PHPConf-TW 2012 # Twig

Intro To Mvc Development In Php
Intro To Mvc Development In PhpIntro To Mvc Development In Php
Intro To Mvc Development In Php
funkatron
 
Django Class-based views (Slovenian)
Django Class-based views (Slovenian)Django Class-based views (Slovenian)
Django Class-based views (Slovenian)
Luka Zakrajšek
 
Templates
TemplatesTemplates
Templates
soon
 
Use Symfony2 components inside WordPress
Use Symfony2 components inside WordPress Use Symfony2 components inside WordPress
Use Symfony2 components inside WordPress
Maurizio Pelizzone
 
TurboGears2 Pluggable Applications
TurboGears2 Pluggable ApplicationsTurboGears2 Pluggable Applications
TurboGears2 Pluggable Applications
Alessandro Molina
 
OSDC 2009 Rails Turtorial
OSDC 2009 Rails TurtorialOSDC 2009 Rails Turtorial
OSDC 2009 Rails Turtorial
Yi-Ting Cheng
 

Similar to PHPConf-TW 2012 # Twig (20)

The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2
 
The Django Web Application Framework 2
The Django Web Application Framework 2The Django Web Application Framework 2
The Django Web Application Framework 2
 
Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!
 
Intro To Mvc Development In Php
Intro To Mvc Development In PhpIntro To Mvc Development In Php
Intro To Mvc Development In Php
 
Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101Geek Moot '09 -- Smarty 101
Geek Moot '09 -- Smarty 101
 
Yii Introduction
Yii IntroductionYii Introduction
Yii Introduction
 
Django at the Disco
Django at the DiscoDjango at the Disco
Django at the Disco
 
Django at the Disco
Django at the DiscoDjango at the Disco
Django at the Disco
 
Django at the Disco
Django at the DiscoDjango at the Disco
Django at the Disco
 
Django Class-based views (Slovenian)
Django Class-based views (Slovenian)Django Class-based views (Slovenian)
Django Class-based views (Slovenian)
 
Templates
TemplatesTemplates
Templates
 
Use Symfony2 components inside WordPress
Use Symfony2 components inside WordPress Use Symfony2 components inside WordPress
Use Symfony2 components inside WordPress
 
Flask – Python
Flask – PythonFlask – Python
Flask – Python
 
TurboGears2 Pluggable Applications
TurboGears2 Pluggable ApplicationsTurboGears2 Pluggable Applications
TurboGears2 Pluggable Applications
 
前端概述
前端概述前端概述
前端概述
 
Python Code Camp for Professionals 1/4
Python Code Camp for Professionals 1/4Python Code Camp for Professionals 1/4
Python Code Camp for Professionals 1/4
 
OSDC 2009 Rails Turtorial
OSDC 2009 Rails TurtorialOSDC 2009 Rails Turtorial
OSDC 2009 Rails Turtorial
 
8 things to know about theming in drupal 8
8 things to know about theming in drupal 88 things to know about theming in drupal 8
8 things to know about theming in drupal 8
 

Recently uploaded

Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 

Recently uploaded (20)

Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Exploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with MilvusExploring Multimodal Embeddings with Milvus
Exploring Multimodal Embeddings with Milvus
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
Platformless Horizons for Digital Adaptability
Platformless Horizons for Digital AdaptabilityPlatformless Horizons for Digital Adaptability
Platformless Horizons for Digital Adaptability
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 AmsterdamDEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
Apidays New York 2024 - APIs in 2030: The Risk of Technological Sleepwalk by ...
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Corporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptxCorporate and higher education May webinar.pptx
Corporate and higher education May webinar.pptx
 

PHPConf-TW 2012 # Twig

  • 2. About Me Wake Liu wake.gs@gmail.com
  • 4. Do I need a template engine?
  • 5. PHP is the most powerful template engine
  • 6.
  • 7. So, we really need a template engine ?
  • 9. Performance • Compile & cache • PHP Extension - Twig_Template::getAttribute() • APC & Memcached
  • 10. How it feels to use Twig
  • 12. Variables • <?php echo $name; ?> • {{ name }} • <?php echo • {{ member.nickname }} $member->nickname; ?> • {{ member[‘nickname’] }} • <?php • {{ echo member $member[‘nickname’]; ? member.nickname ?> : ‘Guest’ }}
  • 13. Filters / Functions • <?php echo nl2br ($content); ?> • <?php echo html_entity_decode ($content); ?> • <?php echo rand(0, 10); ?> • {{ content|nl2br }} • {{ content|raw }} {{ content|nl2br|length }} • {{ random(10) }}
  • 14. Logic & Loop • {% if %} {% elseif %} {% else %} {% endif %} • {% for key, value in data %} {% endfor %} • {% set name = ‘wake’ %}
  • 15. Organizational and reusable
  • 16. Extends layout.html <!DOCTYPE html> guest.html <html lang="en"> <head> <meta charset="utf-8"> {% extends layout.html %} <title>The HTML5 Herald</title> </head> <body> {% block wrapper %} default content member.html {% endblock %} {% extends layout.html %} </body> </html>
  • 17. Horizontal reuse page.html navigator.html {% use navigator.html %} {% use login.html %} {% block navigator %} <div class=”wrapper”> <div class=”navigator”> {{ block (‘navigator’) }} login.html </div> <div class=”login”> {{ block (‘login’) }} {% block login %} </div> </div>
  • 20. The role of Twig
  • 23. MVC Controller Control ( Logic / Loop ) { C View Data handling ( Filters / Functions ) V View binding ( Structures / Macros ) Model M
  • 24. Hmm, it looks not bad, but ...
  • 27. Photo URL passing photo.html original data <img src=” http://www/:size/photo.jpg {{ url | image_to_large }} ”> php define Twig - addFilter _LARGE_PHOTO ‘L’ _SMALL_PHOTO ‘S’ image_to_*
  • 28. Template driven member.php A.html class Member { <div> function __get ($name) { {{ member.age }} $loader = “_load$name”; </div> return $this->$loader (); } B.html function _loadAge () { <div> // load from database {{ member.age }} } </div> }

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n