A presentation at Decoupled Days in in New York, NY, USA by Brian Perry
DECOUPLING YOUR DESIGN SYSTEM Brian Perry July 18, 2019 Decoupled Days Slides: http://bit.ly/decoupling-ds
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: 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
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 • Hot Module Replacement in Drupal Proprietary & Confidential 49
TO EXTERNAL OR NOT EXTERNAL or: Where should YOU put the mustard?
YOUR NEEDS MAY BE DIFFERENT Proprietary & Confidential 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 52
ONE MUSTARD DOES NOT FIT ALL Proprietary & Confidential 53
FEELS RIGHT FOR BOUNTEOUS Proprietary & Confidential 54
Thank You! Brian Perry Lead Front End Developer Email: brian.perry@bounteous.com
Decoupling isn’t just for your data — decoupling your design through the use of a shared design system can provide flexibility and re-use that could otherwise be impossible. This session will explore the advantages and disadvantages of developing a design system that is an external dependency of a project — both from the context of a traditional CMS architecture and a decoupled Drupal architecture.
From the traditional CMS architecture perspective we’ll examine a rebranding project that shares a design system between a Drupal site and multiple WordPress sites. In reviewing this rebranding effort, we’ll take a closer look at an approach to a shared design system including:
From the decoupled Drupal perspective we’ll examine a progressively decoupled Drupal and React project. Through this project we’ll explore approaches to using a shared design system on decoupled Drupal projects, including:
By the end of this session you will have a better understanding of when using an external design system could benefit your project, along with a clearer understanding of how this approach could be implemented — both in projects using Twig and a projects using a mix of templating engines.
The following resources were mentioned during the presentation or are useful additional information.
The new Bounteous site (Drupal 8)
The training section of the Bounteous site (WordPress)
Allows you to use Twig in WordPress
An example of a build that might not benefit from an external design system. This blog post outlines their rationale to move to a more traditional Drupal architecture.
Lullabot Podcast with more detail on the decisions that influenced Lullabot’s approach to a rebuild.
The Official CSS Modules Documentation
A CSS modules series on CSS Tricks
Here’s what was said about this presentation on social media.
for free. You
can too.