SlideShare ist ein Scribd-Unternehmen logo
Drupal 8 & Twig

                            Drupal Usergroup Hannover 09.10.2012




The Twig logo is © 2010-2012 Sensio Labs
{{ SteffenR }}

● Drupal - Developer bei

●   HTML / CSS / JS seit 1999
●   PHP seit 2002
●   Drupal seit 2008 (Danke DUG-Hannover)
●   244597 auf drupal.org
{{ twig }}
      liest sich auf jeden Fall interessant

"The flexible, fast and secure
template engine for PHP"

                      "Twig is a modern
                      template engine for PHP"

"Symfony 2 PHP framework comes
with a bundled support for Twig
as default templating engine"
{{ twig.description }}
               Was ist twig ?

● entwickelt von Armin Ronacher - als Phyton
  template-engine
● seit 2009 Default Template-Engine von
  Symfony2 (http://twig.sensiolabs.org/)
● erhältlich als Standalone-Lösung zur
  Einbindung in eigene PHP-basierte
  Lösungen
● basierend auf PHP5 - OOP-Templates
● das LESS/SASS für HTML :-)
{{ drupal.twig }}

#1499460
           "I just wanted to let everyone know that I'm in
support of rethinking the theme system. I'm also
comfortable that the team will come up with a good
solution." (Dries Buytaert, 18.04.2012)

                                            John Albin
         "We hand themers a loaded gun (PHP) and tell
them to hammer in a nail with it. Oh, and be careful"
(Drupalcon Denver)
{{ phptemplate }}
     html.tpl.php




        Drupal 7
      stark theme
{{ twig }}
  html.twig




    Drupal 8
twig_stark theme
{{ twig.advantages }}
         Vorteile von twig in Drupal

● mehr Sicherheit im Theming
● kein PHP/HTML Mix in Templates
● einfache Tag-basierte Syntax
● Wiederverwendbarkeit von Templates
● Vermeidung neuer Sicherheitslücken
● Integration in IDEs (Netbeans, vim, PHP-
  Storm etc..)
● gute Integration in Symfony2 - bringt beide
  Communities wieder ein Stück mehr
  zusammen
{{ twig.disadvantages }}
          Nachteile von twig in Drupal

●   steile Lernkurve (begrenzt auf Tag-Syntax)
●   neue Syntax für Drupal-Themer
●   Performance-Bedenken
●   Update Zyklen Drupal vs. Twig
{{ twig.internals }}
 Wie funktioniert das Ganze im Hintergrund ?

1. Template laden
    a. lexer - Zerlegung in kleinere Einzelteile (Token-
       Stream) zum Parsen
    b. parser - Konvertierung des Token-Streams in
       Abstract-Syntax-Tree oder Node-Tree
    c. compiler - Generierung des PHP-Codes
       für die Ausgabe aus Node-Tree / AST
2. Ausgabe des Template

http://twig.sensiolabs.org/doc/internals.html
{{ twig.features }}
         Was bringt uns das konkret ?

●   Filter
●   Kontroll-Strukturen
●   Template-Vererbung
●   Makros
●   Erweiterbarkeit durch OOP
●   Sandbox
●   erkennt automatisch den PHP-Datentyp -
    "bye bye Theme-Render Array of DOOM"
{{ twig.variables }}
                print $var_name ?
phptemplate




                                             twig




              region Template im Vergleich
{{ twig.filters }}
     Ausgabe von Variablen beeinflussen

● PHP-Funktionen ohne PHP
  ○ date, replace, url_encode, capitalize, striptags, join,
    reverse, length, sort, merge



● Chaining von Filtern
{{ twig.functions }}
      Ausgabe von Variablen beeinflussen




● range, cycle, constant, random,
  attribute, block, parent, dump, date
  http://twig.sensiolabs.org/doc/functions/index.html




 Ausgabe von Feld-Inhalten mit alternating CSS Classes
{{ twig.controlstructures }}
             loops, conditions




   einfache for-Schleifen, if-else Konstkrukte
{{ twig.controlstructures }}
              loops, conditions
phptemplate

                                    twig




               bessere Lesbarkeit
{{ twig.includes }}
 andere Templates einbinden




Wiederverwendbarkeit von Templates
{{ twig.includes }}
                       kleiner geht immer...

stark-theme - theme.inc    breadcrumb.twig




                          liest das Array breadcrumbs aus und zeigt
                          es als Liste an - hier wird die Funktion
                          join verwendet

Statt der vielen Theme-Funktionen in Drupal 7 stehen uns nun direkt die die
Templates zur Verfügung, natürlich auch über _preprocess-hooks geändert werden
könnten
{{ twig.inheritance }}
html.twig
                   Vererbung von Templates




maintenance-page.twig




