Slide 1

Slide 1 text

Scaling the Front End Ryan Oglesby, Developer

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Land of Broken Toys No single source of truth Disjointed customer experience Large effort required to deliver 
 new features

Slide 5

Slide 5 text

Design System Thinking Simplify communication and collaboration between teams, enabling digital experiences to be delivered more consistently, faster, and with higher quality.

Slide 6

Slide 6 text

Design System Thinking Reuse ♻
 Micro frontends
 & component sharing Automation 
 Tooling 
 & testing Culture Collaboration
 & contribution

Slide 7

Slide 7 text

Design System Thinking Reuse ♻
 Micro frontends
 & component sharing Automation 
 Tooling 
 & testing Culture Collaboration
 & contribution

Slide 8

Slide 8 text

h"ps://www.telus.com/en/bc/mobility/planbuilder

Slide 9

Slide 9 text

Heading Selector Buttons Checklist Card Global Header Chat Paragraph Heading h"ps://www.telus.com/en/bc/mobility/planbuilder

Slide 10

Slide 10 text

Heading Selector Buttons Checklist Card Global Header Chat Paragraph Global Elements API-backed micro frontends, integrated at run time. Design System Composable UI components, integrated 
 at build time.

Slide 11

Slide 11 text

Design System Thinking Reuse ♻
 Micro frontends
 & component sharing Automation 
 Tooling 
 & testing Culture Collaboration
 & contribution

Slide 12

Slide 12 text

Visual Regression Testing Button ✅ Visual regression width font size background color

Slide 13

Slide 13 text

describe('Button visual regression', () => { it('maintains visual appearance for all variants', () => { const image = generateImage(
Primary button Secondary button Inverted button
) expect(image).toMatchImageSnapshot() }) it('maintains visual appearance on mobile devices', () => { const options = { viewport: { width: 500, }, } const image = generateImage(Mobile button, options) expect(image).toMatchImageSnapshot() }) }) Visual Regression Testing

Slide 14

Slide 14 text

PASS packages/Button/__tests__/Button.visual.spec.jsx performs visual regression ✓ for all variants (1181ms) ✓ for mobile (1099ms) Test Suites: 1 passed, 1 total Tests: 2 passed, 2 total Snapshots: 0 total Time: 3.866s Visual Regression Testing src/components/Button/tests/image_snapshots/

Slide 15

Slide 15 text

Visual Regression Testing FAIL packages/Button/__tests__/Button.visual.spec.jsx performs visual regression ✕ for all variants (3495ms) ✕ for mobile (2615ms) ● performs visual regression › for all variants Expected image to match or be a close match to snapshot but was 1.80% different from snapshot (8666 differing pixels). See diff for details: packages/Button/__tests__/__image_snapshots__/ __diff_output__/button-visual-spec-jsx-performs-visual-regression-for-all-variants-1- diff.png at Button/__tests__/Button.visual.spec.jsx:10:524 … Test Suites: 1 failed, 1 total Tests: 2 failed, 2 total Snapshots: 0 total Time: 7.186s

Slide 16

Slide 16 text

Visual Regression Testing src/components/Button/tests/image_snapshots/diff_output FAIL packages/Button/__tests__/Button.visual.spec.jsx performs visual regression ✕ for all variants (3495ms) ✕ for mobile (2615ms) … Test Suites: 1 failed, 1 total Tests: 2 failed, 2 total Snapshots: 0 total Time: 7.186s Baseline Diff Result

Slide 17

Slide 17 text

Design System Thinking Reuse ♻
 Micro frontends
 & component sharing Automation 
 Tooling 
 & testing Culture Collaboration
 & contribution

Slide 18

Slide 18 text

Centralized Ownership https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0

Slide 19

Slide 19 text

Federated Ownership https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0

Slide 20

Slide 20 text

https://tds.telus.com https://github.com/telus/tds-core | Design System

Slide 21

Slide 21 text

Outcomes of Design System Thinking ✅ Team members: more focus on fulfilling work. ✅ Business: faster speed to market, higher quality products. ✅ Customer: better experience.

Slide 22

Slide 22 text

s THANKS