Twig & the new theme layer in Drupal 8

13,229 views

Published on

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

No Downloads
Views
Total views
13,229
On SlideShare
0
From Embeds
0
Number of Embeds
8,754
Actions
Shares
0
Downloads
55
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Twig & the new theme layer in Drupal 8

  1. 1. THE NEW THEME LAYER IN DRUPAL 8 Jen LamptonThursday, April 11, 2013
  2. 2. JEN LAMPTON @jenlampton on twitter “jenlampton” http://drupal.org/user/85586 www.jenlampton.com   if you forget my name, just Google “Drupal developer”Thursday, April 11, 2013
  3. 3. MY BACKGROUND   Building websites since 1997Thursday, April 11, 2013
  4. 4. MY BACKGROUND   Working with Drupal since 2006Thursday, April 11, 2013
  5. 5. MY BACKGROUND   Consider myself a developer.Thursday, April 11, 2013
  6. 6. MY BACKGROUND   Also a Drupal trainer.Thursday, April 11, 2013
  7. 7. MY BACKGROUND   Accidental Drupal 8 “initiative” leader.Thursday, April 11, 2013
  8. 8. MY “INITIATIVE” (unofficial)  Thursday, April 11, 2013
  9. 9. MY “INITIATIVE” (unofficial)   A new theme layer for Drupal 8Thursday, April 11, 2013
  10. 10. THEME LAYER? 1) Generation of Markup: •Template files (as close to HTML as possible) •Preparation of data (for insertion into template files) •Addition of assets (CSS + JS)  Thursday, April 11, 2013
  11. 11. THEME LAYER? 2) System of complete overrides: •Alteration of HTML in template files •Alteration of data (before insertion into templates) •Inclusion of additional assets   (or exclusion of existing assets)Thursday, April 11, 2013
  12. 12. THEME LAYER? 3) System of partial overrides: •Alteration of HTML in template files •Alteration of data (before insertion into templates) •Inclusion of additional assets   (or exclusion of existing assets) ...but only under certain circumstances.Thursday, April 11, 2013
  13. 13. DRUPAL 7 THEME LAYER but, we have this now!  Thursday, April 11, 2013
  14. 14. DRUPAL 7 THEME LAYER it looks like this (simplified)  Thursday, April 11, 2013
  15. 15. DRUPAL 7 THEME LAYER it feels like this  Thursday, April 11, 2013
  16. 16. HARD TO LEARN  Thursday, April 11, 2013
  17. 17. HARD TO LEARN for lots of reasons  Thursday, April 11, 2013
  18. 18. HARD TO LEARN Mixed data types   String, Object or Array?Thursday, April 11, 2013
  19. 19. HARD TO LEARN Different methods of printing variables   print or print render()?Thursday, April 11, 2013
  20. 20. HARD TO LEARN Two ways to override markup: TEMPLATE FILES THEME FUNCTIONS   When do I use what?Thursday, April 11, 2013
  21. 21. HARD   Too many template filesThursday, April 11, 2013
  22. 22. HARDER Way too many theme functions  Thursday, April 11, 2013
  23. 23. HARD TO LEARN Insecure.  Thursday, April 11, 2013
  24. 24. HARD TO LEARN Really, it’s insecure.  Thursday, April 11, 2013
  25. 25. HARD TO LEARN Drupal-specific   Drupalism noun Something that only exists in Drupal.Thursday, April 11, 2013
  26. 26. HARD TO LEARN   too many complex subsystemsThursday, April 11, 2013
  27. 27. HARD TO LEARN because 1. Mixed data types (strings, objects & arrays) 2. Different methods of printing variables (print, render) 3.Two ways to override markup: templates & theme fns   4. Too many template files & Too many theme functions 5. Insecure 6. Drupal-specific 7. A complex mix of subsystemsThursday, April 11, 2013
  28. 28. DRUPAL 8 THEME LAYER Principals to guide us. lb.com/twig#principlesThursday, April 11, 2013
  29. 29. DRUPAL 8 THEME LAYER Principals to guide us 1. Start with nothing Core default markup should strive for semantic simplicity, with few HTML elements, added only as needed lb.com/twig#principlesThursday, April 11, 2013
  30. 30. DRUPAL 8 THEME LAYER Principals to guide us 1. Start with nothing 2. Build from use cases We wont assume we know what people want or add features based on "What-if...?" We will think about the 90% of use cases. lb.com/twig#principlesThursday, April 11, 2013
  31. 31. DRUPAL 8 THEME LAYER Principals to guide us 1. Start with nothing 2. Build from use cases 3. Provide tools Give front-end experts a way to achieve specific goals; goals that apply to the remaining 10% of use cases. lb.com/twig#principlesThursday, April 11, 2013
  32. 32. DRUPAL 8 THEME LAYER Principals to guide us 1. Start with nothing 2. Build from use cases 3. Provide tools 4. Consolidate Dont make something new when something common can be used instead. (let’s create a Theme Component Library). lb.com/twig#principlesThursday, April 11, 2013
  33. 33. DRUPAL 8 THEME LAYER Principals to guide us 1. Start with nothing 2. Build from use cases 3. Provide tools 4. Consolidate 5. Visibility You should be able to see whats going on without reading docs. lb.com/twig#principlesThursday, April 11, 2013
  34. 34. DRUPAL 8 THEME LAYER Principals to guide us 1. Start with nothing 2. Build from use cases 3. Provide tools 4. Consolidate 5. Visibility 6. Consistency Do the same things everywhere, follow patterns. lb.com/twig#principlesThursday, April 11, 2013
  35. 35. DRUPAL 8 THEME LAYER Principals to guide us 1. Start with nothing 2. Build from use cases 3. Provide tools 4. Consolidate 5. Visibility 6. Consistency 7. Dont dumb it down Complexity should be reduced but not obscured. lb.com/twig#principlesThursday, April 11, 2013
  36. 36. DRUPAL 8 THEME LAYER Principals to guide us 1. Start with nothing 2. Build from use cases 3. Provide tools 4. Consolidate 5. Visibility 6. Consistency 7. Dont dumb it down 8. Organization should be driven by meaning and semantics over technical convenience Consider what an element means rather than how it structurally appears. Theme developers want to see markup in templates, not abstraction.Thursday, April 11, 2013
  37. 37. A NEW THEME ENGINE?Thursday, April 11, 2013
  38. 38. TWIG well documentedThursday, April 11, 2013
  39. 39. TWIG extensibleThursday, April 11, 2013
  40. 40. TWIG secureThursday, April 11, 2013
  41. 41. TWIG fastThursday, April 11, 2013
  42. 42. TWIG IDE integrationThursday, April 11, 2013
  43. 43. TWIG recognizable syntaxThursday, April 11, 2013
  44. 44. TWIG by the creator of Symfony, Fabien PotencierThursday, April 11, 2013
  45. 45. TWIG what does it look like?Thursday, April 11, 2013
  46. 46. TWIG what does it look like?Thursday, April 11, 2013
  47. 47. TWIG print with {{ }}Thursday, April 11, 2013
  48. 48. TWIG commands with {% %}Thursday, April 11, 2013
  49. 49. TWIG comments with {# #}Thursday, April 11, 2013
  50. 50. TWIG drill down into all variables with .Thursday, April 11, 2013
  51. 51. TWIG All markup is generated in template files.Thursday, April 11, 2013
  52. 52. D7 PAIN POINTS does Twig help? 1. Mixed data types 2. Different methods of printing variables 3.Two ways to override markup   4. Too many template files & theme functions 5. Insecure 6. Drupal-specific 7. A complex mix of subsystemsThursday, April 11, 2013
  53. 53. D7 PAIN POINTS does Twig help? 1. Mixed data types  Thursday, April 11, 2013
  54. 54. D7 PAIN POINTS does Twig help? 1. Mixed data types All template variables are accessed consistently:   node.nid content.linksThursday, April 11, 2013
  55. 55. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED  Thursday, April 11, 2013
  56. 56. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED 2. Different methods of printing variables  Thursday, April 11, 2013
  57. 57. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED 2. Different methods of printing variables Removed calls to render() from templates:   {{ node.nid }} {{ content.links }}Thursday, April 11, 2013
  58. 58. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED 2. Different methods of printing variables FIXED  Thursday, April 11, 2013
  59. 59. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED 2. Different methods of printing variables FIXED 3.Two ways to override markup  Thursday, April 11, 2013
  60. 60. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED 2. Different methods of printing variables FIXED 3.Two ways to override markup   All theme functions become templates. node.tpl.php becomes node.html.twig theme_table() becomes table.html.twigThursday, April 11, 2013
  61. 61. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED 2. Different methods of printing variables FIXED 3.Two ways to override markup FIXED  Thursday, April 11, 2013
  62. 62. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED 2. Different methods of printing variables FIXED 3.Two ways to override markup FIXED   4. Too many template files & theme functionsThursday, April 11, 2013
  63. 63. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED 2. Different methods of printing variables FIXED 3.Two ways to override markup FIXED   4. Too many template files & theme functions We’re working on this right nowThursday, April 11, 2013
  64. 64. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED 2. Different methods of printing variables FIXED 3.Two ways to override markup FIXED   4. Too many template files & theme functions @todoThursday, April 11, 2013
  65. 65. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED 2. Different methods of printing variables FIXED 3.Two ways to override markup FIXED   4. Too many template files & theme functions @todo 5. InsecureThursday, April 11, 2013
  66. 66. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED 2. Different methods of printing variables FIXED 3.Two ways to override markup FIXED   4. Too many template files & theme functions @todo 5. Insecure All variables are *automatically* sanitized and most PHP functions cannot be executed in template files.Thursday, April 11, 2013
  67. 67. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED 2. Different methods of printing variables FIXED 3.Two ways to override markup FIXED   4. Too many template files & theme functions @todo 5. Insecure FIXEDThursday, April 11, 2013
  68. 68. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED 2. Different methods of printing variables FIXED 3.Two ways to override markup FIXED   4. Too many template files & theme functions @todo 5. Insecure FIXED 6. Drupal-specificThursday, April 11, 2013
  69. 69. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED 2. Different methods of printing variables FIXED 3.Two ways to override markup FIXED   4. Too many template files & theme functions @todo 5. Insecure FIXED 6. Drupal-specific Twig is used elsewhere on the web is syntactically similar to other languages and looks a lot more like HTML.Thursday, April 11, 2013
  70. 70. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED 2. Different methods of printing variables FIXED 3.Two ways to override markup FIXED   4. Too many template files & theme functions @todo 5. Insecure FIXED 6. Drupal-specific FIXEDThursday, April 11, 2013
  71. 71. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED 2. Different methods of printing variables FIXED 3.Two ways to override markup FIXED   4. Too many template files & theme functions @todo 5. Insecure FIXED 6. Drupal-specific FIXED 7. A complex mix of subsystemsThursday, April 11, 2013
  72. 72. D7 THEME LAYERThursday, April 11, 2013
  73. 73. D8 IMPROVEMENTS remove theme functions (and overrides) entirely.Thursday, April 11, 2013
  74. 74. D8 IMPROVEMENTS remove process.Thursday, April 11, 2013
  75. 75. D8 IMPROVEMENTS remove render.Thursday, April 11, 2013
  76. 76. D8 IMPROVEMENTS remove page alter?Thursday, April 11, 2013
  77. 77. D9 IMPROVEMENTS remove preprocess?Thursday, April 11, 2013
  78. 78. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED 2. Different methods of printing variables FIXED 3.Two ways to override markup FIXED   4. Too many template files & theme functions @todo 5. Insecure FIXED 6. Drupal-specific FIXED 7. A complex mix of subsystems We can remove all theme functions, render, process & (maybe) preprocess too.Thursday, April 11, 2013
  79. 79. D7 PAIN POINTS does Twig help? 1. Mixed data types FIXED 2. Different methods of printing variables FIXED 3.Two ways to override markup FIXED   4. Too many template files & theme functions @todo 5. Insecure FIXED 6. Drupal-specific FIXED 7. A complex mix of subsystems @todoThursday, April 11, 2013
  80. 80. D7 PAIN POINTS does Twig help?  Thursday, April 11, 2013
  81. 81. D7 PAIN POINTS does Twig help? YES!!!  Thursday, April 11, 2013
  82. 82. TWIG: OTHER WINSThursday, April 11, 2013
  83. 83. TWIG: OTHER WINS less code than PHP functionsThursday, April 11, 2013
  84. 84. TWIG: OTHER WINS less code than PHP functions D7 D8 theme_image becomes image.html.twigThursday, April 11, 2013
  85. 85. TWIG less code than PHP functions D7 D8 theme_username becomes username.html.twigThursday, April 11, 2013
  86. 86. TWIG less code than PHP functions D7 D8 theme_link becomes link.html.twigThursday, April 11, 2013
  87. 87. D7 lots less code than PHP functions D8 theme_item_list becomes item_list.html.twigThursday, April 11, 2013
  88. 88. TWIG: OTHER WINS Awesome template inspection.Thursday, April 11, 2013
  89. 89. TWIG: OTHER WINS Awesome template inspection. (“devel themer” in core)Thursday, April 11, 2013
  90. 90. TWIG: OTHER WINS Awesome variable inspection.Thursday, April 11, 2013
  91. 91. TWIG: OTHER WINS Awesome variable inspection. (devel’s dpm() in core)Thursday, April 11, 2013
  92. 92. TWIG: OTHER WINS Template inheritanceThursday, April 11, 2013
  93. 93. TWIG: OTHER WINS Template inheritance comment-wrapper.html.twig beforeThursday, April 11, 2013
  94. 94. TWIG: OTHER WINS Template inheritance comment-wrapper.html.twig afterThursday, April 11, 2013
  95. 95. TWIG: OTHER WINS Template inheritance comment-wrapper--forum.html.twig (child template)Thursday, April 11, 2013
  96. 96. TWIG: OTHER WINS Possible performance gains (Much TBD)Thursday, April 11, 2013
  97. 97. TWIG: OTHER WINS Possible performance gains (Much TBD) • PHPtemplate reads files from disk on every use (or stat()s them with APC) • Twig templates are read once & compiled into classesThursday, April 11, 2013
  98. 98. TWIG: OTHER WINS Possible performance gains (Much TBD) • PHPtemplate reads files from disk on every use (or stat()s them with APC) • Twig templates are read once & compiled into classes Rendering should get much faster when the same content element appears multiple times on the page.Thursday, April 11, 2013
  99. 99. TWIG: OTHER WINS Possible performance gains (Much TBD) • PHPtemplate reads files from disk on every use (or stat()s them with APC) • Twig templates are read once & compiled into classes Rendering should get much faster when the same content element appears multiple times on the page. Consolidating many similar templates will result in an additional gain.Thursday, April 11, 2013
  100. 100. TWIG: OTHER WINS In-browser template editing finally safe.Thursday, April 11, 2013
  101. 101. TWIG: OTHER WINS In-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!Thursday, April 11, 2013
  102. 102. TWIG: OTHER WINS In-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) will finally be safe to use.Thursday, April 11, 2013
  103. 103. TWIG: OTHER WINS In-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) will finally be safe to use. In-browser template editing is something WordPress users have been asking of Drupal for a very long time.Thursday, April 11, 2013
  104. 104. TWIG: OTHER WINS Twig template files can be used on the front end, too.Thursday, April 11, 2013
  105. 105. TWIG: OTHER WINS Twig 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 in AJAX callbacks.Thursday, April 11, 2013
  106. 106. TWIG: OTHER WINS Twig 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 in AJAX callbacks. We can use other open source libraries like TwigJS. (https://github.com/schmittjoh/twig.js)Thursday, April 11, 2013
  107. 107. TWIG: OTHER WINS 2-way communication between UI and code.Thursday, April 11, 2013
  108. 108. TWIG: OTHER WINS 2-way communication between UI and code. No broken UIs.Thursday, April 11, 2013
  109. 109. TWIG: OTHER WINS 2-way communication between UI and code. No broken UIs. Template files can be created first, and the Drupal site can build itself* based on the presence and location of variables in the templates. *within reasonThursday, April 11, 2013
  110. 110. THE NEW THEME LAYER IN DRUPAL 8 looks pretty awesome, right?Thursday, April 11, 2013
  111. 111. QUESTIONS?Thursday, April 11, 2013
  112. 112. HELP US GET THERE we need your help! we could be “done” in 1.5 weeks http://drupal.org/node/1757550 IRC: #drupal-twigThursday, April 11, 2013
  113. 113. THE NEW THEME LAYER IN DRUPAL 8 Jen Lampton ~ @jenlampton www.jenlampton.comThursday, April 11, 2013
  114. 114. photo credits: lolcat-flexible http://cheezburger.com/2679924736 anything is possible pebbles http://www.invergordontours.com/aip.html lolcat questionmark http://icanhascheezburger.com/2007/10/31/11197/ wheel-reinvented http://www.brainwads.net/drewhawkins/2012/01/dont-re-invent-the-wheel-make-something-better/ objects http://2teachers1classroom.blogspot.com/2009_02_01_archive.html shapes http://englishclass.jp/reading/topic/For_Screening_Purposes_Only secure http://blog.stratepedia.org/2010/06/03/what-is-a-secure-site/ consistency http://icsigns.org/press/2010/03/23/consistency-staying-on-the-mark/ twig bird comic http://s302.photobucket.com/albums/nn105/walkseva/?action=view&current=thebirdneedsthattwig.gif&currenttag=bird%20park%20twig%20comic%20need%20it twig docs screenshots http://twig.sensiolabs.org/documentation twig speed graphs http://phpcomparison.net/ python icon http://python-hosting.org/ ruby icon http://itmediaconnect.ro/en/web django logo http://py-arahat.blogspot.com/2010/08/django-vs-pylons.html symfony logo http://symfony.com/logo scotch glass http://www.thespir.it/articles/scotch-101/?viewall=1 speech bubble http://ljtfash.blogspot.com/2012/10/youre-beautiful-no-matter-what-they-say.htmlThursday, April 11, 2013

×