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
440
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
460
Other Decks in Technology
See All in Technology
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
450
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
660
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
Snowflake×dbtを用いたテレシーのデータ基盤のこれまでとこれから
sagara
0
120
会社紹介資料 / Sansan Company Profile
sansan33
PRO
7
380k
株式会社ログラス - 会社説明資料【エンジニア】/ Loglass Engineer
loglass2019
4
65k
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
180
Apache Spark もくもく会
taka_aki
0
140
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
220
下手な強制、ダメ!絶対! 「ガードレール」を「檻」にさせない"ガバナンス"の取り方とは?
tsukaman
2
460
テストを軸にした生き残り術
kworkdev
PRO
0
220
Firestore → Spanner 移行 を成功させた段階的移行プロセス
athug
1
500
Featured
See All Featured
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Code Review Best Practice
trishagee
71
19k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
How STYLIGHT went responsive
nonsquared
100
5.8k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Rails Girls Zürich Keynote
gr2m
95
14k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
RailsConf 2023
tenderlove
30
1.2k
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