A New Theme Layer for Drupal 8

6,217 views

Published on

Drupal 7's theme layer suffered from "Arrays of Doom" and the impenetrable render(). After having to learn and use these tools, the community has rebelled and decided we need to make some major changes in Drupal 8.

Come learn about Twig, a new Symfonic templating language we can use to decrease Drupal's learning curve and increase security on every Drupal site.

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

No Downloads
Views
Total views
6,217
On SlideShare
0
From Embeds
0
Number of Embeds
95
Actions
Shares
0
Downloads
40
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

A New Theme Layer for Drupal 8

  1. 1. A NEW THEME LAYER FOR DRUPAL 8 Jen Lampton ~ @jenlampton Carl Wiedemann ~ @c4rlSaturday, July 21, 2012
  2. 2. WHO ARE WE?Saturday, July 21, 2012
  3. 3. I AM c4rl (Carl Wiedemann) working with Drupal (since D5) training instructor (since D6) drupal.org redesign team I care a lot about _?_Saturday, July 21, 2012
  4. 4. I AM jenlampton (Jen Lampton) working with Drupal (since D4.7) training instructor (since D6) conrib maintainer (youtube, more) since D5 I care a lot about usability & learnabilitySaturday, July 21, 2012
  5. 5. WHO ARE YOU?Saturday, July 21, 2012
  6. 6. YOU ARE: Theme developers? (D7? D6? D5?)Saturday, July 21, 2012
  7. 7. YOU ARE: Theme developers? (D7? D6? D5?) New to Drupal? (just want to know what the heck is going on in D8)Saturday, July 21, 2012
  8. 8. YOU ARE: Theme developers? (D7? D6? D5?) New to Drupal? (just want to know what the heck is going on in D8) Drupal Experts? (also want to know what the heck is going on in D8)Saturday, July 21, 2012
  9. 9. DRUPAL 8 : A NEW THEME LAYERSaturday, July 21, 2012
  10. 10. DRUPAL 8 : A NEW THEME LAYER (probably)Saturday, July 21, 2012
  11. 11. WHY?Saturday, July 21, 2012
  12. 12. DRUPAL 7 (remember how some of you said that you had built themes for Drupal 7?)Saturday, July 21, 2012
  13. 13. DRUPAL 7: POSITIVE  Saturday, July 21, 2012
  14. 14. DRUPAL 7: POSITIVE   flexibleSaturday, July 21, 2012
  15. 15. DRUPAL 7: POSITIVE   unified data structures everywhereSaturday, July 21, 2012
  16. 16. DRUPAL 7: POSITIVE   anyone?Saturday, July 21, 2012
  17. 17. DRUPAL 7: NEGATIVE  Saturday, July 21, 2012
  18. 18. DRUPAL 7: NEGATIVE   Drupal only (weird) syntaxSaturday, July 21, 2012
  19. 19. DRUPAL 7: NEGATIVE   Object or Array?Saturday, July 21, 2012
  20. 20. DRUPAL 7: NEGATIVE   print or print render() ?Saturday, July 21, 2012
  21. 21. DRUPAL 7: NEGATIVE   complex mix of subsystemsSaturday, July 21, 2012
  22. 22. DRUPAL 7: NEGATIVE   PHP is insecureSaturday, July 21, 2012
  23. 23. DRUPAL 7: NEGATIVE   Too many template filesSaturday, July 21, 2012
  24. 24. DRUPAL 7: NEGATIVE   prone to bugsSaturday, July 21, 2012
  25. 25. DRUPAL 7: NEGATIVE   Drupal 7 is too hard to learn!Saturday, July 21, 2012
  26. 26. DRUPAL 8 what do we want?Saturday, July 21, 2012
  27. 27. DRUPAL 8 what do we want? Something proudly found elsewhereSaturday, July 21, 2012
  28. 28. DRUPAL 8 what do we want? ObjectsSaturday, July 21, 2012
  29. 29. DRUPAL 8 what do we want? Objects (but not in the templates)Saturday, July 21, 2012
  30. 30. DRUPAL 8 what do we want? SecureSaturday, July 21, 2012
  31. 31. DRUPAL 8 what do we want? The right templatesSaturday, July 21, 2012
  32. 32. DRUPAL 8 what do we want? ConsistencySaturday, July 21, 2012
  33. 33. TWIGSaturday, July 21, 2012
  34. 34. TWIG A modern template engine for PHP. http://twig.sensiolabs.orgSaturday, July 21, 2012
  35. 35. TWIG what’s so great about it? • well documented • extensible • secure • well tested • IDE integration • recognizable syntax • Python (django) • JS (TwigJS) •Ruby (Liquid) •by Symfony’s author, Fabien PotencierSaturday, July 21, 2012
  36. 36. TWIG what does it look like?Saturday, July 21, 2012
  37. 37. TWIG what does it look like? print with {{ }}Saturday, July 21, 2012
  38. 38. TWIG what does it look like? commands with {% %}Saturday, July 21, 2012
  39. 39. TWIG what does it look like? comments with {# #}Saturday, July 21, 2012
  40. 40. TWIG what does it look like? simple and intuitiveSaturday, July 21, 2012
  41. 41. INTERLUDE: attributes attributes are messySaturday, July 21, 2012
  42. 42. INTERLUDE: attributes HTML5 attribute types: String Boolean Enumerated attributes are messySaturday, July 21, 2012
  43. 43. INTERLUDE: attributes We need attributes to be “drillable” attributes or attributes.class or attributes.idSaturday, July 21, 2012
  44. 44. INTERLUDE: attributes PHP5 to the rescue! ArrayAccess allows objects to be treated as arrays __toString allows “flattening” of arrays or objects into HTML strings (almost)Saturday, July 21, 2012
  45. 45. INTERLUDE: attributes but, this has nothing to do with TWIG. so let’s do it now: http://drupal.org/node/1290694Saturday, July 21, 2012
  46. 46. TWIG how would it work? all theme functions become template files. a single way to override markup!Saturday, July 21, 2012
  47. 47. TWIG D7 D8 theme_username becomes username.twigSaturday, July 21, 2012
  48. 48. TWIG D7 D8 theme_image becomes image.twigSaturday, July 21, 2012
  49. 49. TWIG D7 D8 theme_link becomes link.twigSaturday, July 21, 2012
  50. 50. TWIG D7 D8 theme_item_list beomes item_list.twigSaturday, July 21, 2012
  51. 51. TWIG how would it work? D7 D8 more like Drupal 6!Saturday, July 21, 2012
  52. 52. TWIG how would it work? there’s a lot we still don’t know.Saturday, July 21, 2012
  53. 53. TWIG why is this good?Saturday, July 21, 2012
  54. 54. TWIG why is this good? remember the complexity of Drupal 7?Saturday, July 21, 2012
  55. 55. TWIG why is this good? look what would happen in Drupal 8.Saturday, July 21, 2012
  56. 56. TWIG where does this fit in with SCOTCH? The “Blocks everywhere” initiative complicates thingsSaturday, July 21, 2012
  57. 57. TWIG where does this fit in with SCOTCH? Blocks in D6 (in red)Saturday, July 21, 2012
  58. 58. TWIG where does this fit in with SCOTCH? Blocks in D7 (in red)Saturday, July 21, 2012
  59. 59. TWIG where does this fit in with SCOTCH? Blocks in D8 (in red)Saturday, July 21, 2012
  60. 60. TWIG while we’re at it... ...let’s clean up the template files!Saturday, July 21, 2012
  61. 61. TWIG “Learnability” - Easier to learn than PHP - Consistent - SecureSaturday, July 21, 2012
  62. 62. DISCUSS!Saturday, July 21, 2012
  63. 63. A NEW THEME LAYER FOR DRUPAL 8 @jenlampton | http://www.jenlampton.com @c4rl | http://www.c4rl.wsSaturday, July 21, 2012
  64. 64. photo credits: lolcat-wut: http://www.funnyjunk.com/funny_pictures/1152056/Dude/ lolcat-flexible http://icanhascheezburger.com/2008/10/24/funny-pictures-fexlibility-i-haz-it/ lolcat questionmark http://icanhascheezburger.com/2007/10/31/11197/ questionmark http://fr.wikipedia.org/wiki/Fichier:Question_mark_3d.png 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 scotch http://www.thespir.it/articles/scotch-101/?viewall=1 twig http://galletly.blogspot.com/2009/10/twig.htmlSaturday, July 21, 2012

×