Drupal T heming The future o f API-first edition · 2019. 12. 25. · Frontend United.org Compony.io Freelance Drupal Frontend developer. Making myself unpopular Hopefully fixing

The future ofThe future of Drupal ThemingDrupal Theming

By Mathieu Spillebeen

API-first editionAPI-first edition

Mathieu SpillebeenMathieu Spillebeen

@MathieuSpil

[email protected]

Frontend United.org

Compony.io

Freelance Drupal Frontend developer

Making myself unpopularHopefully fixing it again

ContentsContents

Time

Expectations

New technology

Peak of expectations

Disillusionment

Slow enlightenment

Plateau of productivity

Time

Expectations

Mobile-first

Time

Expectations

Mobile-first

Mobile-only 

Time

Expectations

Mobile-first

Mobile-only 

Expensive, complex,only edge cases

Time

Expectations

Mobile-first

Mobile-only 

Expensive, complex,only edge cases

Responsive!

Time

Expectations

Mobile-first

Mobile-only 

Expensive, complex,only edge cases

Responsive!

Mobile-focus

Time

Expectations

API-first?

Time

Expectations

API-first?

API-only! Headless! 

Time

Expectations

API-first?

API-only! Headless! 

Expensive, complex drupalismsData-structure mangling,=> Only edge cases

Time

Expectations

API-first?

API-only! Headless! 

Expensive, complex drupalismsData-structure mangling,=> Only edge cases

Progressive decoup!ing

Time

Expectations

API-first?

API-only! Headless! 

Expensive, complex drupalismsData-structure mangling,=> Only edge cases

Progressive decoup!ing

API-powered components

Decouple

interactive

Decouple

Decouple

Decouple

Decouple

Decouple

Independent, reusableIndependent, reusablethemed, functional,themed, functional,

cutting edge,cutting edge,Drupal Front-endDrupal Front-end

componentscomponentsthat YOU can decouplethat YOU can decouple

That's the dreamThat's the dream

New themestructure

New themestructure

Toolingworkflow

New themestructure

Platform to share

Toolingworkflow

New themestructure

Platform to share

 compony.io

