Dismantling the frontend monolith together

9fd8409875c0b29ceb9407eed4c9505d?s=47 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.

9fd8409875c0b29ceb9407eed4c9505d?s=128

Nick Balestra

September 07, 2017
Tweet

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. Hello! Software engineer @OpenTable Love OSS/JS/Node OpenComponents core team Follow

    me: @nickbalestra
  4. Firstly, a bit of background

  5. Firstly, a bit of background • OpenTable, founded in 1998

    - PCLN (NASDAQ)
  6. Firstly, a bit of background • OpenTable, founded in 1998

    - PCLN (NASDAQ) • We find a table for 23+ million diners/month
  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* * opentable.com
  8. 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
  9. 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
  10. 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
  11. Once upon a time...

  12. Once upon a time...

  13. Once upon a time... • Good: product consistency

  14. Once upon a time... • Good: product consistency • Bad:

    velocity at scale
  15. Once upon a time... • Good: product consistency • Bad:

    velocity at scale
  16. Once upon a time...

  17. Once upon a time...

  18. Once upon a time... < Start /> < Restaurant />

    < Search /> microsite microsite microsite
  19. v0 architecture www.opentable.com/san-francisco-restaurants

  20. 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
  21. HTML Fragments service Restaurant Profile Search Results Start < Start

    /> < Restaurant /> < Search />
  22. HTML Fragments service Restaurant Profile Search Results Start < Start

    /> < Restaurant /> < Search />
  23. HTML Fragments service Restaurant Profile Search Results Start

  24. v0 architecture Restaurant Profile Search Results Start www.opentable.com/san-francisco-restaurants

  25. v0 architecture Restaurant Profile Search Results Start www.opentable.com/san-francisco-restaurants https://start-123/?domain=com&metro=4

  26. 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" }
  27. 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&...
  28. 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&...
  29. HTML Fragments service

  30. HTML Fragments service

  31. HTML Fragments service Restaurant Profile Search Results Start latest minor

    patch latest patch patch latest major minor
  32. HTML Fragments service Restaurant Profile Search Results Start https://components-123/header/1.0.0 latest

    minor patch latest patch patch latest major minor
  33. HTML Fragments service Restaurant Profile Search Results Start https://components-123/header/1.0.0 latest

    minor patch latest patch patch latest major minor
  34. OpenComponents Restaurant Profile Search Results Start https://components-123/header/1.0.0 latest minor patch

    latest patch patch latest major minor
  35. 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
  36. 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
  37. 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
  38. 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
  39. 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
  40. 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
  41. 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
  42. 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
  43. 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
  44. 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
  45. 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
  46. 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
  47. TLDR;

  48. TLDR; • #1 - Microsites architecture

  49. TLDR; • #1 - Microsites architecture • #2 - Sharing

    the common parts
  50. TLDR; • #1 - Microsites architecture • #2 - Sharing

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

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

    the common parts • #3 - Serverless architecture for micro frontends • #4 - Component stack abstraction
  53. Demo

  54. Client-side rendering

  55. 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>
  56. Server-side rendering

  57. 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
 });
  58. What else?

  59. What else?

  60. What else?

  61. What else?

  62. Tools

  63. Tools

  64. Who else?

  65. Who else?

  66. Thank you! @nickbalestra opencomponents.github.io gitter.im/opentable/oc