Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Scaling Skyscanner's design system
Search
Tim von Oldenburg
April 05, 2017
Technology
0
350
Scaling Skyscanner's design system
Talk given at the React Edinburgh meetup on 5th April 2017.
Image credits on second last slide.
Tim von Oldenburg
April 05, 2017
Tweet
Share
More Decks by Tim von Oldenburg
See All by Tim von Oldenburg
No more excuses - Getting the first 30% of accessibility issues
tvooo
0
390
Other Decks in Technology
See All in Technology
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.7k
ChatworkのSRE部って実は 半分くらいPlatform Engineering部かもしれない
saramune
0
160
20240418_Google ColabにLLMが搭載されたようなのでPython x データ分析の勉強方法を考えてみる
doradora09
0
130
マルチアカウント環境への発見的統制の導入
ch1aki
1
1.3k
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
140
日本におけるデータエンジニアリングのこれまでとこれから
foursue
16
4.2k
開発パフォーマンスを最大化するための開発体制
ham0215
2
300
家族アルバム みてねにおけるGrafana活用術 / Grafana Meetup Japan Vol.1 LT
isaoshimizu
1
530
Azureの基本的な権限管理の勉強会
yhana
0
180
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
1
410
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
160
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
1
270
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
121
39k
Design by the Numbers
sachag
274
18k
The Power of CSS Pseudo Elements
geoffreycrofte
60
5k
[RailsConf 2023] Rails as a piece of cake
palkan
23
3.9k
KATA
mclloyd
15
12k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Happy Clients
brianwarren
92
6.4k
What's in a price? How to price your products and services
michaelherold
237
11k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
Transcript
Scaling Skyscanner’s Design System React Edinburgh, 2017-04-05 How we use
the React ecosystem for fun and profit. 1
! Tim von Oldenburg twitter.com/sweeneytimm github.com/tvooo tvooo.de Skyscanner skyscanner.net Backpack
Design System 2
What we’re going to talk about —Design systems —Practices we
apply —Obstacles we encounter(ed) —Lego 3
Design systems “Backpack is a collection of design resources, reusable
components and guidelines for creating Skyscanner products.” 4
Design systems Atomic design React components are on the atoms
and molecules level. 5
6
7
8
Design systems Getting the level of abstraction just right. 9
Practices & Approaches —Encapsulation —Choice —Composition 10
Encapsulation Every component in its own NPM package. bpk-component-button bpk-component-datepicker
bpk-component-input … Each contains: —Markup —JavaScript —Styles 11
Encapsulation (contd.) Keyboard and screenreader accessible Right-to-left support and i18n
12
Encapsulation (contd.) Themeing Build-time themeing through design tokens 13
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
Composition Composing common patterns Button + Icon + Spinner <Button
disabled={this.state.isLoading}> Search { this.state.isLoading ? <Spinner fill="grey" /> : <SearchIcon fill="white" /> } </Button> 15
Composition (contd.) Composing common patterns Button + Icon + Spinner
= Loading button <LoadingButton loading={this.state.isLoading}> Search </LoadingButton> 16
17
Obstacles But not all is great in component land… 18
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
Upgrade paths: Sass Provide easy-to-adopt Sass mixins and variables ➡
Achieve visual consistency fast and cheap. 20
21
Upgrade paths: Other libraries/frameworks But what about molecules? ➡ Embed
individual (complex) components using ReactDOM. - Angular? ngReact, react2angular - Anything else? This amazing PR 22
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
Get your hands dirty Take your time to dig into
product teams’ code bases and find ways to help them transition easily. 24
Conflicting styles One page, one component, many versions. ➡ CSS-in-JS
(such as styled-jsx) ➡ CSS Modules 25
26
Thanks! Oh btw, we’re hiring a Senior Front End Engineer
to help us build the Backpack design system ! ➡ Get in touch! 27
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
Further links: —Backpack Design System —Atomic Design principles by Brad
Frost —Ryan Florence - Don't Rewrite, React! 29