Twig & the new theme layer in Drupal 8

THE NEW THEME LAYERIN DRUPAL 8

Jen Lampton

Thursday, April 11, 2013

JEN LAMPTON

@jenlampton on twitter “jenlampton” http://drupal.org/user/85586

www.jenlampton.com

if you forget my name, just Google “Drupal developer”

Building websites since 1997

MY BACKGROUND

Working with Drupal since 2006

MY BACKGROUND

Consider myself a developer.

MY BACKGROUND

Also a Drupal trainer.

MY BACKGROUND

Accidental Drupal 8 “initiative” leader.

MY BACKGROUND

MY “INITIATIVE”(unofficial)

MY “INITIATIVE”

A new theme layer for Drupal 8

(unofficial)

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)

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)

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.

DRUPAL 7 THEME LAYER

but, we have this now!

it looks like this (simplified)

DRUPAL 7 THEME LAYERit feels like this

HARD TO LEARN

HARD TO LEARNfor lots of reasons

String, Object or Array?

HARD TO LEARNMixed data types

print or print render()?

HARD TO LEARNDifferent methods of printing variables

Two ways to override markup:

When do I use what?

THEME FUNCTIONSTEMPLATE FILES

HARD TO LEARN

Too many template files

HARDER

Way too many theme functions

HARD TO LEARNInsecure.

HARD TO LEARNReally, it’s insecure.

HARD TO LEARN

Drupalism noun Something that only exists in Drupal.

Drupal-specific

too many complex subsystems

HARD TO LEARN

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 functions5. Insecure6. Drupal-specific7. A complex mix of subsystems

HARD TO LEARNbecause

Principals to guide us.

lb.com/twig#principles

Principals to guide us

1. Start with nothingCore default markup should strive for semantic simplicity, with few HTML elements, added only as needed

1. Start with nothing2. Build from use cases

We won't assume we know what people want or add features based on "What-if...?" We will think about the 90% of use cases.

1. Start with nothing2. Build from use cases3. Provide tools

Give front-end experts a way to achieve specific goals; goals that apply to the remaining 10% of use cases.

1. Start with nothing2. Build from use cases3. Provide tools4. Consolidate

Don't make something new when something common can be used instead. (let’s create a Theme Component Library).

1. Start with nothing2. Build from use cases3. Provide tools4. Consolidate5. Visibility

You should be able to see what's going on without reading docs.

1. Start with nothing2. Build from use cases3. Provide tools4. Consolidate5. Visibility6. Consistency

Do the same things everywhere, follow patterns.

1. Start with nothing2. Build from use cases3. Provide tools4. Consolidate5. Visibility6. Consistency7. Don't dumb it down

Complexity should be reduced but not obscured.

1. Start with nothing2. Build from use cases3. Provide tools4. Consolidate5. Visibility6. Consistency7. Don't dumb it down8. 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.

A NEW THEME ENGINE?

well documented

extensible

secure

IDE integration

recognizable syntax

by the creator of Symfony, Fabien Potencier

TWIGwhat does it look like?

what does it look like?

TWIGprint with {{ }}

commands with {% %}

comments with {# #}

drill down into all variables with .

All markup is generated in template files.

D7 PAIN POINTS

1. Mixed data types2. Different methods of printing variables3.Two ways to override markup4. Too many template files & theme functions 5. Insecure6. Drupal-specific7. A complex mix of subsystems

does Twig help?

1. Mixed data types

D7 PAIN POINTSdoes Twig help?

1. Mixed data typesAll template variables are accessed

consistently: node.nid

content.links

1. Mixed data types FIXED

1. Mixed data types FIXED2. Different methods of printing variables

1. Mixed data types FIXED2. Different methods of printing variablesRemoved calls to render() from templates:

1. Mixed data types FIXED2. Different methods of printing variables FIXED

1. Mixed data types FIXED2. Different methods of printing variables FIXED3.Two ways to override markup

All theme functions become templates.node.tpl.php becomes node.html.twigtheme_table() becomes table.html.twig

1. Mixed data types FIXED2. Different methods of printing variables FIXED3.Two ways to override markup FIXED

1. Mixed data types FIXED2. Different methods of printing variables FIXED3.Two ways to override markup FIXED4. Too many template files & theme functions

We’re working on this right now

1. Mixed data types FIXED2. Different methods of printing variables FIXED3.Two ways to override markup FIXED4. Too many template files & theme functions @todo

1. Mixed data types FIXED2. Different methods of printing variables FIXED3.Two ways to override markup FIXED4. Too many template files & theme functions @todo5. Insecure

1. Mixed data types FIXED2. Different methods of printing variables FIXED3.Two ways to override markup FIXED4. Too many template files & theme functions @todo5. InsecureAll variables are *automatically* sanitized

and most PHP functions cannot be executed in template files.

1. Mixed data types FIXED2. Different methods of printing variables FIXED3.Two ways to override markup FIXED4. Too many template files & theme functions @todo5. Insecure FIXED

1. Mixed data types FIXED2. Different methods of printing variables FIXED3.Two ways to override markup FIXED4. Too many template files & theme functions @todo5. Insecure FIXED6. Drupal-specific

Twig is used elsewhere on the webis syntactically similar to other languages

and looks a lot more like HTML.

1. Mixed data types FIXED2. Different methods of printing variables FIXED3.Two ways to override markup FIXED4. Too many template files & theme functions @todo5. Insecure FIXED6. Drupal-specific FIXED

1. Mixed data types FIXED2. Different methods of printing variables FIXED3.Two ways to override markup FIXED4. Too many template files & theme functions @todo5. Insecure FIXED6. Drupal-specific FIXED7. A complex mix of subsystems

D7 THEME LAYER

remove theme functions (and overrides) entirely.

D8 IMPROVEMENTS

remove process.

D8 IMPROVEMENTS

remove render.

D8 IMPROVEMENTS

remove page alter?

D8 IMPROVEMENTS

remove preprocess?

D9 IMPROVEMENTS

1. Mixed data types FIXED2. Different methods of printing variables FIXED3.Two ways to override markup FIXED4. Too many template files & theme functions @todo5. Insecure FIXED6. Drupal-specific FIXED7. A complex mix of subsystems We can remove all theme functions, render,

process & (maybe) preprocess too.

D7 PAIN POINTS

1. Mixed data types FIXED2. Different methods of printing variables FIXED3.Two ways to override markup FIXED4. Too many template files & theme functions @todo5. Insecure FIXED6. Drupal-specific FIXED7. A complex mix of subsystems @todo

does Twig help?

D7 PAIN POINTS

YES!!!

does Twig help?

TWIG: OTHER WINS

less code than PHP functions

TWIG: OTHER WINS

theme_image becomes image.html.twig

TWIG: OTHER WINS

theme_username becomes username.html.twig

theme_link becomes link.html.twig

theme_item_list becomes item_list.html.twig

lots less code than PHP functions

Awesome template inspection.

TWIG: OTHER WINS

(“devel themer” in core)

Awesome template inspection.

Awesome variable inspection.

TWIG: OTHER WINS

(devel’s dpm() in core)

Awesome variable inspection.

TWIG: OTHER WINSTemplate inheritance

comment-wrapper.html.twig before

comment-wrapper.html.twig after

comment-wrapper--forum.html.twig(child template)

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 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.

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) will finally be safe to use.

