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.

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"
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