Scaling Skyscanner's design system

Scaling Skyscanner's design system

Talk given at the React Edinburgh meetup on 5th April 2017.

Image credits on second last slide.

0947e15e6a9b58d3a6cc982982b5a0f1?s=128

Tim von Oldenburg

April 05, 2017
Tweet

Transcript

  1. Scaling Skyscanner’s Design System React Edinburgh, 2017-04-05 How we use

    the React ecosystem for fun and profit. 1
  2. ! Tim von Oldenburg twitter.com/sweeneytimm github.com/tvooo tvooo.de Skyscanner skyscanner.net Backpack

    Design System 2
  3. What we’re going to talk about —Design systems —Practices we

    apply —Obstacles we encounter(ed) —Lego 3
  4. Design systems “Backpack is a collection of design resources, reusable

    components and guidelines for creating Skyscanner products.” 4
  5. Design systems Atomic design React components are on the atoms

    and molecules level. 5
  6. 6

  7. 7

  8. 8

  9. Design systems Getting the level of abstraction just right. 9

  10. Practices & Approaches —Encapsulation —Choice —Composition 10

  11. Encapsulation Every component in its own NPM package. bpk-component-button bpk-component-datepicker

    bpk-component-input … Each contains: —Markup —JavaScript —Styles 11
  12. Encapsulation (contd.) Keyboard and screenreader accessible Right-to-left support and i18n

    12
  13. Encapsulation (contd.) Themeing Build-time themeing through design tokens 13

  14. Choice Leave details to the consumer Most of our components

    are stateless. But we ship stateful containers for common use cases, too. Accordion ‏ AccordionContainer Calendar ‏ Datepicker 14
  15. Composition Composing common patterns Button + Icon + Spinner <Button

    disabled={this.state.isLoading}> Search { this.state.isLoading ? <Spinner fill="grey" /> : <SearchIcon fill="white" /> } </Button> 15
  16. Composition (contd.) Composing common patterns Button + Icon + Spinner

    = Loading button <LoadingButton loading={this.state.isLoading}> Search </LoadingButton> 16
  17. 17

  18. Obstacles But not all is great in component land… 18

  19. Obstacles Teams use all kinds of technology stacks: Angular, Backbone,

    Coffeescript. —No prioritisation from Product Owners —The design system does not provide everything needed —Rewrites are too expensive —Risky investment at scale 19
  20. Upgrade paths: Sass Provide easy-to-adopt Sass mixins and variables ➡

    Achieve visual consistency fast and cheap. 20
  21. 21

  22. Upgrade paths: Other libraries/frameworks But what about molecules? ➡ Embed

    individual (complex) components using ReactDOM. - Angular? ngReact, react2angular - Anything else? This amazing PR 22
  23. Provide common tools For consistency and to get started: —ESLint

    config —Stylelint config —Webpack config ➡ create-react-app template create-react-app my-app --scripts-version=backpack-react-scripts 23
  24. Get your hands dirty Take your time to dig into

    product teams’ code bases and find ways to help them transition easily. 24
  25. Conflicting styles One page, one component, many versions. ➡ CSS-in-JS

    (such as styled-jsx) ➡ CSS Modules 25
  26. 26

  27. Thanks! Oh btw, we’re hiring a Senior Front End Engineer

    to help us build the Backpack design system ! ➡ Get in touch! 27
  28. Images: —Tiny toy Lego plane: Sebastian Wahl —Design systems diagram:

    Stu Robson —Detailed Lego planes: Flickr —Colorful Lego plane: Flickr —Lego “Just Right”: Reddit 28
  29. Further links: —Backpack Design System —Atomic Design principles by Brad

    Frost —Ryan Florence - Don't Rewrite, React! 29