a new theme layer for drupal 8
DESCRIPTION
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.TRANSCRIPT
![Page 1: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/1.jpg)
A NEW THEME LAYERFOR DRUPAL 8
Jen Lampton ~ @jenlamptonCarl Wiedemann ~ @c4rl
Saturday, July 21, 2012
![Page 2: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/2.jpg)
WHO ARE WE?
Saturday, July 21, 2012
![Page 3: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/3.jpg)
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
![Page 4: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/4.jpg)
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 & learnability
Saturday, July 21, 2012
![Page 5: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/5.jpg)
WHO ARE YOU?
Saturday, July 21, 2012
![Page 6: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/6.jpg)
YOU ARE:
Theme developers?(D7? D6? D5?)
Saturday, July 21, 2012
![Page 7: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/7.jpg)
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
![Page 8: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/8.jpg)
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
![Page 9: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/9.jpg)
DRUPAL 8 :A NEW THEME LAYER
Saturday, July 21, 2012
![Page 10: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/10.jpg)
DRUPAL 8 :A NEW THEME LAYER
(probably)
Saturday, July 21, 2012
![Page 11: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/11.jpg)
WHY?
Saturday, July 21, 2012
![Page 12: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/12.jpg)
DRUPAL 7
(remember how some of you said that you had built themes for Drupal 7?)
Saturday, July 21, 2012
![Page 13: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/13.jpg)
DRUPAL 7: POSITIVE
Saturday, July 21, 2012
![Page 14: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/14.jpg)
DRUPAL 7: POSITIVE
flexible
Saturday, July 21, 2012
![Page 15: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/15.jpg)
DRUPAL 7: POSITIVE
unified data structures everywhere
Saturday, July 21, 2012
![Page 16: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/16.jpg)
DRUPAL 7: POSITIVE
anyone?
Saturday, July 21, 2012
![Page 17: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/17.jpg)
DRUPAL 7: NEGATIVE
Saturday, July 21, 2012
![Page 18: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/18.jpg)
DRUPAL 7: NEGATIVE
Drupal only (weird) syntax
Saturday, July 21, 2012
![Page 19: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/19.jpg)
DRUPAL 7: NEGATIVE
Object or Array?
Saturday, July 21, 2012
![Page 20: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/20.jpg)
DRUPAL 7: NEGATIVE
print or print render() ?
Saturday, July 21, 2012
![Page 21: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/21.jpg)
DRUPAL 7: NEGATIVE
complex mix of subsystems
Saturday, July 21, 2012
![Page 22: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/22.jpg)
DRUPAL 7: NEGATIVE
PHP is insecure
Saturday, July 21, 2012
![Page 23: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/23.jpg)
DRUPAL 7: NEGATIVE
Too many template files
Saturday, July 21, 2012
![Page 24: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/24.jpg)
DRUPAL 7: NEGATIVE
prone to bugs
Saturday, July 21, 2012
![Page 25: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/25.jpg)
DRUPAL 7: NEGATIVE
Drupal 7 is too hard to learn!
Saturday, July 21, 2012
![Page 26: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/26.jpg)
what do we want?
DRUPAL 8
Saturday, July 21, 2012
![Page 27: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/27.jpg)
what do we want?
DRUPAL 8
Something proudly found elsewhere
Saturday, July 21, 2012
![Page 28: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/28.jpg)
what do we want?
DRUPAL 8
Objects
Saturday, July 21, 2012
![Page 29: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/29.jpg)
what do we want?
DRUPAL 8
Objects(but not in the templates)
Saturday, July 21, 2012
![Page 30: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/30.jpg)
what do we want?
DRUPAL 8
Secure
Saturday, July 21, 2012
![Page 31: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/31.jpg)
what do we want?
DRUPAL 8
The right templates
Saturday, July 21, 2012
![Page 32: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/32.jpg)
what do we want?
DRUPAL 8
Consistency
Saturday, July 21, 2012
![Page 33: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/33.jpg)
TWIG
Saturday, July 21, 2012
![Page 34: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/34.jpg)
A modern template engine for PHP.
TWIG
http://twig.sensiolabs.org
Saturday, July 21, 2012
![Page 35: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/35.jpg)
what’s so great about it?
TWIG
• well documented• extensible• secure• well tested• IDE integration• recognizable syntax• Python (django)• JS (TwigJS)•Ruby (Liquid)•by Symfony’s author, Fabien Potencier
Saturday, July 21, 2012
![Page 36: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/36.jpg)
what does it look like?
TWIG
Saturday, July 21, 2012
![Page 37: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/37.jpg)
what does it look like?
TWIG
print with {{ }}
Saturday, July 21, 2012
![Page 38: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/38.jpg)
what does it look like?
TWIG
commands with {% %}
Saturday, July 21, 2012
![Page 39: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/39.jpg)
what does it look like?
TWIG
comments with {# #}
Saturday, July 21, 2012
![Page 40: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/40.jpg)
what does it look like?
TWIG
simple and intuitive
Saturday, July 21, 2012
![Page 41: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/41.jpg)
attributes
INTERLUDE:
attributes are messy
Saturday, July 21, 2012
![Page 42: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/42.jpg)
attributes
INTERLUDE:
attributes are messy
HTML5 attribute types:
String
Boolean
Enumerated
Saturday, July 21, 2012
![Page 43: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/43.jpg)
attributes
INTERLUDE:
We need attributes to be “drillable”
attributesor
attributes.classor
attributes.id
Saturday, July 21, 2012
![Page 44: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/44.jpg)
attributes
INTERLUDE:
PHP5 to the rescue!
ArrayAccessallows objects to be treated as arrays
__toStringallows “flattening” of arrays or objects into HTML strings
(almost)
Saturday, July 21, 2012
![Page 45: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/45.jpg)
attributes
INTERLUDE:
but, this has nothing to do with TWIG.
so
let’s do it now:http://drupal.org/node/1290694
Saturday, July 21, 2012
![Page 46: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/46.jpg)
how would it work?
TWIG
all theme functions become template files.a single way to override markup!
Saturday, July 21, 2012
![Page 47: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/47.jpg)
TWIG
D7
D8
theme_username becomes username.twigSaturday, July 21, 2012
![Page 48: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/48.jpg)
TWIG
D7
D8
theme_image becomes image.twigSaturday, July 21, 2012
![Page 49: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/49.jpg)
TWIG
D7
D8
theme_link becomes link.twigSaturday, July 21, 2012
![Page 50: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/50.jpg)
TWIGD7 D8
theme_item_list beomes item_list.twigSaturday, July 21, 2012
![Page 51: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/51.jpg)
how would it work?
TWIG
D7 D8
more like Drupal 6!
Saturday, July 21, 2012
![Page 52: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/52.jpg)
how would it work?
TWIG
there’s a lot we still don’t know.
Saturday, July 21, 2012
![Page 53: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/53.jpg)
why is this good?
TWIG
Saturday, July 21, 2012
![Page 54: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/54.jpg)
why is this good?
TWIG
remember the complexity of Drupal 7?
Saturday, July 21, 2012
![Page 55: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/55.jpg)
why is this good?
TWIG
look what would happen in Drupal 8.
Saturday, July 21, 2012
![Page 56: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/56.jpg)
where does this fit in with SCOTCH?
TWIG
The “Blocks everywhere” initiative complicates things
Saturday, July 21, 2012
![Page 57: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/57.jpg)
where does this fit in with SCOTCH?
TWIG
Blocks in D6 (in red)
Saturday, July 21, 2012
![Page 58: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/58.jpg)
where does this fit in with SCOTCH?
TWIG
Blocks in D7 (in red)
Saturday, July 21, 2012
![Page 59: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/59.jpg)
where does this fit in with SCOTCH?
TWIG
Blocks in D8 (in red)
Saturday, July 21, 2012
![Page 60: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/60.jpg)
while we’re at it...
TWIG
...let’s clean up the template files!
Saturday, July 21, 2012
![Page 61: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/61.jpg)
“Learnability”
TWIG
- Easier to learn than PHP- Consistent
- Secure
Saturday, July 21, 2012
![Page 62: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/62.jpg)
DISCUSS!
Saturday, July 21, 2012
![Page 63: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/63.jpg)
A NEW THEME LAYERFOR DRUPAL 8
@jenlampton | http://www.jenlampton.com@c4rl | http://www.c4rl.ws
Saturday, July 21, 2012
![Page 64: A New Theme Layer for Drupal 8](https://reader034.vdocuments.mx/reader034/viewer/2022052505/5555787bb4c9055f5f8b4d5e/html5/thumbnails/64.jpg)
photo credits:
lolcat-wut:http://www.funnyjunk.com/funny_pictures/1152056/Dude/
lolcat-flexiblehttp://icanhascheezburger.com/2008/10/24/funny-pictures-fexlibility-i-haz-it/
lolcat questionmark http://icanhascheezburger.com/2007/10/31/11197/
questionmarkhttp://fr.wikipedia.org/wiki/Fichier :Question_mark_3d.png
wheel-reinventedhttp://www.brainwads.net/drewhawkins/2012/01/dont-re-invent-the-wheel-make-something-better/
objectshttp://2teachers1classroom.blogspot.com/2009_02_01_archive.html
shapeshttp://englishclass.jp/reading/topic/For_Screening_Purposes_Only
securehttp://blog.stratepedia.org/2010/06/03/what-is-a-secure-site/
consistencyhttp://icsigns.org/press/2010/03/23/consistency-staying-on-the-mark/
twig bird comichttp://s302.photobucket.com/albums/nn105/walkseva/?action=view¤t=thebirdneedsthattwig.gif¤ttag=bird%20park%20twig%20comic%20need%20it
scotchhttp://www.thespir.it/articles/scotch-101/?viewall=1
twighttp://galletly.blogspot.com/2009/10/twig.html
Saturday, July 21, 2012