Slide 1
Slide 1 text
September 2017
Deploying
Atomic Design System
at scale
Nick Balestra - @nickbalestra
Slide 2
Slide 2 text
Thanks to our sponsors!
Slide 3
Slide 3 text
Atomic
Design System?
Slide 4
Slide 4 text
Atomic
Design System?
"A mental model to help us
think of our user interfaces"
~ Brad Frost
Slide 5
Slide 5 text
Atomic
Design System?
Atoms - Molecules - Organisms - Templates - Pages
Slide 6
Slide 6 text
Atomic
Design System?
Design Tokens - UI Elements - Features - Systems
Slide 7
Slide 7 text
Atomic
Design System?
Design Tokens - UI Elements - Features - Systems
• Colors,
• Spacings,
• Typography,
• ...
Slide 8
Slide 8 text
Atomic
Design System?
Design Tokens - UI Elements - Features - Systems
• Colors,
• Spacings,
• Typography,
• ...
props:
color-brand:
value: "#DA3743"
...
Slide 9
Slide 9 text
Atomic
Design System?
Design Tokens - UI Elements - Features - Systems
• Colors,
• Spacings,
• Typography,
• ...
props:
color-brand:
value: "#DA3743"
...
.css
hsla
Slide 10
Slide 10 text
Atomic
Design System?
Design Tokens - UI Elements - Features - Systems
• Colors,
• Spacings,
• Typography,
• ...
props:
color-brand:
value: "#DA3743"
...
.json
rgba
.css
hsla
Slide 11
Slide 11 text
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)
Slide 12
Slide 12 text
Design Tokens - UI Elements - Features - Systems
Atomic
Design System?
Sign up
Slide 13
Slide 13 text
Atomic
Design System?
Design Tokens - UI Elements - Features - Systems
Sign up
Slide 14
Slide 14 text
Atomic
Design System?
Design Tokens - UI Elements - Features - Systems
Sign up
Slide 15
Slide 15 text
Design Tokens - UI Elements - Features - Systems
Atomic
Design System?
Sign up
Slide 16
Slide 16 text
Design Tokens - UI Elements - Features - Systems
Atomic
Design System?
Sign up
Slide 17
Slide 17 text
Atomic
Design System?
Sign up
Slide 18
Slide 18 text
Sign up
Deploying Atomic
Design System?
at scale?
Slide 19
Slide 19 text
Sign up
Deploying Atomic
Design System?
at scale?
Sign up
Slide 20
Slide 20 text
Deploying Atomic
Design System?
at scale?
Slide 21
Slide 21 text
Deploying Atomic
Design System?
at scale?
Slide 22
Slide 22 text
Deploying Atomic
Design System?
at scale?
Slide 23
Slide 23 text
Deploying Atomic
Design System?
at scale?
Slide 24
Slide 24 text
Deploying Atomic
Design System?
at scale?
Slide 25
Slide 25 text
Deploying Atomic
Design System?
at scale?
Slide 26
Slide 26 text
Deploying Atomic
Design System?
at scale?
A story about refactoring,
decentralized frontend architectures
and fast moving teams
Slide 27
Slide 27 text
Hola Alicante!
follow me: @nickbalestra
Software engineer @OpenTable, DX Team
Love OSS/JS/Node
OpenComponents core team
Slide 28
Slide 28 text
Firstly, a bit of background
Slide 29
Slide 29 text
Firstly, a bit of background
• OpenTable, founded in 1998 - PCLN (NASDAQ)
Slide 30
Slide 30 text
Firstly, a bit of background
• OpenTable, founded in 1998 - PCLN (NASDAQ)
• We find a table for 23+ million diners/month
Slide 31
Slide 31 text
Firstly, a bit of background
• OpenTable, founded in 1998 - PCLN (NASDAQ)
• We find a table for 23+ million diners/month
• 300+ engineers
Slide 32
Slide 32 text
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
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
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
Slide 35
Slide 35 text
Once upon a time...
Slide 36
Slide 36 text
Once upon a time...
Slide 37
Slide 37 text
Once upon a time...
product consistency
Slide 38
Slide 38 text
Once upon a time...
product consistency
velocity at scale
Slide 39
Slide 39 text
The monolith Front & Back Micro services
Slide 40
Slide 40 text
Once upon a time...
product consistency
velocity at scale
Slide 41
Slide 41 text
Once upon a time...
< Start />
< Restaurant />
< Search />
microsite
microsite
microsite
Slide 42
Slide 42 text
Restaurant Profile Search Results Start
www.opentable.com/san-francisco-restaurants
Slide 43
Slide 43 text
Restaurant Profile Search Results Start
Front-door routing microsite: "start"
metro: "San Francisco"
www.opentable.com/san-francisco-restaurants
Slide 44
Slide 44 text
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
Slide 45
Slide 45 text
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
Slide 46
Slide 46 text
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
Slide 47
Slide 47 text
HTML Fragments μservice
Restaurant Profile Search Results Start
< Start /> < Restaurant /> < Search />
Slide 48
Slide 48 text
HTML Fragments μservice
Restaurant Profile Search Results Start
< Start /> < Restaurant /> < Search />
Slide 49
Slide 49 text
HTML Fragments μservice
Restaurant Profile Search Results Start
Slide 50
Slide 50 text
v0 architecture
Restaurant Profile Search Results Start
www.opentable.com/san-francisco-restaurants
Slide 51
Slide 51 text
v0 architecture
Restaurant Profile Search Results Start
https://start-123/?domain=com&metro=4
www.opentable.com/san-francisco-restaurants
Slide 52
Slide 52 text
v0 architecture
Restaurant Profile Search Results Start
https://start-123/?domain=com&metro=4
www.opentable.com/san-francisco-restaurants
Slide 53
Slide 53 text
v0 architecture
Restaurant Profile Search Results Start
https://start-123/?domain=com&metro=4
https://components-123/header
{
"html": "
Hello World
",
"type":"html"
}
www.opentable.com/san-francisco-restaurants
Slide 54
Slide 54 text
v0 architecture
Restaurant Profile Search Results Start
https://start-123/?domain=com&metro=4
https://components-123/header
{
"html": "
Hello World
",
"type":"html"
}
https://components-123/header?userType=admin&...
www.opentable.com/san-francisco-restaurants
Slide 55
Slide 55 text
v0 architecture
Restaurant Profile Search Results Start
< Page />
https://start-123/?domain=com&metro=4
https://components-123/header
{
"html": "
Hello World
",
"type":"html"
}
https://components-123/header?userType=admin&...
www.opentable.com/san-francisco-restaurants
Slide 56
Slide 56 text
HTML Fragments µservice
Slide 57
Slide 57 text
HTML Fragments µservice
Slide 58
Slide 58 text
HTML Fragments µservice
Restaurant Profile Search Results Start
latest
minor
patch
latest
patch
patch
latest
major
minor
Slide 59
Slide 59 text
HTML Fragments µservice
Restaurant Profile Search Results Start
https://components-123/header/1.0.0
latest
minor
patch
latest
patch
patch
latest
major
minor
Slide 60
Slide 60 text
HTML Fragments µservice
Restaurant Profile Search Results Start
https://components-123/header/1.0.0
latest
minor
patch
latest
patch
patch
latest
major
minor
Slide 61
Slide 61 text
OpenComponents
Restaurant Profile Search Results Start
https://components-123/header/1.0.0
latest
minor
patch
latest
patch
patch
latest
major
minor
Slide 62
Slide 62 text
v0 architecture
Search Results Start
OC Registry
CDN
OC
Library
CLI
Templates
Client libraries
Slide 63
Slide 63 text
TLDR;
Slide 64
Slide 64 text
TLDR;
• #1 - Microsites architecture
Slide 65
Slide 65 text
TLDR;
• #1 - Microsites architecture
• #2 - Sharing the common parts
Slide 66
Slide 66 text
TLDR;
• #1 - Microsites architecture
• #2 - Sharing the common parts
• #3 - Serverless architecture for micro frontends
Slide 67
Slide 67 text
TLDR;
• #1 - Microsites architecture
• #2 - Sharing the common parts
• #3 - Serverless architecture for micro frontends
• #4 - Template API, infra is UI framework agnostic
Slide 68
Slide 68 text
TLDR;
• #1 - Microsites architecture
• #2 - Sharing the common parts
• #3 - Serverless architecture for micro frontends
• #4 - Template API, infra is UI framework agnostic
Slide 69
Slide 69 text
Demo
$ npm install -g oc
Slide 70
Slide 70 text
Client-side rendering
Slide 71
Slide 71 text
Client-side rendering
...
...
Slide 72
Slide 72 text
Server-side rendering
Slide 73
Slide 73 text
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
});
Slide 74
Slide 74 text
No content
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
No content
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
Tools
Slide 79
Slide 79 text
Tools
Slide 80
Slide 80 text
Who's using OC?
Slide 81
Slide 81 text
Muchas gracias!
@nickbalestra
github.com/opentable/oc