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
180
Other Decks in Technology
See All in Technology
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
410
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
410
怖くない!はじめてのClaude Code
shinya337
0
110
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
280
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
110
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
560
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
230
Snowflake Summit 2025 データエンジニアリング関連新機能紹介 / Snowflake Summit 2025 What's New about Data Engineering
tiltmax3
0
320
Welcome to the LLM Club
koic
0
200
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
110
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
140
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1031
460k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
The Cult of Friendly URLs
andyhume
79
6.5k
BBQ
matthewcrist
89
9.7k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Writing Fast Ruby
sferik
628
62k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
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