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.3k
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
340
Dismantling the frontend monolith together
nickbalestra
1
170
Other Decks in Technology
See All in Technology
小規模に始めるデータメッシュとデータガバナンスの実践
kimujun
3
600
10分でわかるfreee エンジニア向け会社説明資料
freee
18
520k
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
110
プロポーザルのつくり方 〜個人技編〜 / How to come up with proposals
ohbarye
2
150
グローバル展開を見据えたサービスにおける機械翻訳プラクティス / dp-ai-translating
cyberagentdevelopers
PRO
1
150
Amazon_CloudWatch_ログ異常検出_導入ガイド
tsujiba
4
1.6k
omakaseしないための.rubocop.yml のつくりかた / How to Build Your .rubocop.yml to Avoid Omakase #kaigionrails
linkers_tech
3
780
Shift-from-React-to-Vue
calm1205
3
1.3k
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
49k
【若手エンジニア応援LT会】AWS Security Hubの活用に苦労した話
kazushi_ohata
0
170
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
280
ユーザーの購買行動モデリングとその分析 / dsc-purchase-analysis
cyberagentdevelopers
PRO
2
110
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
The Pragmatic Product Professional
lauravandoore
31
6.3k
GraphQLとの向き合い方2022年版
quramy
43
13k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Unsuck your backbone
ammeep
668
57k
How GitHub (no longer) Works
holman
311
140k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
Building Better People: How to give real-time feedback that sticks.
wjessup
363
19k
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