Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Scaling Skyscanner's design system
Tim von Oldenburg
April 05, 2017
Technology
0
270
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
310
Other Decks in Technology
See All in Technology
Oktaの管理者権限を適切に移譲してみた
shimosyan
2
260
Dev Containers ことはじめ - 失敗から学ぶ開発環境運用法
streamwest1629
0
310
グローバルチームことはじめ / Bootstrapping a global team
tasshi
1
650
re:Inventで発表があったIoT事例の紹介と考察
kizawa2020
0
170
Akiba-dot-SaaS-ExtraHop
sakaitakeshi
1
110
230125 モニターマウントLT ITガジェット翁(Ryu.Cyber)さん
comucal
PRO
0
4.5k
私見「UNIXの考え方」/20230124-kameda-unix-phylosophy
opelab
0
160
Pentesting Password Reset Functionality
anugrahsr
0
370
ECテックカンファレンス2023 EC事業部のモバイル開発2023
tatsumi0000
0
190
IoT から見る AWS re:invent 2022 ― AWSのIoTの歴史を添えて/Point of view the AWS re:invent 2022 with IoT - with a history of IoT in AWS
ma2shita
0
230
OpenShiftのリリースノートを整理してみた
loftkun
2
260
OCIコンテナサービス関連の技術詳細 /oke-ocir-details
oracle4engineer
PRO
0
760
Featured
See All Featured
Creatively Recalculating Your Daily Design Routine
revolveconf
207
11k
Rebuilding a faster, lazier Slack
samanthasiow
69
7.5k
Statistics for Hackers
jakevdp
785
210k
Mobile First: as difficult as doing things right
swwweet
213
7.8k
Clear Off the Table
cherdarchuk
79
290k
Rails Girls Zürich Keynote
gr2m
87
12k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
How to name files
jennybc
47
73k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
The Illustrated Children's Guide to Kubernetes
chrisshort
22
42k
We Have a Design System, Now What?
morganepeng
37
5.9k
What's in a price? How to price your products and services
michaelherold
233
9.7k
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