Deploying Atomic Design System at scale

Talk given at ReactAlicante Conference 2017 - http://reactalicante.es/

Transcript

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