External Design Systems in Practice

EXTERNAL DESIGN SYSTEMS IN PRACTICE Brian Perry June 7, 2019 Twin Cities Drupal Camp Slides: http://bit.ly/externalds-tcd

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

3

A REBRANDING STORY or: How I Fell Into Using an External Design System

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

DECOUPLED DESIGN SYSTEMS Sharing between multiple templating engines

A PROGRESSIVELY DECOUPLED PROJECT Drupal • ‘Traditional’ Drupal Build • Provides APIs to React Dreact (DR8act?) • 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 PROJECTS? 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

DESIGN SYSTEM INFORMS BOTH PROJECTS 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

WHAT WE AREN’T DOING (YET) • Sharing Components • Limited overlap thus far • Probably requires more js – React or Web Components. • Hot Module Replacement in Drupal Proprietary & Confidential 46

LESSONS LEARNED • Different Webpack build quirks can be a pain. • Versioning continues to be important • Additional automation could help here. • Most likely wouldn’t use Style Guide Guide project again • Gatsby Docz plugin as an alternative • Styling scope is an issue – style guide styles can leak into components Proprietary & Confidential 47

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

YOUR NEEDS MAY BE DIFFERENT Proprietary & Confidential 49

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? Proprietary & Confidential 50

FEELS RIGHT FOR BOUNTEOUS Proprietary & Confidential 51

Proprietary & Confidential 52 48

Proprietary & Confidential 53 48

Thank You! Brian Perry Lead Front End Developer Email: brian.perry@bounteous.com