BACK TO BASICS DRUPAL 8 THEMING PRESENTED BY BRIAN PERRY June 28, 2018 Slides: http://bit.ly/basiCs-d4d BRIAN PERRY Hi! • Interactive Developer at HS2 Solutions • Rocking the Chicago suburbs • Lover of all things components • ... and Nintendo d.o: brianperry Twitter: bricomedy Github: backlineint Nintendo: wabrian brianperryinteractive.com HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY HS2 SOLUTIONS HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY NOVEMBER 19, 2015 NOV 19, 2015 - DRUPAL 8 IS RELEASED “Welp, guess I need to learn Twig…” Those were simpler times. 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 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 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 HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY While creating new processes,“ it might help to find a balance between things that break new ground, but maybe also might simplify the workflow. 'ANONYMOUS’ PERSON FROM MY PEER REVIEW WHO WAS PROBABLY 100% RIGHT BACK TO BASICS Ba*sic /basick/ adjective 1. forming an essential foundation or starting point; fundamental. BASIC != EASY OPO (ONE PERSON’S OPINION) WARNING HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 12 All. Of. The. Things. DEPENDENCY CSS LAYOUT COMPONENTS MANAGEMENT JAVASCRIPT SITE BUILDING AUTOMATION TWIG LOCAL DEV CSS PREPROCESSING ENVIRONMENTS DEPENDENCY MANAGEMENT DO ü Manage Drupal Dependencies with Composer ü Manage JS Dependencies with NPM DON’T 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 hell is a real thing, but ignoring it won’t make it go away. NEXT STEPS • Get REALLY comfortable with managing Composer and NPM dependencies HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 14 DEPENDENCY MANAGEMENT • 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 HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 15 DEPENDENCY MANAGEMENT HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 16 AUTOMATION DO ü Use NPM to run scripts ü Use Gulp as a task runner (my personal preference) DON’T o Get caught up in a battle over Gulp / Grunt / Webpack. If it works better for your team, use it. It is worth the initial effort to let the robots do the work for you. HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 17 AUTOMATION HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 18 CSS PROCESSING DO ü Preprocess with SASS & compile to a single CSS file ü Use SASS variables ü Post process with Autoprefixer DON’T When used responsibly a o Nest like a madman little bit of CSS processing can go a long way. o Create individual css files per partial (yet) NEXT STEPS • Follow BEM class naming conventions HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 19 CSS PREPROCESSING PACKAGE.JSON GULPFILE.JS HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 20 CSS PREPROCESSING – NEXT STEPS - BEM HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 21 CSS PREPROCESSING HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 22 CSS LAYOUT DO ü Use CSS Grid if project browser requirements will allow it. DON’T o Default to using frameworks like bootstrap/foundation if you can use CSS Grid Build with CSS Grid today NEXT STEPS for a better tomorrow. • Build layouts you’ve never thought possible HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 23 CSS LAYOUT HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 24 JAVASCRIPT DO ü Properly include your JS as libraries ü Use Drupal behaviors DON’T o Just copy and paste some JS code from Stack Overflow and add it to a global library. The time to modernize your approach to o Default to using jQuery for everything JavaScript is now. NEXT STEPS • Use babel to compile your JS (wait, what?) • Start becoming familiar with ES6 (and beyond) syntax HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 25 JAVASCRIPT – DRUPAL BEHAVIORS HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 26 JAVASCRIPT – NEXT STEPS – COMPILE JS • 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 HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 27 JAVASCRIPT HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 28 TWIG DO ü 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 debugging Twig can do a bunch of DON’T cool stuff, but at the end of the day it’s just the o Get too carried away with logic and Twig magic in markup that we know and templates love. HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 29 TWIG • Twig Recipes – Making Drupal 8 Render the Markup You Want • In the next session slot - 4:30 – 144 HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 30 TWIG HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 31 COMPONENTS DO ü Use template suggestions responsibly ü Twig Include/Extend/Embed for reuse DON’T o Overcomplicate your use of Twig Include / Extend Start by thinking in o Fail the ‘time to markup test’ components, and grow into using a full pattern library driven workflow. NEXT STEPS • Use a Pattern Library / Style Guide • Integrate with an external Pattern Library HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 32 COMPONENTS – INCLUDE/EXTEND/EMBED paragraph--marketing-content-section.html.twig HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 33 COMPONENTS HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 34 SITE BUILDING DO ü Use Responsive images ü Use Drupal Layouts (Layout API / Layout Discovery) DON’T o Make ‘manage display’ in the admin UI a liar NEXT STEPS Embrace layouts now to prepare for Drupal’s • Get ready for Layout Builder bright layout future. HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 35 SITE BUILDING - LAYOUTS • Registering Layouts mytheme.layouts.yml HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 36 SITE BUILDING HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 37 BONUS: LOCAL DEV ENVIRONMENT DO ü Use a local dev environment consistent with the rest of your team DON’T o Sink crazy amounts of time into maintaining your VM NEXT STEPS VM configuration can help eliminate versioning issues and make front end • Experiment with Docker VMs (my preference is Lando) tools more easily available. • Run all front end tooling in containers HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 38 BONUS: LOCAL DEV ENVIRONMENT HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 39 WAIT A MINUTE… Is Drupal not the hard part of Drupal theming? IN REVIEW DO ü Create beautiFul, responsive, Fast, accessible Drupal sites DON’T o Let the Bartik stereotype live on (be more Umami) D8 Front End FTW! NEXT STEPS • Share your work and contribute back HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 41 THANKS! Brian Perry Interactive Developer HS2 Solutions, Inc. [email protected] @bricomedy d.o: brianperry HOW COULD THERE POSSIBLY BE MORE QUESTIONS? HS2 SOLUTIONS | CONFIDENTIAL AND PROPRIETARY 43.