back to basics d8 theming export - 2018.badcamp.org · • mapped data to components via ui...
TRANSCRIPT
![Page 1: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/1.jpg)
BACK TO BASICS DRUPAL 8 THEMINGPRESENTED BY BRIAN PERRY
June 28, 2018
Slides: http://bit.ly/basics-d4d
![Page 2: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/2.jpg)
HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
BRIAN PERRY
• Interactive Developer at HS2 Solutions
• Rocking the Chicago suburbs
• Lover of all things components
• ... and Nintendo
d.o: brianperryTwitter: bricomedy
Github: backlineint
Nintendo: wabrian
brianperryinteractive.com
Hi!
![Page 3: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/3.jpg)
HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
HS2 SOLUTIONS
![Page 4: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/4.jpg)
NOVEMBER 19, 2015
![Page 5: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/5.jpg)
HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
NOV 19, 2015 - DRUPAL 8 IS RELEASED
“Welp, guess I need to learn Twig…”
Those were simpler times.
![Page 6: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/6.jpg)
HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
MODERN FRONT END IS AMAZING
• Automation
• NPM, Yarn, Gulp, Grunt, Webpack, etc.
• SASS, PostCSS
• CSS Grid
• Design systems and pattern libraries
• Component libraries - Bootstrap, Foundation
• The Continued Rise of JS
• ES6
• Frameworks – React, Vue, Angular
• Ever growing module ecosystem
![Page 7: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/7.jpg)
HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
MODERN FRONT END IS A DUMPSTER FIRE
• Automation
• NPM, Yarn, Gulp, Grunt, Webpack, etc.
• SASS, PostCSS
• CSS Grid
• Design systems and pattern libraries
• Component libraries - Bootstrap, Foundation
• The Continued Rise of JS
• ES6
• Frameworks – React, Vue, Angular
• Ever growing module ecosystem
![Page 8: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/8.jpg)
HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
SINCE NOVEMBER 19, 2015 I HAVE…
• Become comfortable with Twig
• Incorporated Pattern Lab Into workflow
• Mapped data to components via Twig
• Mapped data to components via UI Patterns Module
• Managed Drupal sites with Composer
• Decoupled
• Progressively decoupled Drupal/Angular site
• Fully Decoupled Drupal/React sites (SPA/Static)
• Learned (some) ES6
• Dabbled with CSS Grid
![Page 9: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/9.jpg)
While creating new processes, it might help to find a balance between things that break new ground, but
maybe also might simplify the workflow.
'AN O N YM O US’
PERSON FROM MY PEER REVIEW WHO WAS PROBABLY 100% RIGHT
“
![Page 10: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/10.jpg)
BACK TO BASICS
Ba*sic /basick/ adjective 1. forming an essential foundation or starting point; fundamental.
![Page 11: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/11.jpg)
BASIC != EASY
![Page 12: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/12.jpg)
12HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
OPO (ONE PERSON’S OPINION) WARNING
![Page 13: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/13.jpg)
All. Of. The. Things.
DEPENDENCY MANAGEMENT
AUTOMATIONCSS PREPROCESSING
CSS LAYOUT
JAVASCRIPTTWIG
COMPONENTS
SITE BUILDINGLOCAL DEV ENVIRONMENTS
![Page 14: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/14.jpg)
14HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
o Use Bower (mostly a reminder for me)
o Worry about the hot new thing (but feel free to use
Yarn if team/project prefers it)
DEPENDENCY MANAGEMENT
DO
DON’T
ü Manage Drupal Dependencies with Composer
ü Manage JS Dependencies with NPM
• Get REALLY comfortable with managing Composer and NPM dependencies
NEXT STEPS
D ependency hell is a real
th ing, but ignoring it
w on ’t m ake it go aw ay.
![Page 15: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/15.jpg)
15HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
• Where does all of this stuff go?
• Composer dependencies – root of Drupal project (see drupal-composer/drupal-project for example)
• Node dependencies – root of your theme
DEPENDENCY MANAGEMENT
![Page 16: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/16.jpg)
16HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
DEPENDENCY MANAGEMENT
![Page 17: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/17.jpg)
17HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
o Get caught up in a battle over Gulp / Grunt / Webpack. If it works better for your team, use it.
AUTOMATION
DO
DON’T
ü Use NPM to run scripts
ü Use Gulp as a task runner (my personal preference)
It is w orth the in itial
effort to let the robots do
the w ork for you.
![Page 18: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/18.jpg)
18HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
AUTOMATION
![Page 19: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/19.jpg)
19HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
o Nest like a madman
o Create individual css files per partial (yet)
CSS PROCESSING
DO
DON’T
ü Preprocess with SASS & compile to a single CSS file
ü Use SASS variables
ü Post process with Autoprefixer
• Follow BEM class naming conventions
NEXT STEPS
W hen used responsibly a
little bit of C SS processing
can go a long w ay.
![Page 20: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/20.jpg)
20HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
CSS PREPROCESSING
PACKAGE.JSON GULPFILE.JS
![Page 21: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/21.jpg)
21HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
CSS PREPROCESSING – NEXT STEPS - BEM
![Page 22: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/22.jpg)
22HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
CSS PREPROCESSING
![Page 23: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/23.jpg)
23HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
o Default to using frameworks like bootstrap/foundation if you can use CSS Grid
CSS LAYOUT
DO
DON’T
ü Use CSS Grid if project browser requirements will allow it.
• Build layouts you’ve never thought possible
NEXT STEPSB uild w ith C SS G rid today
for a better tom orrow .
![Page 24: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/24.jpg)
24HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
CSS LAYOUT
![Page 25: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/25.jpg)
25HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
o Just copy and paste some JS code from Stack Overflow and add it to a global library.
o Default to using jQuery for everything
JAVASCRIPT
DO
DON’T
ü Properly include your JS as libraries
ü Use Drupal behaviors
• Use babel to compile your JS (wait, what?)
• Start becoming familiar with ES6 (and beyond) syntax
NEXT STEPS
The tim e to m odernize
your approach to
JavaScript is now .
![Page 26: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/26.jpg)
26HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
JAVASCRIPT – DRUPAL BEHAVIORS
![Page 27: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/27.jpg)
27HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
• Temporary Solution:
• Repurpose package.json from /core in your theme
• You will need to merge your own scripts / dependencies
• Copy /scripts/js from /core into your theme
• Run npm install to add dependencies
• You can now run scripts to compile *.es6.js files:
• npm run build:js
• npm run watch:js
• Bonus - you get Core’s linting rules as well.
• Issue to support a less copy and paste solution: https://www.drupal.org/project/drupal/issues/2957390
JAVASCRIPT – NEXT STEPS – COMPILE JS
![Page 28: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/28.jpg)
28HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
JAVASCRIPT
![Page 29: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/29.jpg)
29HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
o Get too carried away with logic and Twig magic in templates
TWIG
DO
DON’T
ü Get to know all of the great things Twig can do (tags, filters, functions, etc)
ü Follow Drupal Twig conventions in Drupal templates
ü Get great at debuggingTw ig can do a bunch of
cool stuff, but at the end
of the day it’s just the
m arkup that w e know and
love.
![Page 30: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/30.jpg)
30HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
• Twig Recipes – Making Drupal 8 Render the Markup You Want
• In the next session slot - 4:30 – 144
TWIG
![Page 31: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/31.jpg)
31HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
TWIG
![Page 32: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/32.jpg)
32HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
o Overcomplicate your use of Twig Include / Extend
o Fail the ‘time to markup test’
COMPONENTS
DO
DON’T
ü Use template suggestions responsibly
ü Twig Include/Extend/Embed for reuse
• Use a Pattern Library / Style Guide
• Integrate with an external Pattern Library
NEXT STEPS
Start by th inking in
com ponents, and grow
into using a full pattern
library driven w orkflow .
![Page 33: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/33.jpg)
33HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
COMPONENTS – INCLUDE/EXTEND/EMBED
paragraph--marketing-content-section.html.twig
![Page 34: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/34.jpg)
34HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
COMPONENTS
![Page 35: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/35.jpg)
35HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
o Make ‘manage display’ in the admin UI a liar
SITE BUILDING
DO
DON’T
ü Use Responsive images
ü Use Drupal Layouts (Layout API / Layout Discovery)
• Get ready for Layout Builder
NEXT STEPS Em brace layouts now to
prepare for D rupal’s
bright layout future.
![Page 36: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/36.jpg)
36HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
• Registering Layouts
mytheme.layouts.yml
SITE BUILDING - LAYOUTS
![Page 37: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/37.jpg)
37HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
SITE BUILDING
![Page 38: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/38.jpg)
38HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
o Sink crazy amounts of time into maintaining your VM
BONUS: LOCAL DEV ENVIRONMENT
DO
DON’T
ü Use a local dev environment consistent with the rest of your team
• Experiment with Docker VMs (my preference is Lando)
• Run all front end tooling in containers
NEXT STEPS V M configuration can help
elim inate versioning
issues and m ake front end
tools m ore easily available .
![Page 39: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/39.jpg)
39HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
BONUS: LOCAL DEV ENVIRONMENT
![Page 40: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/40.jpg)
WAIT A MINUTE…
Is Drupal not the hard part of Drupal
theming?
![Page 41: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/41.jpg)
41HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
o Let the Bartik stereotype live on (be more Umami)
IN REVIEW
DO
DON’T
ü Create beautiful, responsive, fast, accessible Drupal sites
• Share your work and contribute back
NEXT STEPSD 8 Front End FTW !
![Page 42: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/42.jpg)
THANKS!Brian P erry
Interactive DeveloperH S2 Solutions, Inc.
brian.perry@ hs2solutions.com
@ bricom edyd.o: brianperry
![Page 43: back to basics d8 theming export - 2018.badcamp.org · • Mapped data to components via UI Patterns Module • Managed Drupal sites with Composer • Decoupled • Progressively](https://reader035.vdocuments.us/reader035/viewer/2022062920/5f01f4e37e708231d401dd98/html5/thumbnails/43.jpg)
43HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY
HOW COULD THERE POSSIBLY BE MORE QUESTIONS?