Pro Yearly is on sale from $80 to $50! »

Deploying Atomic Design System at scale

9fd8409875c0b29ceb9407eed4c9505d?s=47 Nick Balestra
September 30, 2017
Technology
3
790

Deploying Atomic Design System at scale

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

9fd8409875c0b29ceb9407eed4c9505d?s=128

Nick Balestra

September 30, 2017
Tweet

More Decks by Nick Balestra

See All by Nick Balestra
9fd8409875c0b29ceb9407eed4c9505d?s=48 nickbalestra
0
170
9fd8409875c0b29ceb9407eed4c9505d?s=48 nickbalestra
1
130

Other Decks in Technology

See All in Technology
61cd8af33de206c39c875e3321e9c225?s=48 pineapplecandy
1
200
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
360
Cc568a0b1284645f9fb927b2343eb87e?s=48 youtalk
0
430
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
120
4b09160b087e45103b210ef95079cee4?s=48 gakumura
0
280
Ad04710a6e5202a36059db1092b1d13c?s=48 bomccss
2
920
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
120
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
140
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
320
48428c90f3e74a0a0f7a51ea72bed332?s=48 gundama01
0
160
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
120
Eebedc2ee7ff95ffb9d9102c6d4a065c?s=48 line_devday2020
0
110

Featured

See All Featured
25c7c18223fb42a4c6ae1c8db6f50f9b?s=48 mojombo
358
62k
Ded01cdab114abe4ec13511e4c25b9bb?s=48 andyhume
61
2.5k
64827b31aef81498662e8af4bd6d5157?s=48 jonrohan
1021
370k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
320
53k
7653c7c449918ff6542880a8c284f5e7?s=48 jponch
101
4.9k
E6c6e133e74c3b83f04d2861deaa1c20?s=48 searls
203
35k
F383c6a4dc55e331bbe2987b622cee6b?s=48 stephaniewalter
258
11k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
13
1.7k
282d599b414022eba5096510f675b6e2?s=48 chrislema
172
14k
95d9f37115fbb0d13135d0f77132f856?s=48 morganepeng
13
940
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
498
130k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
777
240k

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
 });
  74. None
  75. None
  76. None
  77. None

  78. Tools

  79. Tools

  80. Who's using OC?

  81. Muchas gracias! @nickbalestra github.com/opentable/oc