Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Ryan Oglesby

July 20, 2018
Tweet

More Decks by Ryan Oglesby

Other Decks in Technology

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