Scaling the front end

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.

Fd8e3ace64d471302758efb64e1eb0aa?s=128

Ryan Oglesby

July 20, 2018
Tweet

Transcript

  1. Scaling the Front End Ryan Oglesby, Developer

  2. None
  3. None
  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