selektives Überschreiben - Variable .mobi in page_preprocess gesetzt
{{ twig.macros }}
           re-usable pieces of view-logic




Einbindung des Sidebar Macros in bestehende Template Datei
{{ twig.demo }}
    na dann mal los ...




      http://twig.local/




einfaches Twig-Theme erstellen
{{ twig.questions }}

<h1>Fragen</h1>
<ul>
{% for question in audience.questions %}
   <li>{{ question|e }}</li>
{% endfor %}
</ul>
{{ twig.links }}

● Drupal 8 Theme and Twig Sprint
   http://drupal.org/sandbox/pixelmord/1750250

● Twig-Documentation
   http://twig.sensiolabs.org/documentation

● Templating Engines in PHP - http://fabien.potencier.
   org/article/34/templating-engines-in-php

● Drupal with Twig templates
   http://drupalmotion.com/article/drupal-twig-templates

● [meta] new theme system
   http://drupal.org/node/1499460

● What to Expect in Drupal 8
   http://lyemium.com/content/what-expect-drupal-8
{{ twig.end }}



{{ thx|default("Danke für die Aufmerksamkeit") }}




         {{ speaker.name|default("Steffen Rühlmann")   }}
             {{ speaker.web|default("www.port11.de")   }}
             {{ speaker.twitter|default("_steffenr")   }}
       {{ speaker.email|default("steffen@port11.de")   }}

Weitere ähnliche Inhalte

Ähnlich wie Drupal und twig

Drupal 8: TWIG Template Engine
Drupal 8:  TWIG Template EngineDrupal 8:  TWIG Template Engine
Drupal 8: TWIG Template Engine
drubb
 
Drupal Austria Roadshow in Klagenfurt
Drupal Austria Roadshow in KlagenfurtDrupal Austria Roadshow in Klagenfurt
Drupal Austria Roadshow in Klagenfurt
dasjo
 
Puppet - Module entwickeln - Von der Planung bis zur Umsetzung
Puppet - Module entwickeln - Von der Planung bis zur UmsetzungPuppet - Module entwickeln - Von der Planung bis zur Umsetzung
Puppet - Module entwickeln - Von der Planung bis zur Umsetzung
inovex GmbH
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
Felix Sasaki
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-Ansätze
Ralf Lütke
 
Devops ohne root
Devops ohne rootDevops ohne root
Devops ohne root
cusy GmbH
 
react-de.pdf
react-de.pdfreact-de.pdf
react-de.pdf
ssuser65180a
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
Thomas Kratz
 
Drupal Basics (7-8) Vortrag (01.2016)
Drupal Basics (7-8) Vortrag (01.2016)Drupal Basics (7-8) Vortrag (01.2016)
Drupal Basics (7-8) Vortrag (01.2016)
Peter_Majmesku
 
Drupal Multisite und Subversion
Drupal Multisite und SubversionDrupal Multisite und Subversion
Drupal Multisite und Subversion
Drupalist
 
Gradle - Beginner's Workshop (german)
Gradle - Beginner's Workshop (german)Gradle - Beginner's Workshop (german)
Gradle - Beginner's Workshop (german)
Joachim Baumann
 
Joomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte VielfaltJoomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte Vielfalt
Sven Schultschik
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
Noël Bossart
 
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture LösungAndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
Eduard Hildebrandt
 
Web Entwicklung mit PHP - Teil 3 Beta
Web Entwicklung mit PHP - Teil 3 BetaWeb Entwicklung mit PHP - Teil 3 Beta
Web Entwicklung mit PHP - Teil 3 Beta
Hans-Joachim Piepereit
 
Konfigurations Management mit Puppet (Webinar vom 17.10.2013)
Konfigurations Management mit Puppet (Webinar vom 17.10.2013)Konfigurations Management mit Puppet (Webinar vom 17.10.2013)
Konfigurations Management mit Puppet (Webinar vom 17.10.2013)
NETWAYS
 
Nagios Conference 2006 | Nagios Portalintegration by Julian Hein
Nagios Conference 2006 |  Nagios Portalintegration by Julian HeinNagios Conference 2006 |  Nagios Portalintegration by Julian Hein
Nagios Conference 2006 | Nagios Portalintegration by Julian Hein
NETWAYS
 
Nagios Conference 2007 | Eventverarbeitung mit Nagios by Michael Streb
Nagios Conference 2007 | Eventverarbeitung mit Nagios by Michael StrebNagios Conference 2007 | Eventverarbeitung mit Nagios by Michael Streb
Nagios Conference 2007 | Eventverarbeitung mit Nagios by Michael Streb
NETWAYS
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Andreas Wissel
 

Ähnlich wie Drupal und twig (20)

