Scaling Skyscanner's design system

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