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

Dismantling the frontend monolith together

Nick Balestra
September 07, 2017

Dismantling the frontend monolith together

A story about refactoring, decentralized architectures and fast moving teams.

While microservices are common architectures for the backend, most frontend layers are still running as monolithic applications. Therefore building, deploying and consuming frontend features across a diversity of teams and web applications can be a daunting task, especially at scale.

In this talk I'll walk you through our refactoring journey that led us to a decentralized microfrontend architecture. We’ll see how at OpenTable we enable fast-moving teams to easily build and independently deploy micro frontends using OpenComponents: an open-source, battle tested, framework for painless microfrontends delivery.

Nick Balestra

September 07, 2017
Tweet

More Decks by Nick Balestra

Other Decks in Technology

Transcript

  1. Dismantling the frontend monolith together A story about refactoring, decentralized

    FE architectures, and fast moving teams. @nickbalestra
  2. Dismantling the frontend monolith together A story about refactoring, decentralized

    FE architectures, and fast moving teams. @nickbalestra
  3. Firstly, a bit of background • OpenTable, founded in 1998

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

    - PCLN (NASDAQ) • We find a table for 23+ million diners/month • 50+ engineers working on consumer web* * opentable.com
  5. Firstly, a bit of background • OpenTable, founded in 1998

    - PCLN (NASDAQ) • We find a table for 23+ million diners/month • 50+ engineers working on consumer web* • Europe, North and South America, Asia * opentable.com
  6. Firstly, a bit of background • OpenTable, founded in 1998

    - PCLN (NASDAQ) • We find a table for 23+ million diners/month • 50+ engineers working on consumer web* • Europe, North and South America, Asia • Millions requests/minute * opentable.com
  7. Firstly, a bit of background • OpenTable, founded in 1998

    - PCLN (NASDAQ) • We find a table for 23+ million diners/month • 50+ engineers working on consumer web* • Europe, North and South America, Asia • Millions requests/minute • Full-stack culture * opentable.com
  8. Once upon a time... < Start /> < Restaurant />

    < Search /> microsite microsite microsite
  9. v0 architecture www.opentable.com/san-francisco-restaurants Restaurant Profile Search Results Start < Restaurant

    /> < Search /> Front-door routing < Start /> https://start-123/?domain=com&metro=4 microsite: "start" metro: "San Francisco" microsite
  10. v0 architecture Restaurant Profile Search Results Start www.opentable.com/san-francisco-restaurants 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&...
  11. v0 architecture Restaurant Profile Search Results Start < Page />

    www.opentable.com/san-francisco-restaurants 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&...
  12. v0 architecture OC Runtime agents Restaurant Profile Search Results Start

    OC Registry OC Runtime agents OC Runtime agents OC Runtime agents CDN OC Library OC Runtime agents
  13. v0 architecture OC Runtime agents Restaurant Profile Search Results Start

    OC Registry OC Runtime agents OC Runtime agents OC Runtime agents CDN OC Library OC Runtime agents
  14. v0 architecture OC Runtime agents Restaurant Profile Search Results Start

    OC Registry OC Runtime agents OC Runtime agents OC Runtime agents CDN OC Library OC Runtime agents CLI: - create - develop - publishing
  15. v0 architecture OC Runtime agents Restaurant Profile Search Results Start

    OC Registry OC Runtime agents OC Runtime agents OC Runtime agents CDN OC Library OC Runtime agents
  16. v0 architecture OC Runtime agents Restaurant Profile Search Results Start

    OC Registry OC Runtime agents OC Runtime agents OC Runtime agents CDN OC Library OC Runtime agents The registry - consume - retrieve - publish
  17. v0 architecture OC Runtime agents Restaurant Profile Search Results Start

    OC Registry OC Runtime agents OC Runtime agents OC Runtime agents CDN OC Library OC Runtime agents
  18. v0 architecture OC Runtime agents Restaurant Profile Search Results Start

    OC Registry OC Runtime agents OC Runtime agents OC Runtime agents CDN OC Library OC Runtime agents Components: - html - javascript - css
  19. v0 architecture OC Runtime agents Restaurant Profile Search Results Start

    OC Registry OC Runtime agents OC Runtime agents OC Runtime agents CDN OC Library OC Runtime agents
  20. v0 architecture OC Runtime agents Restaurant Profile Search Results Start

    OC Registry OC Runtime agents OC Runtime agents OC Runtime agents CDN OC Library OC Runtime agents Templates: - compile - render - scaffold
  21. v0 architecture OC Runtime agents Restaurant Profile Search Results Start

    OC Registry OC Runtime agents OC Runtime agents OC Runtime agents CDN OC Library OC Runtime agents
  22. v0 architecture OC Runtime agents Restaurant Profile Search Results Start

    OC Registry OC Runtime agents OC Runtime agents OC Runtime agents CDN OC Library OC Runtime agents client libraries - consume
  23. v0 architecture OC Runtime agents Restaurant Profile Search Results Start

    OC Registry OC Runtime agents OC Runtime agents OC Runtime agents CDN OC Library OC Runtime agents
  24. TLDR; • #1 - Microsites architecture • #2 - Sharing

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

    the common parts • #3 - Serverless architecture for micro frontends • #4 - Component stack abstraction
  26. TLDR; • #1 - Microsites architecture • #2 - Sharing

    the common parts • #3 - Serverless architecture for micro frontends • #4 - Component stack abstraction
  27. 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
 });