In-browser template editing is something WordPress users have been asking of Drupal for a very long time.

TWIG: OTHER WINSTwig template files can be used on the front end, too.

TWIG: OTHER WINS

One template can return markup for both your PHP-generated pages, as well as pages generated vi JS in AJAX callbacks.

Twig template files can be used on the front end, too.

TWIG: OTHER WINS

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)

Twig template files can be used on the front end, too.

TWIG: OTHER WINS2-way communication between UI and code.

TWIG: OTHER WINS

No broken UIs.

2-way communication between UI and code.

TWIG: OTHER WINS

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 reason

2-way communication between UI and code.

looks pretty awesome, right?

QUESTIONS?

HELP US GET THERE

we need your help!

we could be “done” in 1.5 weeks

http://drupal.org/node/1757550

IRC: #drupal-twig

Jen Lampton ~ @jenlamptonwww.jenlampton.com

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&current=thebirdneedsthattwig.gif&currenttag=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

speech bubblehttp://ljtfash.blogspot.com/2012/10/youre-beautiful-no-matter-what-they-say.html

Twig & the new theme layer in Drupal 8

Technology

Transcript of Twig & the new theme layer in Drupal 8

Drupal Theme Development - DrupalCon Chicago 2011

RETHINKING THE THEME LAYER IN DRUPAL 8 Sensible ﬂow of subsystems for Drupal 8*! * we still need help! drupal! render default! template template! override theme! registry theme hook!

Drupal 7 — Circle theme

From PSD to Drupal Theme

Drupal 6 Theme Functions

Converting Static Html To Drupal Theme

Темизация и Twig в Drupal 8

PSD to a Drupal Theme (using a base theme)

MY NEEDS MY PAIN HOW DRUPAL 8 FAST FACTS WILL … · Introducing Twig: • Twig is the biggest development in Drupal theming for a decade • It will replace the ... Symfony2 framework

Drupal Omega Theme + LESS

Drupal 8 のデザイン基礎（Twig in Drupal 8から · Drupal 8のテーマで必要そうな動画 Drupal 8 Theming - Part 02 - Disable Cache, Enable Twig Debug Drupal 8 Theming

RETHINKING THE THEME LAYER IN DRUPAL 8COMPLEXITY Sensible ﬂow of subsystems for Drupal 8*!* we still need help! drupal! render default! template template! override theme! registry

D8 Theming Quickstart - rwt.io · Theming Quickstart. Introduction to themes in Drupal 8 » New theme layer based in Twig (used in other CMSs) ... » ‘Classy’ contains BEM-style

Mastering Drupal 8’s Twig

A farewell to Twig - events.drupal.org farewell to Twig (DrupalCon... · js-drupal react-twig. Help out JS modernization with jsdrupal! Open discussion. Drupal. JavaScript. Future.

Twig in Drupal - drupalize.me in Drupal ‣ Describe the role that Twig plays in creating Drupal themes ‣ Explain how Twig impacts the theming experience in Drupal ‣ …

Drupal Theme

Building a Custom Theme in Drupal 8

Twig, el nuevo motor de plantillas de Drupal 8

A New Theme Layer for Drupal 8

RETHINKING THE THEME LAYER IN DRUPAL 8 Sensible ﬂow of subsystems for Drupal 8! we still need help! drupal! render default! template template! override theme! registry theme hook!

RETHINKING THE THEME LAYER IN DRUPAL 8COMPLEXITY Sensible ﬂow of subsystems for Drupal 8! we still need help! drupal! render default! template template! override theme! registry