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
400
Dismantling the frontend monolith together
nickbalestra
1
190
Other Decks in Technology
See All in Technology
Claude Codeから我々が学ぶべきこと
s4yuba
8
1.9k
【CEDEC2025】ブランド力アップのためのコンテンツマーケティング~ゲーム会社における情報資産の活かし方~
cygames
PRO
0
230
2025-07-31: GitHub Copilot Agent mode at Vibe Coding Cafe (15min)
chomado
2
370
KubeCon + CloudNativeCon Japan 2025 Recap
donkomura
0
160
LLMをツールからプラットフォームへ〜Ai Workforceの戦略〜 #BetAIDay
layerx
PRO
1
850
Vision Language Modelと自動運転AIの最前線_20250730
yuyamaguchi
3
1.1k
製造業の課題解決に向けた機械学習の活用と、製造業特化LLM開発への挑戦
knt44kw
0
150
Claude Codeは仕様駆動の夢を見ない
gotalab555
11
1.9k
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
270
バクラクによるコーポレート業務の自動運転 #BetAIDay
layerx
PRO
1
830
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
720
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く!現場で活用するためのAIエージェント実践入門(Findyランチセッション)
smiyawaki0820
6
630
Featured
See All Featured
Raft: Consensus for Rubyists
vanstee
140
7k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Documentation Writing (for coders)
carmenintech
73
5k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Facilitating Awesome Meetings
lara
54
6.5k
Why Our Code Smells
bkeepers
PRO
337
57k
The Language of Interfaces
destraynor
158
25k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
420
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
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