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

Deploying Atomic Design System at scale

Nick Balestra
September 30, 2017

Deploying Atomic Design System at scale

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

Nick Balestra

September 30, 2017
Tweet

More Decks by Nick Balestra

Other Decks in Technology

Transcript

  1. Atomic Design System? "A mental model to help us think

    of our user interfaces" ~ Brad Frost
  2. Atomic Design System? Design Tokens - UI Elements - Features

    - Systems • Colors, • Spacings, • Typography, • ...
  3. Atomic Design System? Design Tokens - UI Elements - Features

    - Systems • Colors, • Spacings, • Typography, • ... props: color-brand: value: "#DA3743" ...
  4. Atomic Design System? Design Tokens - UI Elements - Features

    - Systems • Colors, • Spacings, • Typography, • ... props: color-brand: value: "#DA3743" ... .css hsla
  5. Atomic Design System? Design Tokens - UI Elements - Features

    - Systems • Colors, • Spacings, • Typography, • ... props: color-brand: value: "#DA3743" ... .json rgba .css hsla
  6. 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)
  7. Deploying Atomic Design System? at scale? A story about refactoring,

    decentralized frontend architectures and fast moving teams
  8. Firstly, a bit of background • OpenTable, founded in 1998

    - PCLN (NASDAQ) • We find a table for 23+ million diners/month
  9. Firstly, a bit of background • OpenTable, founded in 1998

    - PCLN (NASDAQ) • We find a table for 23+ million diners/month • 300+ engineers
  10. 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
  11. 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
  12. 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
  13. Once upon a time... < Start /> < Restaurant />

    < Search /> microsite microsite microsite
  14. Restaurant Profile Search Results Start Front-door routing microsite: "start" metro:

    "San Francisco" www.opentable.com/san-francisco-restaurants
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. TLDR; • #1 - Microsites architecture • #2 - Sharing

    the common parts • #3 - Serverless architecture for micro frontends
  21. TLDR; • #1 - Microsites architecture • #2 - Sharing

    the common parts • #3 - Serverless architecture for micro frontends • #4 - Template API, infra is UI framework agnostic
  22. TLDR; • #1 - Microsites architecture • #2 - Sharing

    the common parts • #3 - Serverless architecture for micro frontends • #4 - Template API, infra is UI framework agnostic
  23. 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
 });