A NEW THEME LAYER FOR DRUPAL 8 - jenlampton.com fileA NEW THEME LAYER FOR DRUPAL 8 Jen Lampton ~...
69
A NEW THEME LAYER FOR DRUPAL 8 Jen Lampton ~ @jenlampton Monday, October 15, 2012
Transcript of A NEW THEME LAYER FOR DRUPAL 8 - jenlampton.com fileA NEW THEME LAYER FOR DRUPAL 8 Jen Lampton ~...
A NEW THEME LAYERFOR DRUPAL 8
Jen Lampton ~ @jenlampton
Monday, October 15, 2012
I AM @jenlampton
working with Drupal since D4.7 ~2006contrib module maintainer (youtube, total_control)
training instructor / curriculum authoraccidental “core developer”
I care a lot about Drupal’s “learnability”
Monday, October 15, 2012
WHO ARE YOU?
Monday, October 15, 2012
YOU ARE:
Theme developers?(D7? D6? D5?)
Monday, October 15, 2012
YOU ARE:
Theme developers?(D7? D6? D5?)
New to Drupal?(just want to know what the heck is going on in D8)
Monday, October 15, 2012
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)
Monday, October 15, 2012
DRUPAL 8 :A NEW THEME LAYER
Monday, October 15, 2012
DRUPAL 8 :A NEW THEME LAYER
(probably)
Monday, October 15, 2012
WHY?
Monday, October 15, 2012
DRUPAL 7: POSITIVE
Monday, October 15, 2012
DRUPAL 7: POSITIVE
flexible
Monday, October 15, 2012
DRUPAL 7: POSITIVE
unified~ish data structures everywhere
Monday, October 15, 2012
DRUPAL 7: POSITIVE
anything is possible
Monday, October 15, 2012
DRUPAL 7: NEGATIVE
Monday, October 15, 2012
DRUPAL 7: NEGATIVE
Drupal only (weird) syntax
Monday, October 15, 2012
DRUPAL 7: NEGATIVE
Object or Array?
Monday, October 15, 2012
DRUPAL 7: NEGATIVE
print or print render() ?
Monday, October 15, 2012
DRUPAL 7: NEGATIVE
PHP is insecure
Monday, October 15, 2012
DRUPAL 7: NEGATIVE
Too many template files
Monday, October 15, 2012
DRUPAL 7: NEGATIVE
complex mix of subsystems
Monday, October 15, 2012
DRUPAL 7: NEGATIVE
Drupal 7 is too hard to learn!
Monday, October 15, 2012
what do we want?
DRUPAL 8
Monday, October 15, 2012
what do we want?
DRUPAL 8
Something proudly found elsewhere
Monday, October 15, 2012
what do we want?
DRUPAL 8
Objects
Monday, October 15, 2012
what do we want?
DRUPAL 8
Objects(but not in the templates)
Monday, October 15, 2012
what do we want?
DRUPAL 8
Secure
Monday, October 15, 2012
what do we want?
DRUPAL 8
The right templates
Monday, October 15, 2012
what do we want?
DRUPAL 8
Consistency
Monday, October 15, 2012
TWIGA modern
template engine for PHP.
http://twig.sensiolabs.org
Monday, October 15, 2012
TWIG
well documented
Monday, October 15, 2012
TWIG
extensible
Monday, October 15, 2012
TWIG
secure
Monday, October 15, 2012
TWIG
well-tested
Monday, October 15, 2012
TWIG
fast
Monday, October 15, 2012
TWIG
IDE integration
Monday, October 15, 2012
TWIG
recognizable syntax
Monday, October 15, 2012
TWIG
by Symfony’s author, Fabien Potencier
Monday, October 15, 2012
TWIGwhat does it look like?
Monday, October 15, 2012
what does it look like?
TWIG
print with {{ }}
Monday, October 15, 2012
what does it look like?
TWIG
commands with {% %}
Monday, October 15, 2012
what does it look like?
TWIG
comments with {# #}
Monday, October 15, 2012
what does it look like?
TWIG
simple and intuitive
Monday, October 15, 2012
attributes
INTERLUDE:
attributes are messy
Monday, October 15, 2012
attributes
INTERLUDE:
attributes are messy
HTML5 attribute types:
String
Boolean
Enumerated
Monday, October 15, 2012
attributes
INTERLUDE:
We need attributes to be “drillable”
attributesor
attributes.classor
attributes.id
Monday, October 15, 2012
attributes
INTERLUDE:
PHP5 to the rescue!
ArrayAccessallows objects to be treated as arrays
__toStringallows “flattening” of arrays or objects into HTML strings
(almost)
Monday, October 15, 2012
attributes
INTERLUDE:
but, this has nothing to do with TWIG.
so
let’s do it now:http://drupal.org/node/1290694
Monday, October 15, 2012
how would it work?
TWIG
all theme functions become template files.a single way to override markup!
Monday, October 15, 2012
TWIG
D7
D8
theme_username becomes username.twigMonday, October 15, 2012
TWIG
D7
D8
theme_image becomes image.twigMonday, October 15, 2012
TWIG
D7
D8
theme_link becomes link.twigMonday, October 15, 2012
TWIGD7 D8
theme_item_list beomes item_list.twigMonday, October 15, 2012
how would it work?
TWIG
D7 D8
more like Drupal 6!
Monday, October 15, 2012
how would it work?
TWIG
there’s a lot we still don’t know.
Monday, October 15, 2012
why is this good?
TWIG
Monday, October 15, 2012
why is this good?
TWIG
remember the complexity of Drupal 7?
Monday, October 15, 2012
why is this good?
TWIG
look what would happen in Drupal 8.
Monday, October 15, 2012
where does this fit in with SCOTCH?
TWIG
The “Blocks & Layouts” initiative complicates things
Monday, October 15, 2012
where does this fit in with SCOTCH?
TWIG
Blocks in D6 (in red)
Monday, October 15, 2012
where does this fit in with SCOTCH?
TWIG
Blocks in D7 (in red)
Monday, October 15, 2012
where does this fit in with SCOTCH?
TWIG
Blocks in D8 (in red)
Monday, October 15, 2012
where does this fit in with SCOTCH?
TWIG
Two kinds of templates:
•Page or region “templates” as plugins- selectable via the user interface
•Block or element “templates”- provided by or overridden in your theme
Monday, October 15, 2012
while we’re at it...
TWIG
...let’s clean up the template files!
Monday, October 15, 2012
improve markup
TWIG
• Use HTML5!
• Create markup patterns
• Consistent use of tags & classes
Monday, October 15, 2012
reduce & reuse templates
TWIG
• Consolidate similar templates
• Fewer templates & wrappers
• More theme_hook_suggestions
Monday, October 15, 2012
Focus on “Learnability”
TWIG
• Easier to learn than PHP• Consistent• Secure
Monday, October 15, 2012
QUESTIONS?
Monday, October 15, 2012
A NEW THEME LAYERFOR DRUPAL 8
@jenlampton | http://www.jenlampton.com
Monday, October 15, 2012
photo credits:lolcat-flexible
http://cheezburger.com/2679924736
anything is possible pebbleshttp://www.invergordontours.com/aip.html
lolcat questionmark http://icanhascheezburger.com/2007/10/31/11197/
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
twig docs screenshotshttp://twig.sensiolabs.org/documentation
twig speed graphshttp://phpcomparison.net/
python iconhttp://python-hosting.org/
ruby iconhttp://itmediaconnect.ro/en/web
django logohttp://py-arahat.blogspot.com/2010/08/django-vs-pylons.html
symfony logohttp://symfony.com/logo
scotch glasshttp://www.thespir.it/articles/scotch-101/?viewall=1
Monday, October 15, 2012
