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
   

   View Slide

2. View Slide

3. View Slide

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

   new features
   

   View Slide

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

   View Slide

6. Design System Thinking
   Reuse
   ♻

   Micro frontends

   & component sharing
   Automation
   

   Tooling 

   & testing
   Culture
   
   Collaboration

   & contribution
   

   View Slide

7. Design System Thinking
   Reuse
   ♻

   Micro frontends

   & component sharing
   Automation
   

   Tooling 

   & testing
   Culture
   
   Collaboration

   & contribution
   

   View Slide

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

   View Slide

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

   View Slide

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.
    

    View Slide

11. Design System Thinking
    Reuse
    ♻

    Micro frontends

    & component sharing
    Automation
    

    Tooling 

    & testing
    Culture
    
    Collaboration

    & contribution
    

    View Slide

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

    View Slide

13. 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
    

    View Slide

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/
    

    View Slide

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
    

    View Slide

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
    

    View Slide

17. Design System Thinking
    Reuse
    ♻

    Micro frontends

    & component sharing
    Automation
    

    Tooling 

    & testing
    Culture
    
    Collaboration

    & contribution
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. s
    THANKS
    

    View Slide