{{Toolingworkflow

New themestructure

Platform to share

 compony.io{{{{

The componytheme

Toolingworkflow

The new themeThe new themestructurestructure

How?

_sass-essentials

my-theme

components

my-theme.info.yml

my-theme.libraries.yml

my-theme.theme

How?

_sass-essentials

my-theme

components

my-theme.info.yml

my-theme.libraries.yml

my-theme.theme

_global

node

status-messages

How?

_sass-essentials

my-theme

components

my-theme.info.yml

my-theme.libraries.yml

my-theme.theme

_mixins.scss

_variables.scss

sass-essentials.scss

How?

status-messages

dist

libraries.yml

smile.svg

status-messages.html.twig

smile.svg

status-messages.css

status-messages.js

status-messages.js

status-messages.scss

How?

status-messages: version: VERSION css: component: dist/status-messages.css: {} js: dist/status-messages.js: {}

1234567

libraries.ymllibraries.yml

How?

{#/** * 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>

123456789

10111213

status-messages.html.twigstatus-messages.html.twig

How?

How?status-messages

dist

libraries.yml

smile.svg

status-messages.html.twig

smile.svg

status-messages.css

status-messages.js

status-messages.js

status-messages.scss

The new themeThe new themestructurestructure

Advantages

Conditional loadingConditional loading

Advantages

Views Infinite Scroll

components

_global

views-infinite-scroll-pager

page

views-infinite-scroll-pager.html.twig

libraries.yml

views-infinite-scroll-pager.css

Advantages

Views Infinite Scroll

components

_global

views-infinite-scroll-pager

page

views-infinite-scroll-pager.html.twig

libraries.yml

views-infinite-scroll-pager.css

Advantages

MaintainabilityMaintainability

Advantages

node--article.html.twig

node--article.js

/taxonomy-term/1

/node/article/1

libraries.yml

node--article

node--article.html.twig

node--article.js

/taxonomy-term/1

/node/article/1

libraries.yml

node--article

PerformancePerformance

Advantages

/node/1

/taxonomy-term/1node

libraries.yml

node.css

node.html.twig

/node/1

/taxonomy-term/1node

libraries.yml

node.css

node.html.twig

/taxonomy-term/1

/node/1

page

libraries.yml

page.css

page.html.twig

/taxonomy-term/1

/node/1

page

libraries.yml

page.css

page.html.twig

{{

/any-page

1 in 10 of your CSS/JS

FlexibilityFlexibility

Advantages

brick: version: VERSION css: component: brick.css: {}

12345

brick

libraries.yml

.brick { width: 100%; padding: 2rem;}

1234

CSS-onlyCSS-only

brick.css

Advantages

{{ attach_library('my-theme/brick') }}<div class="brick"> {{ attach_library('my-theme/messages') }} <div class="messages"> {{ content }} </div> </div>

123456789

node--article

node--article.html.twig

HTML-onlyHTML-only Advantages

modal: version: VERSION js: modal.js: {}

1234

(function () { Drupal.behaviors.submitFormLoader = { attach: function (context, settings) { };})();

12345

JS-onlyJS-onlylibraries

libraries.yml

modal.js

Advantages

... and loads more... and loads more

Advantages

Advantages

Never start over againReadable to non-Drupal peopleExperiment on tiny parts, not oneverything

New themestructure

Toolingworkflow

New toolingNew toolingworkflowworkflow

How?

_sass-essentials

my-theme

components

my-theme.info.yml

my-theme.libraries.yml

my-theme.theme

gulpfile.js

How?

_sass-essentials

my-theme

components

my-theme.info.yml

my-theme.libraries.yml

my-theme.theme

gulpfile.js

How?

.nvmrc

package.json

package-lock.json

yarn.lock

ConfigurableConfigurable

How?

project-specificenvironment-specific

module.exports = { gulpthemes: [ { path: 'web/themes/compony', with_styleguide: false }, ], features: { autoprefixer: { enable: true, options: { browsers: ['last 2 versions', 'ie 9', '> 0.2%'], cascade: false },

123456789

1011121314

project.config.js

How?

module.exports = { features: { auto_rebuild_drupal_cache: { enable: false, cache_rebuild_command: 'drush cr' }, browsersync: { enable: false, localhost_url: "https://local.dev/" },

123456789

10

local.config.js

How?

New toolingNew toolingworkflowworkflow

Advantages

Easy setupEasy setup

Advantages

$ npm install $ gulp

core

gulpfile.js

config.js

index.js

local.config.js

project.config.js

Command line

Advantages

Sass compilingSass compiling

Advantages

.message { background: url('../../../images/smile.svg');}

123

status-messages

dist

libraries.yml

smile.svg

smile.svg

status-messages.css

status-messages.scss

Advantages

.message { background: url('../../../images/smile.svg');}

123

.message { background: url('smile.svg');}

123

status-messages

dist

libraries.yml

smile.svg

smile.svg

status-messages.css

status-messages.scss

Advantages

AutoprefixerAutoprefixer

Advantages

Advantages

Lossless imageLossless imageoptimisationoptimisation

Advantages

Advantages

BrowsersyncBrowsersync

Advantages

LintingLinting

Advantages

Advantages

JS uglificationJS uglification

Advantages

UglificationUglification

AggregationAggregation

++

Advantages

Babelify & BrowserifyBabelify & Browserify

Advantages

TreeshakingTreeshaking

Advantages

Component-based,Component-based, multi-thememulti-theme

compilingcompiling

Advantages

node

libraries.yml

node.css

node.html.twig

page

libraries.yml

page.css

page.html.twig

components Advantages

_sass-essentials

my-theme

components

my-theme.info.yml

my-theme.libraries.yml

my-theme.theme

gulpfile.js

Advantages

          compony.io/blog/how-set-multiple-compony-themes-your-project

module.exports = { options: { ... gulpthemes: [ { path: 'themes/custom/my-first-theme', }, { path: 'themes/custom/my-second-theme', }, ] },};

12345678910111213

project.config.js

Advantages

Advantages

partials

_partial-a.js

_partial-b.js

dist

example.js

example

libraries.yml

example.js

Advantagesdist

example.js

example

libraries.yml

example.js

some-library.min.js

Advantages

_scss-partials

_regions.scss

_utilities.scss

dist

style.css

_global

libraries.yml

style.scss

Advantagesdist

menu.css

menu

libraries.yml

menu.scss

menu__toggles.scss

menu__toggles.css

Rebuilding Drupal'sRebuilding Drupal'sCacheCache

Advantages

Advantages

Refactor friendlyRefactor friendly

Advantages

Advantages

Abstract onlyAbstract onlywhen neededwhen needed

Advantages

node

_global

node.html.twig

node.css

libraries.yml

components Advantages

node

_global

node.html.twig

node.css

libraries.yml

node--article

node--article.html.twig

components Advantages

node

_global

node.html.twig

node.css

libraries.yml

node--article

node--article.html.twig

components

node

_global

node.html.twig

node.css

libraries.yml

node--article

node--article.html.twig

components

node

Advantages

node

_global

components

node

node--article

node--article-full

node--article--teaser

node--blog

node--blog--full

node--blog--teaser

... and loads more... and loads more

Advantages

Browsersyncing,Sass globbing,Source mapping,Cross-component variables & mixinsAuto-cleaning up empty directories,Features as options.

Advantages

New themestructure

Platform to share

Toolingworkflow

New platformNew platform to shareto share

How?

DownloadingDownloading

How?

Compony.ioDownload theme-structure + tools

Download contributed components

How?

Drupal.orgDownload Drupal core

Download contributed modules

How?

New platformNew platform to shareto share

Advantages

Drag and dropDrag and drop   cross-projectscross-projects

Advantages

Drag and dropDrag and drop   cross-projectscross-projects

-developers-developers

Advantages

Drag and dropDrag and drop   cross-projectscross-projects

-developers-developers-companies-companies

Advantages

Project-agnosticProject-agnosticcomponentscomponents

Advantages

Strip project specific content

Strip color, fonts & variables

page

libraries.yml

my-component.scss

my-component.html.twig

components Advantages

          compony.io/blog/create-compony-component

Share informationShare information on componentson components

Advantages

/node/article/1

compony.io/components/status-messages

CollaborateCollaborate on componentson components

Advantages

Advantages

Advantages

Invent componentInvent componentvariationsvariations

Advantages

Advantages

Advantages

Advantages

(Still in development)

ComponentComponentcollectionscollections

Advantages

Advantages

Advantages

Community basedCommunity basedenhancementsenhancements

Advantages

Proud DrupalProud DrupalFrontend developerFrontend developer

Advantages

What is your nodeWhat is your nodeversion.version.

Advantages

And lots moreAnd lots more

Advantages

Component naming & nesting conventionTwig and hook extending conventionsDocumentation on the 4 PHP functionsVersion control of components

Advantages

          compony.io/docs/documentation/documentation

ititPuttingPutting

togethertogether

Mathieu SpillebeenMathieu Spillebeen

@MathieuSpil

[email protected]

frontendunited.org/get-involved

compony.io/social

Freelance Drupal Frontend developer

Thank you forThank you forlisteninglistening