Scaling the front end

This talk highlights the advantages of taking a systematic approach to design and front end development at scale, using my experience at TELUS Digital. We’ll look at how TELUS Digital is simplifying communication and collaboration between teams to enable digital experiences to be delivered more consistently, faster, and with higher quality. You’ll see how to scale by reusing UI components, by implementing automated testing, and by cultivating an open, contribution-driven culture.

Transcript

1. Scaling the Front End Ryan Oglesby, Developer
4. Land of Broken Toys No single source of truth Disjointed customer experience Large effort required to deliver 
 new features
5. Design System Thinking Simplify communication and collaboration between teams, enabling digital experiences to be delivered more consistently, faster, and with higher quality.
6. Design System Thinking Reuse ♻
 Micro frontends
 & component sharing Automation 
 Tooling 
 & testing Culture Collaboration
 & contribution
7. Design System Thinking Reuse ♻
 Micro frontends
 & component sharing Automation 
 Tooling 
 & testing Culture Collaboration
 & contribution
8. h"ps://www.telus.com/en/bc/mobility/planbuilder
9. Heading Selector Buttons Checklist Card Global Header Chat Paragraph Heading h"ps://www.telus.com/en/bc/mobility/planbuilder
10. 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.
11. Design System Thinking Reuse ♻
 Micro frontends
 & component sharing Automation 
 Tooling 
 & testing Culture Collaboration
 & contribution
12. Visual Regression Testing Button ✅ Visual regression width font size background color
13. describe('Button visual regression', () => { it('maintains visual appearance for all variants', () => { const image = generateImage( <div> <Button variant=“primary">Primary button</Button> <Button variant="secondary">Secondary button</Button> <Button variant="inverted">Inverted button</Button> </div> ) expect(image).toMatchImageSnapshot() }) it('maintains visual appearance on mobile devices', () => { const options = { viewport: { width: 500, }, } const image = generateImage(<Button>Mobile button</Button>, options) expect(image).toMatchImageSnapshot() }) }) Visual Regression Testing
14. 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/
15. 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
16. 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
17. Design System Thinking Reuse ♻
 Micro frontends
 & component sharing Automation 
 Tooling 
 & testing Culture Collaboration
 & contribution
18. Centralized Ownership https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
19. Federated Ownership https://medium.com/eightshapes-llc/team-models-for-scaling-a-design-system-2cf9d03be6a0
20. https://tds.telus.com https://github.com/telus/tds-core | Design System
21. Outcomes of Design System Thinking ✅ Team members: more focus on fulfilling work. ✅ Business: faster speed to market, higher quality products. ✅ Customer: better experience.
22. s THANKS