Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Deploying Atomic Design System at scale

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

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
180
9fd8409875c0b29ceb9407eed4c9505d?s=48 nickbalestra
1
140

Other Decks in Technology

See All in Technology
8e308462954f8c38cc60dabb8b7bc6a3?s=48 widstkyi
0
190
204f36383109212baaedfabb8abcfc9e?s=48 konakalab
0
140
2219597a939c895e5db6f8b7c94e2859?s=48 pojiro
3
610
20ddbe9b7cfdde5e2dfeb8d8714d5de8?s=48 tarugoconf
0
350
2016ba6b977a2e6691811fa66d5f4336?s=48 cyberagentdevelopers
PRO
1
420
26afa82334d1037f0ba602272b950c90?s=48 kazuhitotakahashi
0
250
6500a96a5f0786d7ff0c53429d691ae6?s=48 kazuhiro4949
1
200
179d41d0fdd38c6980de9f2ae0e4768a?s=48 9wick
0
340
93aef1d166a8a3536538eff713f80307?s=48 flant
0
5.3k
8e308462954f8c38cc60dabb8b7bc6a3?s=48 widstkyi
0
200
Cd931bc05e7cee46b9a950a63e47ba4c?s=48 you
0
120
140494d272a4d89883a94fdfdb29dea2?s=48 oracle4engineer
PRO
1
270

Featured

See All Featured
7edec06b5435e0dac07a353b2cc26253?s=48 geeforr
333
29k
Aebc2d07a50011e2a30d38435fde564a?s=48 jrom
116
7.3k
A0517b08532aec8ab2aae3f65d40ad86?s=48 hannesfritz
29
1k
78b475797a14c84799063c7cd073962f?s=48 holman
462
280k
9fa239b3154a0169d99ab7bf1422dd12?s=48 marcelosomers
221
15k
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
154
11k
C51b39fa3c79ccb99dcb8a076bc98287?s=48 brianwarren
82
4.9k
20bfe76b3d6105641f879fe45cfc9272?s=48 bkeepers
PRO
322
54k
E4f5d494ebdc9e7cce1aecf3ce3e8bc1?s=48 shpigford
371
43k
C9b18d9dff88a9dd2393364c2b3b21bd?s=48 colly
188
14k
7cbd3f5f922d798cc312eaf596de7ae6?s=48 iamctodd
25
2.4k
4394ceb8b277f35ee3da7030384efb5d?s=48 davidbonilla
72
3.6k

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