Tweet
Tweet

Slide 1

Slide 1 text

(with Pattern Lab, Twig, and ) Next Gen Design Systems @salem_ghoweri

Slide 2

Slide 2 text

Salem Ghoweri • Twitter @salem_ghoweri • Lead Frontend Architect at Pegasystems • Core Pattern Lab Contributor

Slide 3

Slide 3 text

• 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

Slide 4

Slide 4 text

boltdesignsystem.com

Slide 5

Slide 5 text

“One of the best, most cutting edge design systems out there.” Evan Lovely CTO at Basalt Inc, Pattern Lab maintainer

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

“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”

Slide 8

Slide 8 text

Visual Styles

Slide 9

Slide 9 text

Components

Slide 10

Slide 10 text

Docs

Slide 11

Slide 11 text

…Pattern Lab?

Slide 12

Slide 12 text

Design System + + + = Visual Styles Components Tools Docs (and a lot more)

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

The rise and fall of our first design system

Slide 16

Slide 16 text

2 years ago… (pre-design-system)

Slide 17

Slide 17 text

• 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…

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Pre-Design-System Design System Growing Pains Design System Team = 1 person Heavy technical debt from previous site incarnations Dist folder committed…

Slide 22

Slide 22 text

“By the way… does that thing work 
 in Drupal 8?”

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

Our first design system still flopped… kind of.

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

Constant Iteration: Keep the best parts, fix the worst parts

Slide 27

Slide 27 text

• 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

Slide 28

Slide 28 text

Part 3. Design System Reborn: What We Learned

Slide 29

Slide 29 text

Decoupling Your Design System

Slide 30

Slide 30 text

• 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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

…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

Slide 33

Slide 33 text

Reorganize Your Components For Reusability…

Slide 34

Slide 34 text

Reorganize Your Components For Reusability…

Slide 35

Slide 35 text

Anatomy of a Drupal-Friendly Component

Slide 36

Slide 36 text

Anatomy of a Drupal-Friendly Component {# Internally used Twig file our component might internally pull in — note the underscore! #}

Slide 37

Slide 37 text

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,

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Anatomy of a Drupal-Friendly Component // Unique Component-specific styles @import ‘@bolt/core/styles/index.scss’; bolt-dropdown { display: block;

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

Anatomy of a Drupal-Friendly Component // Polyfill, then async load our main JavaScript import { polyfillLoader } from '@bolt/core'; polyfillLoader.then((res) => { import('./dropdown.js'); });

Slide 42

Slide 42 text

Anatomy of a Drupal-Friendly Component `npm install @bolt/components-dropdown`

Slide 43

Slide 43 text

Anatomy of a Drupal-Friendly Component Markdown docs for NPM and Github

Slide 44

Slide 44 text

Demo

Slide 45

Slide 45 text

Pattern Lab != Your Design System

Slide 46

Slide 46 text

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!

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

48

Slide 49

Slide 49 text

Shipping a single source of truth

Slide 50

Slide 50 text

Schema-powered Design System

Slide 51

Slide 51 text

Schema-Powered Docs in Pattern Lab

Slide 52

Slide 52 text

Schema Powered Demos in Pattern Lab

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Data-powered Design System

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

Publish Your Design System to NPM

Slide 58

Slide 58 text

58

Slide 59

Slide 59 text

Web Components vs Headless

Slide 60

Slide 60 text

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?

Slide 61

Slide 61 text

• 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

Slide 62

Slide 62 text

Hello world! Web Components: Build Once, Ship Everywhere

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

https://custom-elements-everywhere.com/

Slide 66

Slide 66 text

Recap

Slide 67

Slide 67 text

Design systems aren’t magic, and they are a lot of hard work. (but they’re worth it!)

Slide 68

Slide 68 text

No content

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

1 Day 1 Week 1 front-end designer, code finished after 2 engineers, code not finished after

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

(with Pattern Lab, Twig, and ) Next Gen Design Systems @salem_ghoweri