Drupal 8: TWIG Template Engine
Drupal 8:  TWIG Template EngineDrupal 8:  TWIG Template Engine
Drupal 8: TWIG Template Engine
 
Drupal Austria Roadshow in Klagenfurt
Drupal Austria Roadshow in KlagenfurtDrupal Austria Roadshow in Klagenfurt
Drupal Austria Roadshow in Klagenfurt
 
Puppet - Module entwickeln - Von der Planung bis zur Umsetzung
Puppet - Module entwickeln - Von der Planung bis zur UmsetzungPuppet - Module entwickeln - Von der Planung bis zur Umsetzung
Puppet - Module entwickeln - Von der Planung bis zur Umsetzung
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-Ansätze
 
Devops ohne root
Devops ohne rootDevops ohne root
Devops ohne root
 
react-de.pdf
react-de.pdfreact-de.pdf
react-de.pdf
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
 
Drupal Basics (7-8) Vortrag (01.2016)
Drupal Basics (7-8) Vortrag (01.2016)Drupal Basics (7-8) Vortrag (01.2016)
Drupal Basics (7-8) Vortrag (01.2016)
 
Drupal Multisite und Subversion
Drupal Multisite und SubversionDrupal Multisite und Subversion
Drupal Multisite und Subversion
 
Gradle - Beginner's Workshop (german)
Gradle - Beginner's Workshop (german)Gradle - Beginner's Workshop (german)
Gradle - Beginner's Workshop (german)
 
Joomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte VielfaltJoomla! Overrides - Die zu wenig genutzte Vielfalt
Joomla! Overrides - Die zu wenig genutzte Vielfalt
 
Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11Einführung XHTML CSS JS // MM 08-11
Einführung XHTML CSS JS // MM 08-11
 
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture LösungAndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
AndroMDA - Einführung in eine Open Source Model Driven Architecture Lösung
 
Web Entwicklung mit PHP - Teil 3 Beta
Web Entwicklung mit PHP - Teil 3 BetaWeb Entwicklung mit PHP - Teil 3 Beta
Web Entwicklung mit PHP - Teil 3 Beta
 
Konfigurations Management mit Puppet (Webinar vom 17.10.2013)
Konfigurations Management mit Puppet (Webinar vom 17.10.2013)Konfigurations Management mit Puppet (Webinar vom 17.10.2013)
Konfigurations Management mit Puppet (Webinar vom 17.10.2013)
 
PLUX.NET – SOFTWAREKOMPOSITION DURCH PLUG & PLAY
PLUX.NET – SOFTWAREKOMPOSITION DURCH PLUG & PLAYPLUX.NET – SOFTWAREKOMPOSITION DURCH PLUG & PLAY
PLUX.NET – SOFTWAREKOMPOSITION DURCH PLUG & PLAY
 
Nagios Conference 2006 | Nagios Portalintegration by Julian Hein
Nagios Conference 2006 |  Nagios Portalintegration by Julian HeinNagios Conference 2006 |  Nagios Portalintegration by Julian Hein
Nagios Conference 2006 | Nagios Portalintegration by Julian Hein
 
Nagios Conference 2007 | Eventverarbeitung mit Nagios by Michael Streb
Nagios Conference 2007 | Eventverarbeitung mit Nagios by Michael StrebNagios Conference 2007 | Eventverarbeitung mit Nagios by Michael Streb
Nagios Conference 2007 | Eventverarbeitung mit Nagios by Michael Streb
 
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
Robuste Design Systems mit Storybook und Angular: vom Konzept zur lebendigen ...
 

