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

Deploying Atomic Design System at scale

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

Deploying Atomic Design System at scale

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

9fd8409875c0b29ceb9407eed4c9505d?s=128

Nick Balestra

September 30, 2017
Tweet

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