Next Gen Design Systems with Pattern Lab, Twig, and Web Components

Design systems can be incredibly efficient at delivering consistent, reusable, and interoperable components and visual styles across an organization; saving time while keeping projects on-brand and in scope.

However, most valiant attempts to integrate Drupal into a large scale design system surface a deeply interconnected web of technical and political roadblocks:

- What happens if your organization can’t (or shouldn’t) go headless?
- How do you wire up more than one Drupal site to your Pattern Lab instance?
- How do you keep the sites already using your design system up to date?
- How do you prevent code from breaking as complexity and scope balloon?

In this session, I’ll share our solutions to some of the toughest challenges teams face when building, shipping, and maintaining a next-generation design system - specifically our design system, Bolt, including:

- Strategies to decouple your design system from Drupal and from Pattern Lab
- Ensuring multiple sites and projects across the organization ship with the design system’s single-source-of-truth.
- Automatically generating schema docs on component data expectations and configuration options.
- How web components can provide many of the same benefits as going headless with Drupal without the trade-offs.

Transcript

1. (with Pattern Lab, Twig, and <web-components>) Next Gen Design Systems @salem_ghoweri
2. Salem Ghoweri • Twitter @salem_ghoweri • Lead Frontend Architect at Pegasystems • Core Pattern Lab Contributor
3. • Founded in 1983 in Cambridge, MA • Develops CRM, BPM, and process automation software • 4,200 employees across 38 locations • Services many of the world’s largest companies • 7 enormous Drupal-based websites with many internal stakeholders
4. boltdesignsystem.com
5. “One of the best, most cutting edge design systems out there.” Evan Lovely CTO at Basalt Inc, Pattern Lab maintainer
7. “A design system offers a library of visual style, components, and other concerns, documented and released […] as 
 code and design tools…” - Nathan Curtis 10+ year design systems veteran,
 EightShapes founder, 
 author of “Modular Web Design”
8. Visual Styles
9. Components
10. Docs
11. …Pattern Lab?
12. Design System + + + = Visual Styles Components Tools Docs (and a lot more)
13. The benefits? • Higher quality, more consistent, scalable solutions • Easier to maintain, more manageable codebase • Reduces duplicate design / dev work • Fewer bugs & regressions • Faster time to market
14. At a Glance • The rise and fall and rise of our design system • Decoupling your design system • Shipping with a single source of truth • Web Components vs Headless
15. The rise and fall of our first design system
16. 2 years ago… (pre-design-system)
17. • Many Drupal 7 sites • 30 seconds to compile Compass • No reusable components or templates; lots of redundant work • Heavily hacked modified version of Bootstrap Things weren’t great…
18. A Special Button A Special Button This button is on site 1. This totally unique button is on site 2. This button is in site 1’s database. This button is hardcoded on some pages on Site 2. A Special Button A Special Button This different button is also on site 1, in a different CSS file. A Special Button So is this one. A Special Button This too but with a drop shadow. This button is in site 3’s database. A Special Button This button is in site 4’s database. A Special Button A Special Button This button is used on one page out of 2,000. A Special Button This button is in site 5’s database. A Special Button A Special Button This button has a slightly different hex code. A red one for site 1’s homepage. A Special Button
20. Tools Generic Elements Settings Objects Components Themes • ITCSS Architecture + BEM + Class Prefixes • Gulp build process; SVG Icons • Responsive, lazy-loaded images; async font loading • Pattern Library via Pattern Lab PHP 2 for Twig • Eventually moved FE code out of Drupal to separate repo; installed via Composer Pseudo-Design-System: PegaKit Utilities
21. Pre-Design-System Design System Growing Pains Design System Team = 1 person Heavy technical debt from previous site incarnations Dist folder committed…
22. “By the way… does that thing work 
 in Drupal 8?”
