Scaling Skyscanner's design system

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

Image credits on second last slide.

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