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
Deploying Atomic Design System at scale
Search
Nick Balestra
September 30, 2017
Technology
3
1.4k
Deploying Atomic Design System at scale
Talk given at ReactAlicante Conference 2017 -
http://reactalicante.es/
Nick Balestra
September 30, 2017
Tweet
Share
More Decks by Nick Balestra
See All by Nick Balestra
Breaking the frontend monolith - #frontendconnect17
nickbalestra
1
410
Dismantling the frontend monolith together
nickbalestra
1
190
Other Decks in Technology
See All in Technology
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
100
GopherCon Tour 概略
logica0419
2
190
それでも私はContextに値を詰めたい | Go Conference 2025 / go conference 2025 fill context
budougumi0617
4
1.2k
Findy Team+のSOC2取得までの道のり
rvirus0817
0
330
神回のメカニズムと再現方法/Mechanisms and Playbook for Kamikai scrumat2025
moriyuya
4
520
Where will it converge?
ibknadedeji
0
180
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
200
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
400
非エンジニアのあなたもできる&もうやってる!コンテキストエンジニアリング
findy_eventslides
3
910
KMP の Swift export
kokihirokawa
0
330
AWSにおけるTrend Vision Oneの効果について
shimak
0
120
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
300
Featured
See All Featured
KATA
mclloyd
32
15k
The Pragmatic Product Professional
lauravandoore
36
6.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
GitHub's CSS Performance
jonrohan
1032
460k
How GitHub (no longer) Works
holman
315
140k
Typedesign – Prime Four
hannesfritz
42
2.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Documentation Writing (for coders)
carmenintech
75
5k
Six Lessons from altMBA
skipperchong
28
4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
850
Navigating Team Friction
lara
189
15k
Transcript
September 2017 Deploying Atomic Design System at scale Nick Balestra
- @nickbalestra
Thanks to our sponsors!
Atomic Design System?
Atomic Design System? "A mental model to help us think
of our user interfaces" ~ Brad Frost
Atomic Design System? Atoms - Molecules - Organisms - Templates
- Pages
Atomic Design System? Design Tokens - UI Elements - Features
- Systems
Atomic Design System? Design Tokens - UI Elements - Features
- Systems • Colors, • Spacings, • Typography, • ...
Atomic Design System? Design Tokens - UI Elements - Features
- Systems • Colors, • Spacings, • Typography, • ... props: color-brand: value: "#DA3743" ...
Atomic Design System? Design Tokens - UI Elements - Features
- Systems • Colors, • Spacings, • Typography, • ... props: color-brand: value: "#DA3743" ... .css hsla
Atomic Design System? Design Tokens - UI Elements - Features
- Systems • Colors, • Spacings, • Typography, • ... props: color-brand: value: "#DA3743" ... .json rgba .css hsla
Atomic Design System? Design Tokens - UI Elements - Features
- Systems • Colors, • Spacings, • Typography, • ... props: color-brand: value: "#DA3743" ... .json rgba .css hsla .xml 8 digit Hex (AARRGGBB)
Design Tokens - UI Elements - Features - Systems Atomic
Design System? Sign up
Atomic Design System? Design Tokens - UI Elements - Features
- Systems Sign up
Atomic Design System? Design Tokens - UI Elements - Features
- Systems Sign up
Design Tokens - UI Elements - Features - Systems Atomic
Design System? Sign up
Design Tokens - UI Elements - Features - Systems Atomic
Design System? Sign up
Atomic Design System? Sign up
Sign up Deploying Atomic Design System? at scale?
Sign up Deploying Atomic Design System? at scale? Sign up
Deploying Atomic Design System? at scale?
Deploying Atomic Design System? at scale?
Deploying Atomic Design System? at scale?
Deploying Atomic Design System? at scale?
Deploying Atomic Design System? at scale?
Deploying Atomic Design System? at scale?
Deploying Atomic Design System? at scale? A story about refactoring,
decentralized frontend architectures and fast moving teams
Hola Alicante! follow me: @nickbalestra Software engineer @OpenTable, DX Team
Love OSS/JS/Node OpenComponents core team
Firstly, a bit of background
Firstly, a bit of background • OpenTable, founded in 1998
- PCLN (NASDAQ)
Firstly, a bit of background • OpenTable, founded in 1998
- PCLN (NASDAQ) • We find a table for 23+ million diners/month
Firstly, a bit of background • OpenTable, founded in 1998
- PCLN (NASDAQ) • We find a table for 23+ million diners/month • 300+ engineers
Firstly, a bit of background • OpenTable, founded in 1998
- PCLN (NASDAQ) • We find a table for 23+ million diners/month • 300+ engineers • Europe, North and South America, Asia
Firstly, a bit of background • OpenTable, founded in 1998
- PCLN (NASDAQ) • We find a table for 23+ million diners/month • 300+ engineers • Europe, North and South America, Asia • Millions requests/minute
Firstly, a bit of background • OpenTable, founded in 1998
- PCLN (NASDAQ) • We find a table for 23+ million diners/month • 300+ engineers • Europe, North and South America, Asia • Millions requests/minute • Full-stack culture
Once upon a time...
Once upon a time...
Once upon a time... product consistency
Once upon a time... product consistency velocity at scale
The monolith Front & Back Micro services
Once upon a time... product consistency velocity at scale
Once upon a time... < Start /> < Restaurant />
< Search /> microsite microsite microsite
Restaurant Profile Search Results Start www.opentable.com/san-francisco-restaurants
Restaurant Profile Search Results Start Front-door routing microsite: "start" metro:
"San Francisco" www.opentable.com/san-francisco-restaurants
Restaurant Profile Search Results Start https://start-123/?domain=com&metro=4 Front-door routing microsite: "start"
metro: "San Francisco" www.opentable.com/san-francisco-restaurants
Restaurant Profile Search Results Start https://start-123/?domain=com&metro=4 Front-door routing microsite: "start"
metro: "San Francisco" < Restaurant /> < Search /> < Start /> www.opentable.com/san-francisco-restaurants
Restaurant Profile Search Results Start https://start-123/?domain=com&metro=4 Front-door routing microsite: "start"
metro: "San Francisco" < Restaurant /> < Search /> < Start /> www.opentable.com/san-francisco-restaurants microsite
HTML Fragments μservice Restaurant Profile Search Results Start < Start
/> < Restaurant /> < Search />
HTML Fragments μservice Restaurant Profile Search Results Start < Start
/> < Restaurant /> < Search />
HTML Fragments μservice Restaurant Profile Search Results Start
v0 architecture Restaurant Profile Search Results Start www.opentable.com/san-francisco-restaurants
v0 architecture Restaurant Profile Search Results Start https://start-123/?domain=com&metro=4 www.opentable.com/san-francisco-restaurants
v0 architecture Restaurant Profile Search Results Start https://start-123/?domain=com&metro=4 www.opentable.com/san-francisco-restaurants
v0 architecture Restaurant Profile Search Results Start https://start-123/?domain=com&metro=4 https://components-123/header {
"html": "<div class=\"header\">Hello World</div>", "type":"html" } www.opentable.com/san-francisco-restaurants
v0 architecture Restaurant Profile Search Results Start https://start-123/?domain=com&metro=4 https://components-123/header {
"html": "<div class=\"header\">Hello World</div>", "type":"html" } https://components-123/header?userType=admin&... www.opentable.com/san-francisco-restaurants
v0 architecture Restaurant Profile Search Results Start < Page />
https://start-123/?domain=com&metro=4 https://components-123/header { "html": "<div class=\"header\">Hello World</div>", "type":"html" } https://components-123/header?userType=admin&... www.opentable.com/san-francisco-restaurants
HTML Fragments µservice
HTML Fragments µservice
HTML Fragments µservice Restaurant Profile Search Results Start latest minor
patch latest patch patch latest major minor
HTML Fragments µservice Restaurant Profile Search Results Start https://components-123/header/1.0.0 latest
minor patch latest patch patch latest major minor
HTML Fragments µservice Restaurant Profile Search Results Start https://components-123/header/1.0.0 latest
minor patch latest patch patch latest major minor
OpenComponents Restaurant Profile Search Results Start https://components-123/header/1.0.0 latest minor patch
latest patch patch latest major minor
v0 architecture Search Results Start OC Registry CDN OC Library
CLI Templates Client libraries
TLDR;
TLDR; • #1 - Microsites architecture
TLDR; • #1 - Microsites architecture • #2 - Sharing
the common parts
TLDR; • #1 - Microsites architecture • #2 - Sharing
the common parts • #3 - Serverless architecture for micro frontends
TLDR; • #1 - Microsites architecture • #2 - Sharing
the common parts • #3 - Serverless architecture for micro frontends • #4 - Template API, infra is UI framework agnostic
TLDR; • #1 - Microsites architecture • #2 - Sharing
the common parts • #3 - Serverless architecture for micro frontends • #4 - Template API, infra is UI framework agnostic
Demo $ npm install -g oc
Client-side rendering
Client-side rendering <html> <body> ... <oc-component href="https://registry.com/header/1.x"> </oc-component> ... <script
src="https://registry.com/oc-client/client.js"></script> <body> </html>
Server-side rendering
Server-side rendering const Client = require('oc-client'); const client = new
Client({ registries: ['https://registry.com/'], components: ['header'] }); client.renderComponent('header', (err, componentHTML) => { console.log(componentHTML) // rendered html });
None
None
None
None
Tools
Tools
Who's using OC?
Muchas gracias! @nickbalestra github.com/opentable/oc