The future ofDrupal Theming
API-first edition
By Mathieu Spillebeen

Mathieu Spillebeen
Freelance Drupal Frontend developer
Frontend United.org
Compony.io
mathieu.spillebeen@gmail.com@MathieuSpil

Contents
Making myself unpopular
Hopefully ﬁxing it again

Expectations

Peak of expectations

Plateau of productivity

Slow enlightenment
Disillusionment
New technology

TimeExpectations

Mobile-ﬁrst

TimeExpectations

Mobile-only

Mobile-ﬁrst

TimeExpectations

Mobile-only

Expensive, complex,
only edge cases
Mobile-ﬁrst

TimeExpectations

Mobile-only

Responsive!
Expensive, complex,
only edge cases
Mobile-ﬁrst

TimeExpectations

Mobile-only

Mobile-focusResponsive!
Expensive, complex,only edge cases
Mobile-ﬁrst

TimeExpectations

API-ﬁrst?

TimeExpectations

API-only! Headless!

API-ﬁrst?

TimeExpectations

API-only! Headless!

Expensive, complex drupalisms
Data-structure mangling,
API-ﬁrst?

=> Only edge cases

TimeExpectations

API-only! Headless!

Progressive decoup!ing
Expensive, complex drupalisms
Data-structure mangling,
API-ﬁrst?

=> Only edge cases

TimeExpectations

API-only! Headless!

API-powered components

Progressive decoup!ing
Expensive, complex drupalisms
Data-structure mangling,
API-ﬁrst?

=> Only edge cases

TimeDecoupleDecouple
interactive

Decouple

Decouple

Decouple

DecoupleIndependent, reusable
themed, functional,
cutting edge,
Drupal Front-end
componentsthat YOU can decouple

That's the dream

New theme
structureTooling
workﬂow
New theme
structure

