DRUPAL 8TEMPLATING WITHTWIG
DRUPAL 7: POSITIVEflexible
DRUPAL 7: POSITIVEunified~ish data structures everywhere
DRUPAL 7: POSITIVEanything is possible
DRUPAL 7: NEGATIVEDrupal only (weird) syntax
DRUPAL 7: NEGATIVEObject or Array?
DRUPAL 7: NEGATIVEprint or print render()?
DRUPAL 7: NEGATIVEPHP is insecure
DRUPAL 7: NEGATIVEPHP is insecure
DRUPAL 7: NEGATIVEToo many template files
DRUPAL 7: NEGATIVEToo many theme functions
DRUPAL 7: NEGATIVEcomplex mix of subsystems
HARD TO LEARNbecause1. Mixed data types (strings, objects & arrays)2. Different methods of printing variables (print, rend...
DRUPAL 8 THEME LAYERlet’s fix itAccidental Drupal 8 “initiative” leader
DRUPAL 8 THEME LAYERPrincipals to guide us1. Start with nothing
DRUPAL 8 THEME LAYERPrincipals to guide us1. Start with nothing2. Build from use cases
DRUPAL 8 THEME LAYERPrincipals to guide us1. Start with nothing2. Build from use cases3. Provide tools
DRUPAL 8 THEME LAYERPrincipals to guide us1. Start with nothing2. Build from use cases3. Provide tools4. Consolidate
DRUPAL 8 THEME LAYERPrincipals to guide us1. Start with nothing2. Build from use cases3. Provide tools4. Consolidate5. Vis...
DRUPAL 8 THEME LAYERPrincipals to guide us1. Start with nothing2. Build from use cases3. Provide tools4. Consolidate5. Vis...
DRUPAL 8 THEME LAYERPrincipals to guide us1. Start with nothing2. Build from use cases3. Provide tools4. Consolidate5. Vis...
TWIGwell documented
TWIGextensible
TWIGsecure
TWIGfast
TWIGIDE integration
TWIGrecognizable syntax
TWIGby Symfony’s author, Fabien Potencier
TWIGprint with {{ }}
TWIGcommands with {% %}
TWIGcomments with {# #}
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays)2. Different methods of printing variables (pr...
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays)
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays)All template variables are accessedconsistentl...
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variabl...
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variabl...
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variabl...
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variabl...
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variabl...
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variabl...
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variabl...
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variabl...
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variabl...
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variabl...
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variabl...
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variabl...
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variabl...
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variabl...
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variabl...
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variabl...
D7 THEME LAYER
D8 IMPROVEMENTSremove theme functions (and overrides) entirely
D8 IMPROVEMENTSremove process.
D8 IMPROVEMENTSremove render.
D8 IMPROVEMENTSremove page alter?
D9 IMPROVEMENTSremove preprocess?
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variabl...
D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variabl...
D7 PAIN POINTSdoes Twig help?YES!!!
TWIG: OTHER WINSless code than PHP functionsD7D8theme_image becomes image.html.twig
TWIG: OTHER WINSless code than PHP functionstheme_username becomes username.html.twigD7D8
TWIG: OTHER WINSless code than PHP functionstheme_link becomes link.html.twigD7D8
TWIG: OTHER WINSlots less code than PHP functionstheme_item_list becomesitem_list.html.twigD7D8
TWIG: OTHER WINSAwesome template inspection(“devel themer” in core)
TWIG: OTHER WINSAwesome variable inspection(devel’s dpm() in core)
TWIG: OTHER WINSTemplate inheritancecomment-wrapper.html.twig before
TWIG: OTHER WINSTemplate inheritancecomment-wrapper.html.twig after
TWIG: OTHER WINSTemplate inheritancecomment-wrapper--forum.html.twig(child template)
TWIG: OTHER WINSPossible performance gains (Much TBD)
TWIG: OTHER WINSPossible performance gains (Much TBD)• PHPtemplate reads files from disk on every use(or stat()s them with...
TWIG: OTHER WINSPossible performance gains (Much TBD)• PHPtemplate reads files from disk on every use(or stat()s them with...
TWIG: OTHER WINSPossible performance gains (Much TBD)• PHPtemplate reads files from disk on every use(or stat()s them with...
TWIG: OTHER WINSIn-browser template editing finally safe.
TWIG: OTHER WINSIn-browser template editing finally safe.• Saving PHP code in the database is a HUGE no-no.• Twig is not P...
TWIG: OTHER WINSIn-browser template editing finally safe.• Saving PHP code in the database is a HUGE no-no.• Twig is not P...
TWIG: OTHER WINSIn-browser template editing finally safe.• Saving PHP code in the database is a HUGE no-no.• Twig is not P...
TWIG: OTHER WINSTwig template files can be used on the front end, too.
TWIG: OTHER WINSTwig template files can be used on the front end, too.One template can return markup for both your PHP-gen...
TWIG: OTHER WINSTwig template files can be used on the front end, too.One template can return markup for both your PHP-gen...
TWIG: OTHER WINS2-way communication between UI and code.
TWIG: OTHER WINS2-way communication between UI and code.No broken UIs.
TWIG: OTHER WINS2-way communication between UI and code.No broken UIs.Template files can be created first, and the Drupal ...
D8 THEME ENGINE PROFILING
WARMING OF TWIG IN D814%86%YesNo
HOT THEMESFontFolioZURB Foundation
ZURB Foundationhttp://g.ua/WrKG
Links1. Theming Drupal 82. Twig documentation (RU)3. Twig coding standards4. DrupalCon Portland 2013: USING TWIG: THENEW T...
Ask meTaras OmelianenkoCEO+380 97 508 84 74Skype: taras.omelyanenkot.omelianenko@dicslab.comwww.dicslab.com
Upcoming SlideShare
Loading in...5
×

Drupal 8 templating with twig

5,183

Published on

Published in: Business, Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,183
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Drupal 8 templating with twig"

  1. 1. DRUPAL 8TEMPLATING WITHTWIG
  2. 2. DRUPAL 7: POSITIVEflexible
  3. 3. DRUPAL 7: POSITIVEunified~ish data structures everywhere
  4. 4. DRUPAL 7: POSITIVEanything is possible
  5. 5. DRUPAL 7: NEGATIVEDrupal only (weird) syntax
  6. 6. DRUPAL 7: NEGATIVEObject or Array?
  7. 7. DRUPAL 7: NEGATIVEprint or print render()?
  8. 8. DRUPAL 7: NEGATIVEPHP is insecure
  9. 9. DRUPAL 7: NEGATIVEPHP is insecure
  10. 10. DRUPAL 7: NEGATIVEToo many template files
  11. 11. DRUPAL 7: NEGATIVEToo many theme functions
  12. 12. DRUPAL 7: NEGATIVEcomplex mix of subsystems
  13. 13. HARD TO LEARNbecause1. Mixed data types (strings, objects & arrays)2. Different methods of printing variables (print, render)3. Two ways to override markup: templates & theme fns4. Too many template files & Too many theme fns5. Insecure6. Drupal-specific7. A complex mix of subsystems
  14. 14. DRUPAL 8 THEME LAYERlet’s fix itAccidental Drupal 8 “initiative” leader
  15. 15. DRUPAL 8 THEME LAYERPrincipals to guide us1. Start with nothing
  16. 16. DRUPAL 8 THEME LAYERPrincipals to guide us1. Start with nothing2. Build from use cases
  17. 17. DRUPAL 8 THEME LAYERPrincipals to guide us1. Start with nothing2. Build from use cases3. Provide tools
  18. 18. DRUPAL 8 THEME LAYERPrincipals to guide us1. Start with nothing2. Build from use cases3. Provide tools4. Consolidate
  19. 19. DRUPAL 8 THEME LAYERPrincipals to guide us1. Start with nothing2. Build from use cases3. Provide tools4. Consolidate5. Visibility
  20. 20. DRUPAL 8 THEME LAYERPrincipals to guide us1. Start with nothing2. Build from use cases3. Provide tools4. Consolidate5. Visibility6. Consistency
  21. 21. DRUPAL 8 THEME LAYERPrincipals to guide us1. Start with nothing2. Build from use cases3. Provide tools4. Consolidate5. Visibility6. Consistency7. Dont dumb it down8. Organization should be driven by meaning andsemantics over technical convenience
  22. 22. TWIGwell documented
  23. 23. TWIGextensible
  24. 24. TWIGsecure
  25. 25. TWIGfast
  26. 26. TWIGIDE integration
  27. 27. TWIGrecognizable syntax
  28. 28. TWIGby Symfony’s author, Fabien Potencier
  29. 29. TWIGprint with {{ }}
  30. 30. TWIGcommands with {% %}
  31. 31. TWIGcomments with {# #}
  32. 32. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays)2. Different methods of printing variables (print, render)3. Two ways to override markup: templates & theme fns4. Too many template files & Too many theme fns5. Insecure6. Drupal-specific7. A complex mix of subsystems
  33. 33. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays)
  34. 34. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays)All template variables are accessedconsistently:node.nidcontent.links
  35. 35. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED
  36. 36. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variables (print, render)
  37. 37. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variables (print, render)Removed calls to render() fromtemplates:{{ node.nid }}{{ content.links }}
  38. 38. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variables FIXED
  39. 39. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variables FIXED3. Two ways to override markup
  40. 40. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variables FIXED3. Two ways to override markupAll theme functions become templates.node.tpl.php becomes node.html.twigtheme_table() becomes table.html.twig
  41. 41. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variables FIXED3. Two ways to override markup FIXED
  42. 42. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variables FIXED3. Two ways to override markup FIXED4. Too many template files & Too many theme
  43. 43. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variables FIXED3. Two ways to override markup FIXED4. Too many template files & Too many themeWe’re working on this right now
  44. 44. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variables FIXED3. Two ways to override markup FIXED4. Too many template files & Too many theme @todo5. Insecure
  45. 45. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variables FIXED3. Two ways to override markup FIXED4. Too many template files & Too many theme @todo5. InsecureAll variables are *automatically* sanitizedand most PHP functionscannot be executed in template files.
  46. 46. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variables FIXED3. Two ways to override markup FIXED4. Too many template files & Too many theme @todo5. Insecure FIXED
  47. 47. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variables FIXED3. Two ways to override markup FIXED4. Too many template files & Too many theme @todo5. Insecure FIXED6. Drupal-specific
  48. 48. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variables FIXED3. Two ways to override markup FIXED4. Too many template files & Too many theme @todo5. Insecure FIXED6. Drupal-specificTwig is used elsewhere on the webis syntactically similar to other languagesand looks a lot more like HTML.
  49. 49. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variables FIXED3. Two ways to override markup FIXED4. Too many template files & Too many theme @todo5. Insecure FIXED6. Drupal-specific FIXED
  50. 50. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variables FIXED3. Two ways to override markup FIXED4. Too many template files & Too many theme @todo5. Insecure FIXED6. Drupal-specific FIXED7. A complex mix of subsystems
  51. 51. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variables FIXED3. Two ways to override markup FIXED4. Too many template files & Too many theme @todo5. Insecure FIXED6. Drupal-specific FIXED7. A complex mix of subsystems
  52. 52. D7 THEME LAYER
  53. 53. D8 IMPROVEMENTSremove theme functions (and overrides) entirely
  54. 54. D8 IMPROVEMENTSremove process.
  55. 55. D8 IMPROVEMENTSremove render.
  56. 56. D8 IMPROVEMENTSremove page alter?
  57. 57. D9 IMPROVEMENTSremove preprocess?
  58. 58. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variables FIXED3. Two ways to override markup FIXED4. Too many template files & Too many theme @todo5. Insecure FIXED6. Drupal-specific FIXED7. A complex mix of subsystemsWe can remove all theme functions, render,process & (maybe) preprocess too.
  59. 59. D7 PAIN POINTSdoes Twig help?1. Mixed data types (strings, objects & arrays) FIXED2. Different methods of printing variables FIXED3. Two ways to override markup FIXED4. Too many template files & Too many theme @todo5. Insecure FIXED6. Drupal-specific FIXED7. A complex mix of subsystems @todo
  60. 60. D7 PAIN POINTSdoes Twig help?YES!!!
  61. 61. TWIG: OTHER WINSless code than PHP functionsD7D8theme_image becomes image.html.twig
  62. 62. TWIG: OTHER WINSless code than PHP functionstheme_username becomes username.html.twigD7D8
  63. 63. TWIG: OTHER WINSless code than PHP functionstheme_link becomes link.html.twigD7D8
  64. 64. TWIG: OTHER WINSlots less code than PHP functionstheme_item_list becomesitem_list.html.twigD7D8
  65. 65. TWIG: OTHER WINSAwesome template inspection(“devel themer” in core)
  66. 66. TWIG: OTHER WINSAwesome variable inspection(devel’s dpm() in core)
  67. 67. TWIG: OTHER WINSTemplate inheritancecomment-wrapper.html.twig before
  68. 68. TWIG: OTHER WINSTemplate inheritancecomment-wrapper.html.twig after
  69. 69. TWIG: OTHER WINSTemplate inheritancecomment-wrapper--forum.html.twig(child template)
  70. 70. TWIG: OTHER WINSPossible performance gains (Much TBD)
  71. 71. TWIG: OTHER WINSPossible performance gains (Much TBD)• PHPtemplate reads files from disk on every use(or stat()s them with APC)• Twig templates are read once & compiled intoclasses
  72. 72. TWIG: OTHER WINSPossible performance gains (Much TBD)• PHPtemplate reads files from disk on every use(or stat()s them with APC)• Twig templates are read once & compiled intoclassesRendering should get much faster when the samecontent element appears multiple times on thepage.
  73. 73. TWIG: OTHER WINSPossible performance gains (Much TBD)• PHPtemplate reads files from disk on every use(or stat()s them with APC)• Twig templates are read once & compiled intoclassesRendering should get much faster when the samecontent element appears multiple times on thepage.Consolidating many similar templates will result inan additional gain.
  74. 74. TWIG: OTHER WINSIn-browser template editing finally safe.
  75. 75. TWIG: OTHER WINSIn-browser template editing finally safe.• Saving PHP code in the database is a HUGE no-no.• Twig is not PHP, and is safe to store!
  76. 76. TWIG: OTHER WINSIn-browser template editing finally safe.• Saving PHP code in the database is a HUGE no-no.• Twig is not PHP, and is safe to store!Modules like ‘Contemplate’ (Content templates) willfinally be safe to use.
  77. 77. TWIG: OTHER WINSIn-browser template editing finally safe.• Saving PHP code in the database is a HUGE no-no.• Twig is not PHP, and is safe to store!Modules like ‘Contemplate’ (Content templates) willfinally be safe to use.In-browser template editing is something WordPressusers have been asking of Drupal for a very long time.
  78. 78. TWIG: OTHER WINSTwig template files can be used on the front end, too.
  79. 79. TWIG: OTHER WINSTwig template files can be used on the front end, too.One template can return markup for both your PHP-generated pages, as well as pages generated vi JS inAJAX callbacks.
  80. 80. TWIG: OTHER WINSTwig template files can be used on the front end, too.One template can return markup for both your PHP-generated pages, as well as pages generated vi JS inAJAX callbacks.We can use other open source libraries like TwigJS.(https://github.com/schmittjoh/twig.js)
  81. 81. TWIG: OTHER WINS2-way communication between UI and code.
  82. 82. TWIG: OTHER WINS2-way communication between UI and code.No broken UIs.
  83. 83. TWIG: OTHER WINS2-way communication between UI and code.No broken UIs.Template files can be created first, and the Drupal sitecan build itself* based on the presence and location ofvariables in the templates.*within reason
  84. 84. D8 THEME ENGINE PROFILING
  85. 85. WARMING OF TWIG IN D814%86%YesNo
  86. 86. HOT THEMESFontFolioZURB Foundation
  87. 87. ZURB Foundationhttp://g.ua/WrKG
  88. 88. Links1. Theming Drupal 82. Twig documentation (RU)3. Twig coding standards4. DrupalCon Portland 2013: USING TWIG: THENEW TEMPLATE ENGINE IN DRUPAL 8
  89. 89. Ask meTaras OmelianenkoCEO+380 97 508 84 74Skype: taras.omelyanenkot.omelianenko@dicslab.comwww.dicslab.com

×