drupal t heming the future o f api-first edition · 2019. 12. 25. · frontend united.org...
TRANSCRIPT
The future ofThe future of Drupal ThemingDrupal Theming
By Mathieu Spillebeen
API-first editionAPI-first edition
Mathieu SpillebeenMathieu Spillebeen
@MathieuSpil
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
frontendunited.org/get-involved
compony.io/social
Freelance Drupal Frontend developer
Thank you forThank you forlisteninglistening