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

    Land of Broken Toys No single source of truth Disjointed

    customer experience Large effort required to deliver 
 new features
  4. 5.

    Design System Thinking Simplify communication and collaboration between teams, enabling

    digital experiences to be delivered more consistently, faster, and with higher quality.
  5. 6.

    Design System Thinking Reuse ♻
 Micro frontends
 & component sharing

    Automation 
 Tooling 
 & testing Culture Collaboration
 & contribution
  6. 7.

    Design System Thinking Reuse ♻
 Micro frontends
 & component sharing

    Automation 
 Tooling 
 & testing Culture Collaboration
 & contribution
  7. 9.
  8. 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.
  9. 11.

    Design System Thinking Reuse ♻
 Micro frontends
 & component sharing

    Automation 
 Tooling 
 & testing Culture Collaboration
 & contribution
  10. 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
  11. 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/
  12. 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
  13. 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
  14. 17.

    Design System Thinking Reuse ♻
 Micro frontends
 & component sharing

    Automation 
 Tooling 
 & testing Culture Collaboration
 & contribution
  15. 21.

    Outcomes of Design System Thinking ✅ Team members: more focus

    on fulfilling work. ✅ Business: faster speed to market, higher quality products. ✅ Customer: better experience.
  16. 22.