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.

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