Save 37% off PRO during our Black Friday Sale! »

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. Breaking the frontend monolith @nickbalestra

  2. Breaking the frontend monolith @nickbalestra

  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
  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.
  5. Firstly, a bit of background

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

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

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

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

  13. Once upon a time...

  14. Once upon a time... product consistency

  15. Once upon a time... product consistency velocity at scale

  16. 50 shades of FE monolith The monolith Front & Back

    Micro services
  17. Once upon a time...

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

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

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

    "San Francisco" www.opentable.com/san-francisco-restaurants
  21. 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
  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
  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
  24. HTML Fragments μservice Restaurant Profile Search Results Start < Start

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

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

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

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

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

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

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

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

  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
  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
  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
  36. HTML Fragments µservice

  37. HTML Fragments µservice

  38. HTML Fragments µservice

  39. HTML Fragments µservice Restaurant Profile Search Results Start latest minor

    patch latest patch patch latest major minor
  40. HTML Fragments µservice Restaurant Profile Search Results Start latest minor

    patch latest patch patch latest major minor
  41. HTML Fragments µservice Restaurant Profile Search Results Start latest minor

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

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

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

    latest patch patch latest major minor
  45. v0 architecture Search Results Start OC Registry CDN OC Library

    CLI Templates Client libraries
  46. TLDR;

  47. TLDR; • #1 - Microsites architecture

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

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

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

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

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

  53. Demo $ npm install oc

  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. "There are only two hard things in Computer Science: cache

    invalidation and naming things"
  59. Components

  60. Components oc UI Lib

  61. "When you have an hammer everything looks like a nail"

  62. None
  63. None
  64. None
  65. None
  66. Tools

  67. Tools

  68. Who's using OC?

  69. Who's using OC?

  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.
  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!
  72. Dziękuję! @nickbalestra github.com/opentable/oc