External Design Systems in Practice

A presentation at DrupalCon Europe in October 2019 in Amsterdam, Netherlands by Brian Perry

Slide 1

Slide 1

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

Slide 2

Slide 2

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

Slide 3

Slide 3

3

Slide 4

Slide 4

Slide 5

Slide 5

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

Slide 6

Slide 6

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

Slide 7

Slide 7

MIGRATION Nate Dev Proprietary & Confidential 7

Slide 8

Slide 8

MEANWHILE… Leon Brian XD FE Dev Proprietary & Confidential 8

Slide 9

Slide 9

PROTOTYPING Joleen Brian UX FE Dev Proprietary & Confidential 9

Slide 10

Slide 10

DRUPAL INTEGRATION or: Deciding Where To Put The Mustard

Slide 11

Slide 11

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

Slide 12

Slide 12

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

Slide 13

Slide 13

FEELS RIGHT FOR BOUNTEOUS Proprietary & Confidential 13

Slide 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

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

Slide 19

Slide 19

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

Slide 20

Slide 20

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

Slide 21

Slide 21

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

Slide 22

Slide 22

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

Slide 23

Slide 23

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

Slide 24

Slide 24

TIMBER COMPONENT – TRAINING ITEMS Proprietary & Confidential 24

Slide 25

Slide 25

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

Slide 26

Slide 26

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

Slide 27

Slide 27

Proprietary & Confidential 27

Slide 28

Slide 28

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

Slide 29

Slide 29

POST LAUNCH

Slide 30

Slide 30

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

Slide 31

Slide 31

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

Slide 32

Slide 32

PART 2: DECOUPLED DESIGN SYSTEMS Sharing between multiple templating engines

Slide 33

Slide 33

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

Slide 34

Slide 34

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

Slide 35

Slide 35

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

Slide 36

Slide 36

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

Slide 37

Slide 37

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

Slide 38

Slide 38

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

Slide 39

Slide 39

SCOPED CSS – PROJECT CARD Proprietary & Confidential 39

Slide 40

Slide 40

Proprietary & Confidential 40

Slide 41

Slide 41

Proprietary & Confidential 41

Slide 42

Slide 42

SCOPED CLASS NAMES Proprietary & Confidential 42

Slide 43

Slide 43

GLOBAL CSS Proprietary & Confidential 43

Slide 44

Slide 44

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

Slide 45

Slide 45

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

Slide 46

Slide 46

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

Slide 47

Slide 47

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

Slide 48

Slide 48

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

Slide 49

Slide 49

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

Slide 50

Slide 50

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

Slide 51

Slide 51

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

Slide 52

Slide 52

ONE MUSTARD DOES NOT FIT ALL Proprietary & Confidential 52

Slide 53

Slide 53

AT THE END OF THE DAY… Proprietary & Confidential 53

Slide 54

Slide 54

CONTRIB SLIDE or: Where should YOU put the mustard?

Slide 55

Slide 55

FEEDBACK SLIDE or: Where should YOU put the mustard?

Slide 56

Slide 56

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