External Design Systems in Practice

EXTERNAL DESIGN SYSTEMS IN PRACTICE Brian Perry October 29, 2019 DrupalCon Europe Slides: http://bit.ly/TBD

BRIAN PERRY • Lead Front End Dev at Bounteous • Rocking the Chicago ‘burbs • Lover of all things components… …and Nintendo d.o: brianperry twitter: bricomedy github: backlineint nintendo: wabrian brianperryinteractive.com 2

3

PART 1: A REBRANDING STORY or: Using an External Design System in a Traditional CMS Architecture

REBRANDING • Brand launch targeted for November 5, 2018 • Website is only one part in a larger coordinated effort Proprietary & Confidential 6

MIGRATION Nate Dev Proprietary & Confidential 7

MEANWHILE… Leon Brian XD FE Dev Proprietary & Confidential 8

PROTOTYPING Joleen Brian UX FE Dev Proprietary & Confidential 9

DRUPAL INTEGRATION or: Deciding Where To Put The Mustard

VS Past projects: Pattern Lab embedded in theme Current state: Independent Projects • Easier for Drupal to access components • Drupal Repository • Simplified build process • Design System Repository • Easier for developers to understand Promotes use beyond a single Drupal project. • Prone to Drupalisms leaking into components Where should we put the mustard? 11

LET’S KEEP THE MUSTARD SEPARATE • Keeps components Drupal agnostic • Continues to encourage prototyping • Already has been living as a separate project • Some gut feelings: • Conceptually feels like the right thing • Advocated by many in the community who I trust • May be able to re-use on other web projects related to our brand. • Feels right for a company with diverse skills Proprietary & Confidential 12

FEELS RIGHT FOR BOUNTEOUS Proprietary & Confidential 13

REQUIRING THE DESIGN SYSTEM composer.json – in design system Proprietary & Confidential 14

REQUIRING THE DESIGN SYSTEM composer.json – in Drupal project Add Design system repository Proprietary & Confidential 15

REQUIRING THE DESIGN SYSTEM composer.json – in Drupal project Define how to handle design-system installer types Proprietary & Confidential 16

REQUIRING THE DESIGN SYSTEM composer require hs2studio/hs2solutionsdesignsystem • Required dev for pre-launch cycle Updating composer update hs2studio/hs2solutionsdesignsystem • Releases are tagged in design system • Can require design system at a specific release Proprietary & Confidential 17

INCORPORATING INTO THEME hsnew.libraries.yml Global library with compiled assets Proprietary & Confidential 18

INCORPORATING INTO THEME hsnew.info.yml Twig namespaces for ‘atomic’ component categories Proprietary & Confidential 19

COMPONENT WORKFLOW Sean Wade Design System Drupal Design System Components Drupal Component Integration • Created the bulk of design system • Wired design system components to components, primarily outside of Drupal. • Only 2 commits in Drupal repo Proprietary & Confidential Drupal content and layouts. • Majority of effort in Drupal repository • Minor design system refactoring when necessary 20

WE’RE GOING TO NEED MORE MUSTARD or: How an External Design System Helped Us Handle Changes in Scope

LUNAMETRICS TRAINING SITE SCOPE Training registration rebuild descoped • Existing WordPress site lives on at training.bounteous.com subdomain. • Needs to match look and feel of D8 site This design system thing seems pretty handy now. Proprietary & Confidential 22

WORDPRESS INTEGRATION Worked with Wahila Creative to re-theme the site. • Introduced us to Timber plugin which makes it possible to use Twig in WordPress. • Initial prototype used Timber and design system. Proprietary & Confidential 23

TIMBER COMPONENT – TRAINING ITEMS Proprietary & Confidential 24

TIMBER COMPONENT – TRAINING ITEMS training-module.php Proprietary & Confidential 25

TIMBER COMPONENT – TRAINING ITEMS training-element.php Proprietary & Confidential 26

Proprietary & Confidential 27

DEMAC MEDIA Demac Media joins the family… very close to launch. • Rebranded as bounteous.ca • Smaller scale site, will differ from bounteous.com look and feel. • More manual / selective use of design system assets. Proprietary & Confidential 28

POST LAUNCH

