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
LINEヤフーにおけるPrerender技術の導入とその効果
narirou
1
130
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
260
CysharpのOSS群から見るModern C#の現在地
neuecc
2
3.6k
"とにかくやってみる"で始めるAWS Security Hub
maimyyym
2
100
CDCL による厳密解法を採用した MILP ソルバー
imai448
3
180
SSMRunbook作成の勘所_20241120
koichiotomo
3
170
OCI Security サービス 概要
oracle4engineer
PRO
0
6.5k
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
TypeScriptの次なる大進化なるか!? 条件型を返り値とする関数の型推論
uhyo
2
1.7k
Making your applications cross-environment - OSCG 2024 NA
salaboy
0
200
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
130
アジャイルでの品質の進化 Agile in Motion vol.1/20241118 Hiroyuki Sato
shift_evolve
0
180
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
Designing for Performance
lara
604
68k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Documentation Writing (for coders)
carmenintech
65
4.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
How GitHub (no longer) Works
holman
310
140k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
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