Platformto shareTooling
workﬂow
New theme
structureTooling
workﬂow
New theme
structure{

Platformto sharecompony.io{Platformto share{Tooling
workﬂow

compony.io

New theme
structure

The compony
theme

How?

The new theme
structuremy-theme_sass-essentials
components
my-theme.info.yml
my-theme.libraries.yml
my-theme.themeHow?

my-theme_sass-essentials
components_globalnode
status-messages
my-theme.info.yml
my-theme.libraries.yml
my-theme.themeHow?

my-theme_sass-essentials_mixins.scss_variables.scss
sass-essentials.scss
components
my-theme.info.yml
my-theme.libraries.yml
my-theme.themeHow?

status-messages
dist
smile.svg
status-messages.css
status-messages.js
libraries.yml
smile.svg
status-messages.html.twig
status-messages.js
status-messages.scss

How?

How?
libraries.yml

1 status-messages:2
version: VERSION3
css:4component:
5
dist/status-messages.css: {}6
js:
7
dist/status-messages.js: {}How?
status-messages.html.twig
1
2
3
4
5
6
7
8
910
111213{#/*** Theme override for status messages.
* ...
*/#}
{{ attach_library('my-theme/status-messages') }}<div role="alert" class="message message--error"><h2>{{ status_headings[type] }}</h2>{{ messages }}</div>

status-messages
distsmile.svg
status-messages.css
status-messages.js
libraries.yml
smile.svg
status-messages.html.twig
status-messages.js
status-messages.scss

How?

Advantages

The new themestructure

Advantages

Conditional loading

components_globalpage
views-inﬁnite-scroll-pager
views-inﬁnite-scroll-pager.html.twig
views-inﬁnite-scroll-pager.css
libraries.yml

Views Inﬁnite Scroll

Advantages

components_globalpage
views-inﬁnite-scroll-pager
views-inﬁnite-scroll-pager.html.twig
views-inﬁnite-scroll-pager.css
libraries.yml

Views Inﬁnite Scroll

Advantages

Advantages

Maintainability

node--article
libraries.yml/taxonomy-term/1

node--article.html.twig
node--article.js/node/article/1

node--article
libraries.yml/taxonomy-term/1

node--article.html.twig
node--article.js/node/article/1

Advantages

Performancenode/taxonomy-term/1

libraries.yml
node.html.twig
node.css/node/1

node/taxonomy-term/1

libraries.yml
node.html.twig
node.css/node/1

page/taxonomy-term/1

libraries.yml
page.html.twig
page.css/node/1

page/taxonomy-term/1

libraries.yml
page.html.twig
page.css/node/1{
1 in 10 of your CSS/JS/any-pageAdvantages

Flexibility

CSS-only
bricklibraries.yml
1 brick:2
version: VERSION
3css:
4
component:
5
brick.css: {}brick.css
1 .brick {2width: 100%;3
padding: 2rem;
4 }Advantages

HTML-only

Advantages

node--article
node--article.html.twig
1 {{ attach_library('my-theme/brick') }}2 <div class="brick">3
4{{ attach_library('my-theme/messages') }}5<div class="messages">6{{ content }}7</div>
89 </div>

JS-only

Advantages

libraries
libraries.yml
1 modal:2version: VERSION3
js:
4
modal.js: {}modal.js
1 (function () {2
Drupal.behaviors.submitFormLoader = {3attach: function (context, settings) {4};5 })();

Advantages... and loads more

Advantages
Never start over again
Readable to non-Drupal people
Experiment on tiny parts, not on
everythingTooling
workﬂow
New theme
structure

How?

New tooling
workflowmy-theme_sass-essentials
components
gulpﬁle.js
my-theme.info.yml
my-theme.libraries.yml
my-theme.themeHow?

my-theme_sass-essentials
components
gulpﬁle.js.nvmrc
my-theme.info.yml
my-theme.libraries.yml
my-theme.theme
package.json
package-lock.json
yarn.lock

How?

How?

Configurable
project-speciﬁc
environment-speciﬁc

How?
project.conﬁg.js
1 module.exports = {2gulpthemes: [3{4
path: 'web/themes/compony',5
with_styleguide: false
6},
7],
8
features: {9autoprefixer: {10enable: true,
11
options: {12browsers: ['last 2 versions', 'ie 9', '> 0.2%'],13
cascade: false
14},

How?
local.conﬁg.js

1 module.exports = {2features: {3
auto_rebuild_drupal_cache: {4enable: false,
5cache_rebuild_command: 'drush cr'
6},7browsersync: {8enable: false,
9
localhost_url: "https://local.dev/"
10},

Advantages

New tooling
workflowAdvantages

Easy setup

Advantages

gulpﬁle.js
core
conﬁg.js
index.js
local.conﬁg.js
project.conﬁg.js

Command line

$ npm install$ gulp

Advantages

Sass compilingstatus-messages

Advantages

distsmile.svg
status-messages.css
libraries.yml
smile.svg
status-messages.scss
1 .message {2background: url('../../../images/smile.svg');
3 }status-messages

Advantages

distsmile.svg
status-messages.css
libraries.yml
smile.svg
status-messages.scss
1 .message {2background: url('smile.svg');
url('../../../images/smile.svg');
3 }Advantages

Autoprefixer

Advantages

Advantages

Lossless image
optimisation

Advantages

Advantages

Browsersync

Advantages

Linting

Advantages

Advantages

JS uglification

Advantages

Uglification+Aggregation

Advantages

Babelify & Browserify

Advantages

Treeshaking

Advantages

Component-based,
multi-theme
compilingcomponents
pagelibraries.yml
page.html.twig
page.css
nodelibraries.yml
node.html.twig
node.css

Advantages

my-theme

Advantages_sass-essentials
components
gulpﬁle.js
my-theme.info.yml
my-theme.libraries.yml
my-theme.theme

compony.io/blog/how-set-multiple-compony-themes-your-projectAdvantages
project.conﬁg.js
1 module.exports = {2
options: {3...
4gulpthemes: [5{
6
path: 'themes/custom/my-first-theme',7},8{9
path: 'themes/custom/my-second-theme',10},
11
]12},

exampledistexample.js
partials_partial-a.js_partial-b.js
libraries.yml
example.js

Advantages

exampledistexample.js
libraries.yml
example.js
some-library.min.js

Advantages

Advantages_globaldiststyle.css_scss-partials_regions.scss_utilities.scss
libraries.yml
style.scss

Advantages

menu
dist
menu.css
menu__toggles.css
libraries.yml
menu__toggles.scss
menu.scss

Advantages

Rebuilding Drupal's
CacheAdvantages

Advantages

Refactor friendlyAdvantages

Advantages

Abstract only
when needed

components_global
node
node.html.twig
node.css
libraries.yml

Advantages

components_globalnode
node.html.twig
node.css
libraries.yml
node--article
node--article.html.twig

Advantages

components

components_global_global

node

node

node.html.twig

Advantages

node

node.css

node.html.twig

libraries.yml

node.css

node--article
node--article.html.twig

libraries.yml
node--article
node--article.html.twig

components_globalnode
node
node--article
node--article-fullnode--article--teaser
node--blog
node--blog--fullnode--blog--teaser

Advantages... and loads moreAdvantages
Browsersyncing,
Sass globbing,Source mapping,
Cross-component variables & mixins
Auto-cleaning up empty directories,
Features as options.

Platformto shareTooling
workﬂow
New themestructure

How?

New platform
to shareHow?

Downloading

How?
Compony.io

Download theme-structure + tools

Download contributed components

How?
Drupal.org

Download Drupal core

Download contributed modules

Advantages

New platform
to shareAdvantages

Drag and drop
cross-projects

Advantages

Drag and drop
cross-projects-developers

Advantages

Drag and drop
cross-projects-developers-companies

Advantages

Project-agnostic
components

Advantages

components
pagelibraries.yml
my-component.html.twig

Strip project speciﬁc content

my-component.scss

Strip color, fonts & variables

compony.io/blog/create-compony-component

Advantages

Share informationon components

compony.io/components/status-messages/node/article/1

Advantages

Collaborate
on components

Advantages

Advantages

Advantages

Invent component
variations

Advantages

Advantages

Advantages(Still in development)

Advantages

Componentcollections

Advantages

Advantages

Advantages

Community basedenhancementsAdvantages

Proud Drupal
Frontend developer

Advantages

What is your nodeversion.

Advantages

And lots more

Advantages
Component naming & nesting convention
Twig and hook extending conventions
Documentation on the 4 PHP functions
Version control of components

compony.io/docs/documentation/documentation

Putting
ittogether

Mathieu Spillebeen
Freelance Drupal Frontend developer
frontendunited.org/get-involved
compony.io/social
mathieu.spillebeen@gmail.com@MathieuSpil

Thank you forlistening