ONBOARDING Lessons Learned • Documentation is important • Kyle Developer Steve Developer Not just how, but why. • Must have an efficient workflow for design system experimentation in CMS. • Post launch, team members rotate. • Need to be strict about versioning. • Majority of tickets are Drupal specific • External approach can add overhead. fixes. Faced with the design system they may wonder: Why can’t I just Drupal? Proprietary & Confidential 30

LINES BETWEEN CMSES BLUR People will expect front-end changes to apply everywhere. Kristen Jon QA ‘Marketing’ Proprietary & Confidential 31

PART 2: DECOUPLED DESIGN SYSTEMS Sharing between multiple templating engines

A PROGRESSIVELY DECOUPLED PROJECT Drupal • ‘Traditional’ Drupal Build • Provides APIs to React Combined • Traditional Drupal Content React • Consumes Drupal APIs • Authenticated User Portal and • Routes owned by React for User Portal Proprietary & Confidential 33

DX – MULTIPLE DEVELOPER CONTEXTS Drupal • Drupal implementation without React dependency. Proprietary & Confidential Combined • Test real world integration React • Develop and test without local Drupal environment. • Hot Module Replacement 34

TEMPLATING AND STYLES Drupal • Twig • Unique styles and components Combined • Global styles that apply to both. • Few (if any) shared React • JSX • Unique styles and components components Proprietary & Confidential 35

COULD A DESIGN SYSTEM SERVE BOTH? Drupal Design System React ??? • Twig • Unique styles and components Proprietary & Confidential • JSX • Global styles that apply to both. • Unique styles and components 36

CSS IN JS IS ALL THE RAGE* * occasional emphasis on RAGE Proprietary & Confidential 37

CSS MODULES • Not a package • Handled by a build process (typically Webpack) • Scopes styles locally by default • Can play nice with Sass • Has a super snarky logo Proprietary & Confidential 38

SCOPED CSS – PROJECT CARD Proprietary & Confidential 39

Proprietary & Confidential 40

Proprietary & Confidential 41

SCOPED CLASS NAMES Proprietary & Confidential 42

GLOBAL CSS Proprietary & Confidential 43

INITIAL APPROACH – SEPARATE REPOS Drupal • Global CSS file combines design system partials and Drupal specific partials Proprietary & Confidential Design System • Gatsby site to demonstrate global styles • Projects consume partials as needed React • Imported in JS • Mix of global and component scope • Also project specific CSS 44

CONSUMING THE DESIGN SYSTEM • Use ~ for non-relative imports Proprietary & Confidential 45

NOT WELL RECEIVED BY TEAM • Managing dependencies is tedious • Multiple PRs for a single feature • Newcomers unsure where to make changes • Isolated React development possible without standalone repo • Really just one website at the end of the day, right? Proprietary & Confidential 46

REVISED APPROACH – SINGLE REPO Drupal Tooling Proprietary & Confidential Website React Tooling 47

LESSONS LEARNED • Different Webpack build quirks can be a pain • Dependency Tradeoffs • Multiple repos introduces overhead • One repo opens doors to regression • Don’t over design your design system • Is this really even a design system? • More shared styles or design tokens. Proprietary & Confidential 48

WHAT WE AREN’T DOING (YET) • Sharing Components • Limited overlap thus far • Small opportunities for shared JS • Full component re-use probably requires more js – React or Web Components. • Monorepo approach to manage dependencies • Twig and React in a combined Storybook Proprietary & Confidential 49

PART 3: TO EXTERNAL OR NOT EXTERNAL or: Where should YOU put the mustard?

THINGS TO CONSIDER • Would there be value in re-using these components? • Sometimes hard to know for sure. • What role do prototypes play in project? • Is prototyping in code important? • Will design system be published independently? • How will this align with your team’s workflow? • How compatible is this with your team’s makeup? • Will it allow more people to contribute? • Is locking down design system desirable? • Component related Drupal challenges Proprietary & Confidential 51

ONE MUSTARD DOES NOT FIT ALL Proprietary & Confidential 52

AT THE END OF THE DAY… Proprietary & Confidential 53

CONTRIB SLIDE or: Where should YOU put the mustard?

FEEDBACK SLIDE or: Where should YOU put the mustard?

Q&A Brian Perry Lead Front End Developer Email: brian.perry@bounteous.com