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
450
Other Decks in Technology
See All in Technology
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
140
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
310
M3 Expressiveの思想に迫る
chnotchy
0
100
フィンテック養成勉強会#54
finengine
0
180
PostgreSQL 18 cancel request key長の変更とRailsへの関連
yahonda
0
120
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
180
本が全く読めなかった過去の自分へ
genshun9
0
300
VISITS_AIIoTビジネス共創ラボ登壇資料.pdf
iotcomjpadmin
0
160
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
700
Welcome to the LLM Club
koic
0
170
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
170
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3k
Balancing Empowerment & Direction
lara
1
370
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.3k
Unsuck your backbone
ammeep
671
58k
A better future with KSS
kneath
239
17k
How STYLIGHT went responsive
nonsquared
100
5.6k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Six Lessons from altMBA
skipperchong
28
3.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
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