23. Refactor time! • Hacked-to-bits Bootstrap removed • Added atomic-design based Twig namespaces + {{ attributes }} support • Major buildout of new components + improvements on existing ones • By mid-2017, provided the frontend code for 3 new D8 sites + pega.com's updated D7 site
24. Our first design system still flopped… kind of.
25. PegaKit, 1 Year Later ⚰ Design System “team” = still 1 person New kinds of technical debt Shipped everything but the kitchen sink, even if you only want a fork ⚖ Git branches for publishing / versioning didn’t scale
26. Constant Iteration: Keep the best parts, fix the worst parts
27. • After addressing shortcomings, rebranded to “Bolt” • Open Source on Github: https://github.com/bolt- design-system/bolt • Cleaned up and reorganized the entire codebase to be versioned and published as smaller pieces Bolt Design System
28. Part 3. Design System Reborn: What We Learned
29. Decoupling Your Design System
30. • Everything we ship lives in one place: components, shared styles, tools, etc • Locally our system is wired up to apps like Pattern Lab, Drupal Lab, & our Twig-based static docs site • Actual examples we can reference! Decoupling Your Design System
31. Drupal 8 Drupal 7 SSO Community Marketing Marketing Static Site External, Platform-specific External, App-specific Blog Academy Event Site Sharepoint Pega Apps Internal, Platform-agnostic Decoupled Design System Pattern Lab Drupal Lab Docs Site Internal, Platform-specific Sales Internal Apps Intranet
32. …Because The “Old Way” Doesn’t Scale • Harder to delete code • Distributing your system modularly is very difficult • Harder to consume downstream • Harder to reorganize, evolve, and grow with time • Front-end components need NPM to properly manage dependencies
33. Reorganize Your Components For Reusability…
34. Reorganize Your Components For Reusability…
35. Anatomy of a Drupal-Friendly Component
36. Anatomy of a Drupal-Friendly Component {# Internally used Twig file our component might internally pull in — note the underscore! #}
37. Anatomy of a Drupal-Friendly Component // Main JavaScript logic lives here @define export class BoltDropdown extends BoltComponent() { static is = 'bolt-dropdown'; static props = { autoOpen: props.boolean, collapse: props.boolean, children: props.any,
38. Anatomy of a Drupal-Friendly Component # Schemas = define the component’s rules $schema: http: //json-schema.org/draft-04/schema# title: Dropdown type: object properties: title: type: string description: The toggle title text center: type: boolean description: "`True` to center the toggle title" default: false
39. Anatomy of a Drupal-Friendly Component // Unique Component-specific styles @import ‘@bolt/core/styles/index.scss’; bolt-dropdown { display: block;
40. Anatomy of a Drupal-Friendly Component {# Twig template used everywhere #} {% embed "@bolt-components-dropdown/dropdown.twig" with { title: "Toggle Menu" } %} {% block content %} Example Dropdown Content
41. Anatomy of a Drupal-Friendly Component // Polyfill, then async load our main JavaScript import { polyfillLoader } from '@bolt/core'; polyfillLoader.then((res) => { import('./dropdown.js'); });
42. Anatomy of a Drupal-Friendly Component `npm install @bolt/components-dropdown`
43. Anatomy of a Drupal-Friendly Component Markdown docs for NPM and Github
44. Demo
45. Pattern Lab != Your Design System
46. Avoid Pattern Lab-isms • Avoid sidecar demo files: button~large.json • Never use Pattern Lab’s shorthand Twig syntax: 
 (ex. @include “atoms-button.twig”) • Avoid using markdown files 
 (ex. button.md) • Avoid using Pattern Lab’s global data 
 (ex. data.json) • Use Twig namespaces, just don’t hard code them!
49. Shipping a single source of truth
50. Schema-powered Design System
51. Schema-Powered Docs in Pattern Lab
52. Schema Powered Demos in Pattern Lab
53. Pattern Lab Demos
 UPDATED Schema Docs in Pattern Lab UPDATED Component’s Validation Rules UPDATED Pattern Lab Demos Schema Docs in Pattern Lab Component’s Validation Rules Update a Schema File
54. Data-powered Design System
57. Publish Your Design System to NPM
59. Web Components vs Headless
60. Should I go headless? • Team large enough? • Do you need the ability to use Twig templates? • Using community contrib modules / plugins? • Single page apps / JavaScript heavy experiences?
61. • 4 core technologies to build reusable, native-like components: • Custom Elements: defines a custom HTML tag your component uses • Shadow DOM: encapsulated markup and styling inside a component • HTML Templates: reusable HTML templates • ES6 Modules: import & use components in other components • No JavaScript framework required BUT there’s a ton of options available if you do want one • Browser support getting good — and with some polyfills, including IE 11! Web Components: Build Once, Ship Everywhere
62. <bolt-button color=“primary"> Hello world! </bolt-button> Web Components: Build Once, Ship Everywhere
65. https://custom-elements-everywhere.com/
66. Recap
67. Design systems aren’t magic, and they are a lot of hard work. (but they’re worth it!)
69. 69 “There is no way we’d be able to hit the launch date without Bolt. We were able to implement in days what normally would takes weeks. I was cautiously optimistic investing resources in a design system, but I’m glad we did.” Shakib Mostafa Senior Manager, Digital Engineering at Pegasystems
70. 1 Day 1 Week 1 front-end designer, code finished after 2 engineers, code not finished after
72. Recap • Decoupling your design system from Drupal — and Pattern Lab can help how you organize, maintain and scale your system • Tools like Lerna help you publish your design system’s pieces • Schemas + JSON provide a powerful way to keep your system up to date, validated, and documented • As an alternative to headless Drupal, use web components for many of the same benefits
73. (with Pattern Lab, Twig, and <web-components>) Next Gen Design Systems @salem_ghoweri