Breaking the frontend monolith - #frontendconnect17

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

Breaking the frontend monolith - #frontendconnect17

While breaking the monolith into micro-services is a common approach for the backend, most frontends are still running as a monolithic application. Therefore building, deploying and consuming frontend components across a diversity of teams and web applications can be a daunting task, especially at scale. To address this issue, at OpenTable we enable fast-moving teams to easily build and deploy front-end components using OpenComponents, an open-source, battle tested, front-end microservice architecture for painless component delivery.
During this session I’ll explain how OpenComponents works, how do we use it at OpenTable and how we allows teams to build frontend components with different client-side technologies that seamless work together.

9fd8409875c0b29ceb9407eed4c9505d?s=128

Nick Balestra

September 23, 2017
Tweet

Transcript

  1. 3.

    Cześć! Software engineer @OpenTable, DX Team Co-author of create-cycle-app &

    redux-cycles Love OSS/JS/Node OpenComponents core team Follow me: @nickbalestra
  2. 4.

    Breaking the frontend monolith A story about refactoring, decentralized FE

    architectures, and fast moving teams. @nickbalestra A story about refactoring, decentralized FE architectures, and fast moving teams.
  3. 7.

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

    - PCLN (NASDAQ) • We find a table for 23+ million diners/month
  4. 8.

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

    - PCLN (NASDAQ) • We find a table for 23+ million diners/month • 300+ engineers
  5. 9.

    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
  6. 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 • Millions requests/minute
  7. 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 • Full-stack culture
  8. 18.

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

    < Search /> microsite microsite microsite
  9. 20.

    Restaurant Profile Search Results Start Front-door routing microsite: "start" metro:

    "San Francisco" www.opentable.com/san-francisco-restaurants
  10. 22.

    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
  11. 23.

    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
  12. 33.

    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
  13. 34.

    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
  14. 35.

    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
  15. 46.
  16. 49.

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

    the common parts • #3 - Serverless architecture for micro frontends
  17. 50.

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

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

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

    the common parts • #3 - Serverless architecture for micro frontends • #4 - Component stack abstraction
  19. 52.
  20. 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
 });
  21. 62.
  22. 63.
  23. 64.
  24. 65.
  25. 66.
  26. 67.
  27. 70.

    Who's using OC? OpenComponents are great! It has helped us

    break our monolithic architecture into smaller components and achieve improved speed of delivery, team autonomy and ownership of different parts of the website. Independent ownership and releases of components have sped up our feature delivery drastically.
  28. 71.

    Who's using OC? OpenComponents are great! It has helped us

    break our monolithic architecture into smaller components and achieve improved speed of delivery, team autonomy and ownership of different parts of the website. Independent ownership and releases of components have sped up our feature delivery drastically. We have been using OpenComponents for bringing in flexibility of having a common layouts for different front-end blocks. Whether it's Header, or different related content widgets. We are actually in process of adding new OCs/enhancements every month. Its comes with joy of independent deployments, continuous delivery and integration, and of-course all the added benefits of Node.Js!