Drupal und twig

  • 1. Drupal 8 & Twig Drupal Usergroup Hannover 09.10.2012 The Twig logo is © 2010-2012 Sensio Labs
  • 2. {{ SteffenR }} ● Drupal - Developer bei ● HTML / CSS / JS seit 1999 ● PHP seit 2002 ● Drupal seit 2008 (Danke DUG-Hannover) ● 244597 auf drupal.org
  • 3. {{ twig }} liest sich auf jeden Fall interessant "The flexible, fast and secure template engine for PHP" "Twig is a modern template engine for PHP" "Symfony 2 PHP framework comes with a bundled support for Twig as default templating engine"
  • 4. {{ twig.description }} Was ist twig ? ● entwickelt von Armin Ronacher - als Phyton template-engine ● seit 2009 Default Template-Engine von Symfony2 (http://twig.sensiolabs.org/) ● erhältlich als Standalone-Lösung zur Einbindung in eigene PHP-basierte Lösungen ● basierend auf PHP5 - OOP-Templates ● das LESS/SASS für HTML :-)
  • 5. {{ drupal.twig }} #1499460 "I just wanted to let everyone know that I'm in support of rethinking the theme system. I'm also comfortable that the team will come up with a good solution." (Dries Buytaert, 18.04.2012) John Albin "We hand themers a loaded gun (PHP) and tell them to hammer in a nail with it. Oh, and be careful" (Drupalcon Denver)
  • 6. {{ phptemplate }} html.tpl.php Drupal 7 stark theme
  • 7. {{ twig }} html.twig Drupal 8 twig_stark theme
  • 8. {{ twig.advantages }} Vorteile von twig in Drupal ● mehr Sicherheit im Theming ● kein PHP/HTML Mix in Templates ● einfache Tag-basierte Syntax ● Wiederverwendbarkeit von Templates ● Vermeidung neuer Sicherheitslücken ● Integration in IDEs (Netbeans, vim, PHP- Storm etc..) ● gute Integration in Symfony2 - bringt beide Communities wieder ein Stück mehr zusammen
  • 9. {{ twig.disadvantages }} Nachteile von twig in Drupal ● steile Lernkurve (begrenzt auf Tag-Syntax) ● neue Syntax für Drupal-Themer ● Performance-Bedenken ● Update Zyklen Drupal vs. Twig
  • 10. {{ twig.internals }} Wie funktioniert das Ganze im Hintergrund ? 1. Template laden a. lexer - Zerlegung in kleinere Einzelteile (Token- Stream) zum Parsen b. parser - Konvertierung des Token-Streams in Abstract-Syntax-Tree oder Node-Tree c. compiler - Generierung des PHP-Codes für die Ausgabe aus Node-Tree / AST 2. Ausgabe des Template http://twig.sensiolabs.org/doc/internals.html
  • 11. {{ twig.features }} Was bringt uns das konkret ? ● Filter ● Kontroll-Strukturen ● Template-Vererbung ● Makros ● Erweiterbarkeit durch OOP ● Sandbox ● erkennt automatisch den PHP-Datentyp - "bye bye Theme-Render Array of DOOM"
  • 12. {{ twig.variables }} print $var_name ? phptemplate twig region Template im Vergleich
  • 13. {{ twig.filters }} Ausgabe von Variablen beeinflussen ● PHP-Funktionen ohne PHP ○ date, replace, url_encode, capitalize, striptags, join, reverse, length, sort, merge ● Chaining von Filtern
  • 14. {{ twig.functions }} Ausgabe von Variablen beeinflussen ● range, cycle, constant, random, attribute, block, parent, dump, date http://twig.sensiolabs.org/doc/functions/index.html Ausgabe von Feld-Inhalten mit alternating CSS Classes
  • 15. {{ twig.controlstructures }} loops, conditions einfache for-Schleifen, if-else Konstkrukte
  • 16. {{ twig.controlstructures }} loops, conditions phptemplate twig bessere Lesbarkeit
  • 17. {{ twig.includes }} andere Templates einbinden Wiederverwendbarkeit von Templates
  • 18. {{ twig.includes }} kleiner geht immer... stark-theme - theme.inc breadcrumb.twig liest das Array breadcrumbs aus und zeigt es als Liste an - hier wird die Funktion join verwendet Statt der vielen Theme-Funktionen in Drupal 7 stehen uns nun direkt die die Templates zur Verfügung, natürlich auch über _preprocess-hooks geändert werden könnten
  • 19. {{ twig.inheritance }} html.twig Vererbung von Templates maintenance-page.twig selektives Überschreiben - Variable .mobi in page_preprocess gesetzt
  • 20. {{ twig.macros }} re-usable pieces of view-logic Einbindung des Sidebar Macros in bestehende Template Datei
  • 21. {{ twig.demo }} na dann mal los ... http://twig.local/ einfaches Twig-Theme erstellen
  • 22. {{ twig.questions }} <h1>Fragen</h1> <ul> {% for question in audience.questions %} <li>{{ question|e }}</li> {% endfor %} </ul>
  • 23. {{ twig.links }} ● Drupal 8 Theme and Twig Sprint http://drupal.org/sandbox/pixelmord/1750250 ● Twig-Documentation http://twig.sensiolabs.org/documentation ● Templating Engines in PHP - http://fabien.potencier. org/article/34/templating-engines-in-php ● Drupal with Twig templates http://drupalmotion.com/article/drupal-twig-templates ● [meta] new theme system http://drupal.org/node/1499460 ● What to Expect in Drupal 8 http://lyemium.com/content/what-expect-drupal-8
  • 24. {{ twig.end }} {{ thx|default("Danke für die Aufmerksamkeit") }} {{ speaker.name|default("Steffen Rühlmann") }} {{ speaker.web|default("www.port11.de") }} {{ speaker.twitter|default("_steffenr") }} {{ speaker.email|default("steffen@port11.de") }}