Micro Frontend Architecture - Building an Extensible UI Platform

Presented at:
- Connect.tech conference, Atlanta, USA (18-10-2019)
- Devoxx, Antwerp, Belgium (07-11-2019)
- Barcelona JS meetup, Spain (22-01-2020)

Video recording:
https://www.youtube.com/watch?v=9Xo-rGUq-6E

At New Relic, we recently released New Relic One, the result of a two-year engineering project to migrate to a micro frontend architecture. This new platform is bringing our users from several separate product-aligned monolithic applications to one single platform and unified experience.

The new UI is broken down into separate micro applications, views, and other extension points. This extensible way of building the platform allows us to reduce the toil required for our development teams to deliver new features. This means we can bring value to our customers much faster and with lower risk.

Not only that, but this new architecture was designed to allow developers from our customers and third parties to extend our platform for their own special use cases. External developers can deploy custom integrations and visualize them using the same UI components and backend services that the core New Relic One platform is built upon.

Based on our real-world experience going through this transition, we will take an honest, open look at the benefits that come with such an architecture, such as ease of deployments, increased team autonomy, localized complexity, and more. There were also many challenges along the way and we will reflect on how we tackled some of the hardest problems we faced - including performance, resiliency, UI consistency, scalability, and even organizational alignment.

Transcript

1. ©2008–18 New Relic, Inc. All rights reserved Micro Frontend Architecture Building an Extensible UI Platform Erik Grijzen ©2008–18 New Relic, Inc. All rights reserved Photo by Andrii Ganzevych on Unsplash
2. ©2008–18 New Relic, Inc. All rights reserved Erik Grijzen Lead Software Engineer @ErikGrijzen Platform UI, Barcelona, Spain
3. ©2008–18 New Relic, Inc. All rights reserved 3 Safe Harbor This presentation and the information herein (including any information that may be incorporated by reference) is provided for informational purposes only and should not be construed as an offer, commitment, promise or obligation on behalf of New Relic, Inc. (“New Relic”) to sell securities or deliver any product, material, code, functionality, or other feature. Any information provided hereby is proprietary to New Relic and may not be replicated or disclosed without New Relic’s express written permission. Such information may contain forward-looking statements within the meaning of federal securities laws. Any statement that is not a historical fact or refers to expectations, projections, future plans, objectives, estimates, goals, or other characterizations of future events is a forward-looking statement. These forward-looking statements can often be identified as such because the context of the statement will include words such as “believes,” “anticipates,” “expects” or words of similar import. Actual results may differ materially from those expressed in these forward-looking statements, which speak only as of the date hereof, and are subject to change at any time without notice. Existing and prospective investors, customers and other third parties transacting business with New Relic are cautioned not to place undue reliance on this forward-looking information. The achievement or success of the matters covered by such forward-looking statements are based on New Relic’s current assumptions, expectations, and beliefs and are subject to substantial risks, uncertainties, assumptions, and changes in circumstances that may cause the actual results, performance, or achievements to differ materially from those expressed or implied in any forward-looking statement. Further information on factors that could affect such forward-looking statements is included in the filings New Relic makes with the SEC from time to time. Copies of these documents may be obtained by visiting New Relic’s Investor Relations website at ir.newrelic.com or the SEC’s website at www.sec.gov. New Relic assumes no obligation and does not intend to update these forward-looking statements, except as required by law. New Relic makes no warranties, expressed or implied, in this presentation or otherwise, with respect to the information provided.
4. ©2008–18 New Relic, Inc. All rights reserved 4 Why? Why did we adopt a micro frontend architecture? What? What are micro frontends? What architecture decisions have we made? How? How did we implement this architecture? ?
5. ©2008–18 New Relic, Inc. All rights reserved _Our journey..._ ©2008–18 New Relic, Inc. All rights reserved Photo by Brett Patzke on Unsplash
6. ©2008–18 New Relic, Inc. All rights reserved 6
7. ©2008–18 New Relic, Inc. All rights reserved 7 One monolithic application. Monolith DB
8. ©2008–18 New Relic, Inc. All rights reserved 8
9. ©2008–18 New Relic, Inc. All rights reserved 9 Typical monolithic problems.
10. ©2008–18 New Relic, Inc. All rights reserved 10 Adopting microservices.
11. ©2008–18 New Relic, Inc. All rights reserved 11 DB API Gateway Single Page App Microservice DB Microservice DB Microservice Dismantling the backend into microservices.
12. ©2008–18 New Relic, Inc. All rights reserved 12 DB API Gateway Single Page App Microservice DB Microservice DB Microservice Every product became a Single Page App.
13. ©2008–18 New Relic, Inc. All rights reserved 13 More or less 2 years ago...
14. ©2008–18 New Relic, Inc. All rights reserved 14 UX Consistency A more connected and unified user experience.
15. ©2008–18 New Relic, Inc. All rights reserved UX Consistency A more connected and unified user experience. 15 Extensibility Allow customers to extend the products.
16. ©2008–18 New Relic, Inc. All rights reserved 16 UX Consistency A more connected and unified user experience. Extensibility Allow customers to extend the products. Remove boilerplate Avoid reinventing the wheels and focus on product innovation.
17. ©2008–18 New Relic, Inc. All rights reserved 17
18. ©2008–18 New Relic, Inc. All rights reserved 18 The New Relic One platform goals. • Easier and faster feature development.
19. ©2008–18 New Relic, Inc. All rights reserved 19 The New Relic One platform goals. • Easier and faster feature development. • A more unified UI / UX.
20. ©2008–18 New Relic, Inc. All rights reserved 20 The New Relic One platform goals. • Easier and faster feature development. • A more unified UI / UX. • Improved performance.
21. ©2008–18 New Relic, Inc. All rights reserved 21 The New Relic One platform goals. • Easier and faster feature development. • A more unified UI / UX. • Improved performance. • Third party extensibility.
22. ©2008–18 New Relic, Inc. All rights reserved 22 How can we scale our UI development?
23. ©2008–18 New Relic, Inc. All rights reserved _Our architecture_ ©2008–18 New Relic, Inc. All rights reserved Photo by Markus Spiske on Unsplash
24. ©2008–18 New Relic, Inc. All rights reserved The idea behind Micro Frontends is to think about a website or web app as a composition of features which are owned by independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end, from database to user interface. 24 www.micro-frontends.org
25. ©2008–18 New Relic, Inc. All rights reserved 25 DB API Gateway Micro frontend Microservice DB Microservice DB Microservice Micro frontend Micro frontend Application
26. ©2008–18 New Relic, Inc. All rights reserved 26 DB API Gateway Micro frontend Microservice DB Microservice DB Microservice Micro frontend Micro frontend Application
27. ©2008–18 New Relic, Inc. All rights reserved Bringing the concepts of microservices to UI development. 27
28. ©2008–18 New Relic, Inc. All rights reserved Easier and faster feature development. 28
29. ©2008–18 New Relic, Inc. All rights reserved 29 Teams should be autonomous. • Independent deployments.
30. ©2008–18 New Relic, Inc. All rights reserved 30 Teams should be autonomous. • Independent deployments. • Cross functional teams.
31. ©2008–18 New Relic, Inc. All rights reserved 31 Teams should be autonomous. • Independent deployments. • Cross functional teams. • End-to-end implementation.
32. ©2008–18 New Relic, Inc. All rights reserved 32 Teams should be autonomous. • Independent deployments. • Cross functional teams. • End-to-end implementation. • Full ownership & responsibility.
33. ©2008–18 New Relic, Inc. All rights reserved 33 Teams should be autonomous. • Independent deployments. • Cross functional teams. • End-to-end implementation. • Full ownership & responsibility. • Allows parallel development.
34. ©2008–18 New Relic, Inc. All rights reserved 34 Micro frontends should be small and decoupled. • Loosely coupled.
35. ©2008–18 New Relic, Inc. All rights reserved 35 Micro frontends should be small and decoupled. • Loosely coupled. • Clear contracts.
36. ©2008–18 New Relic, Inc. All rights reserved 36 Micro frontends should be small and decoupled. • Loosely coupled. • Clear contracts. • Easier to reason about.
37. ©2008–18 New Relic, Inc. All rights reserved 37 Micro frontends should be small and decoupled. • Loosely coupled. • Clear contracts. • Easier to reason about. • Easier to add, change, remove.
38. ©2008–18 New Relic, Inc. All rights reserved 38 Micro frontends should be small and decoupled. • Loosely coupled. • Clear contracts. • Easier to reason about. • Easier to add, change, remove. • Easier to test.
39. ©2008–18 New Relic, Inc. All rights reserved 39 Micro frontends should be business domain centric. • Aligned with business structure.
40. ©2008–18 New Relic, Inc. All rights reserved 40 Micro frontends should be business domain centric. • Aligned with business structure. • Highly specialized teams.
41. ©2008–18 New Relic, Inc. All rights reserved 41 Removing boilerplate. • Creating clear tech standards: ◦ Provide good defaults. ◦ Easier to switch teams. ◦ Innovate on platform level.
42. ©2008–18 New Relic, Inc. All rights reserved 42 Removing boilerplate. • Creating clear tech standards: ◦ Provide good defaults. ◦ Easier to switch teams. ◦ Innovate on platform level. • Automating everything: ◦ Project creation. ◦ Build setup. ◦ Continuous integration. ◦ Continuous deployment.
43. ©2008–18 New Relic, Inc. All rights reserved A more connected and unified user experience. 43
44. ©2008–18 New Relic, Inc. All rights reserved 44 Micro frontends should have a consistent UI / UX. • Design system. ◦ Component library.
45. ©2008–18 New Relic, Inc. All rights reserved 45 Micro frontends should have a consistent UI / UX. • Design system. ◦ Component library. • Declarative platform APIs.
46. ©2008–18 New Relic, Inc. All rights reserved Improved performance. 46
47. ©2008–18 New Relic, Inc. All rights reserved 47 Micro frontends should be performant. • Shared common dependencies.
48. ©2008–18 New Relic, Inc. All rights reserved 48 Micro frontends should be performant. • Shared common dependencies. • Deduplicate dependencies as much as possible.
49. ©2008–18 New Relic, Inc. All rights reserved Micro frontends composition. 49
50. ©2008–18 New Relic, Inc. All rights reserved 50 Build-time composition. Run-time_ Server-side_ Build-time_ Source code_
51. ©2008–18 New Relic, Inc. All rights reserved 51 Server-side composition. Run-time_ Server-side_ Build-time_ Source code_
52. ©2008–18 New Relic, Inc. All rights reserved 52 Run-time composition. Run-time_ Server-side_ Build-time_ Source code_
53. ©2008–18 New Relic, Inc. All rights reserved _Our implementation_ ©2008–18 New Relic, Inc. All rights reserved Photo by Helloquence on Unsplash
54. ©2008–18 New Relic, Inc. All rights reserved 54 Extending the platform with the New Relic One CLI.
55. ©2008–18 New Relic, Inc. All rights reserved > nr1 create --type nerdpack --name my-nerdpack 55
56. ©2008–18 New Relic, Inc. All rights reserved > nr1 create --type nerdpack --name my-nerdpack > cd my-nerdpack 56
57. ©2008–18 New Relic, Inc. All rights reserved 57 Nerdpack package.json
58. ©2008–18 New Relic, Inc. All rights reserved 58 Nerdpack repository. • Project structure.
59. ©2008–18 New Relic, Inc. All rights reserved 59 Nerdpack repository. • Project structure. • Build setup.
60. ©2008–18 New Relic, Inc. All rights reserved 60 Nerdpack repository. • Project structure. • Build setup. • Deployment pipeline.
61. ©2008–18 New Relic, Inc. All rights reserved > nr1 create --type nerdpack --name my-nerdpack > cd my-nerdpack > nr1 create --type nerdlet --name hello-world 61
62. ©2008–18 New Relic, Inc. All rights reserved 62 Nerdpack package.json Nerdlet
63. ©2008–18 New Relic, Inc. All rights reserved 63 Nerdpack package.json Nerdlet Nerdlet Nerdlet Nerdlet Nerdlet
64. ©2008–18 New Relic, Inc. All rights reserved 64
65. ©2008–18 New Relic, Inc. All rights reserved 65
66. ©2008–18 New Relic, Inc. All rights reserved 66 nr1.json { "schemaType": "NERDLET", "id": "hello-world", "displayName": "Hello world", "description": "This is a Hello world Nerdlet.", "actionCategory": "troubleshoot" } Nerdpack package.json Nerdlet Nerdlet Nerdlet Nerdlet Nerdlet
67. ©2008–18 New Relic, Inc. All rights reserved 67
68. ©2008–18 New Relic, Inc. All rights reserved 68
69. ©2008–18 New Relic, Inc. All rights reserved 69
70. ©2008–18 New Relic, Inc. All rights reserved 70 nr1.json index.js export default class HelloWorld extends React.Component { render() { return <div>Hello World!</div>; } } Nerdpack package.json Nerdlet Nerdlet Nerdlet Nerdlet Nerdlet
71. ©2008–18 New Relic, Inc. All rights reserved 71 nr1.json index.js styles.scss Nerdpack package.json Nerdlet Nerdlet Nerdlet Nerdlet Nerdlet .HelloWorld { background: #a1a1a1; }
72. ©2008–18 New Relic, Inc. All rights reserved > nr1 create --type nerdpack --name my-nerdpack > cd my-nerdpack > nr1 create --type nerdlet --name hello-world > nr1 nerdpack:serve 72
73. ©2008–18 New Relic, Inc. All rights reserved > nr1 create --type nerdpack --name my-nerdpack > cd my-nerdpack > nr1 create --type nerdlet --name hello-world > nr1 nerdpack:serve > nr1 nerdpack:publish 73
74. ©2008–18 New Relic, Inc. All rights reserved 74 Nerdpack package.json Nerdlet Nerdlet Nerdlet Nerdlet Nerdlet Registry service _publish_
75. ©2008–18 New Relic, Inc. All rights reserved 75 Nerdpack package.json Nerdlet Nerdlet Nerdlet Nerdlet Nerdlet Registry service S3 Bucket Database _publish_ JSON JS CSS
76. ©2008–18 New Relic, Inc. All rights reserved > nr1 create --type nerdpack --name my-nerdpack > cd my-nerdpack > nr1 create --type nerdlet --name hello-world > nr1 nerdpack:serve > nr1 nerdpack:publish > nr1 nerdpack:deploy 76
77. ©2008–18 New Relic, Inc. All rights reserved Everything works out of the box. 77
78. ©2008–18 New Relic, Inc. All rights reserved Other types of micro frontends. 78
79. ©2008–18 New Relic, Inc. All rights reserved 79 Nerdpack Nerdlet (Views)
80. ©2008–18 New Relic, Inc. All rights reserved 80 Nerdpack Nerdlet Launcher (Views) (Applications)
81. ©2008–18 New Relic, Inc. All rights reserved 81 Nerdpack Nerdlet Launcher Overlay (Views) (Applications) (Cross platform experiences)
82. ©2008–18 New Relic, Inc. All rights reserved 82 Nerdpack Nerdlet Launcher Overlay Entity Type (Views) (Applications) (Cross platform experiences) (Models)
83. ©2008–18 New Relic, Inc. All rights reserved 83 Nerdpack Nerdlet Launcher Overlay Entity Type Hook (Views) (Applications) (Cross platform experiences) (Models) (Extension points)
84. ©2008–18 New Relic, Inc. All rights reserved 84 Nerdpack Nerdlet Launcher Overlay Entity Type Hook nr1.json index.js { "schemaType": "HOOK", "id": "add-to-dashboard-hook", "displayName": "Add to dashboard", "extends": ["chart-widget-actions"] }
85. ©2008–18 New Relic, Inc. All rights reserved 85
86. ©2008–18 New Relic, Inc. All rights reserved 86
87. ©2008–18 New Relic, Inc. All rights reserved 87
88. ©2008–18 New Relic, Inc. All rights reserved 88
89. ©2008–18 New Relic, Inc. All rights reserved 89 Nerdpack Nerdlet Launcher Overlay Entity Type Hook nr1.json index.js export default function(args) { // ... }
90. ©2008–18 New Relic, Inc. All rights reserved 90
91. ©2008–18 New Relic, Inc. All rights reserved Platform application shell. 91
92. ©2008–18 New Relic, Inc. All rights reserved 92
93. ©2008–18 New Relic, Inc. All rights reserved 93 Application shell responsibilities. • Fast initial load.
94. ©2008–18 New Relic, Inc. All rights reserved 94 Application shell responsibilities. • Fast initial load. • Handle cross cutting concerns.
95. ©2008–18 New Relic, Inc. All rights reserved 95 Application shell responsibilities. • Fast initial load. • Handle cross cutting concerns. • Layout composition.
96. ©2008–18 New Relic, Inc. All rights reserved 96 Application shell responsibilities. • Fast initial load. • Handle cross cutting concerns. • Layout composition. • Provide common dependencies.
97. ©2008–18 New Relic, Inc. All rights reserved 97 Dependency management.
98. ©2008–18 New Relic, Inc. All rights reserved No dependencies 98 Dependency deduplication. Nerdlet
99. ©2008–18 New Relic, Inc. All rights reserved No dependencies 99 Dependency deduplication. Webpack common chunks Nerdlet Nerdpack
100. ©2008–18 New Relic, Inc. All rights reserved No dependencies 100 Dependency deduplication. Webpack common chunks Webpack externals Nerdlet Nerdpack Platform application
101. ©2008–18 New Relic, Inc. All rights reserved 101 Sharing common libraries. // webpack.config.js module.exports = { externals: { 'react': 'React', 'react-dom': 'ReactDOM', 'd3': 'd3', } };
102. ©2008–18 New Relic, Inc. All rights reserved Layout composition. 102
103. ©2008–18 New Relic, Inc. All rights reserved 103
104. ©2008–18 New Relic, Inc. All rights reserved 104 Layout containers. • Loader mechanism.
105. ©2008–18 New Relic, Inc. All rights reserved 105 Layout containers. • Loader mechanism. • CSS namespacing.
106. ©2008–18 New Relic, Inc. All rights reserved 106 CSS namespacing. .HelloWorld { background: #a1a1a1; }
107. ©2008–18 New Relic, Inc. All rights reserved 107 CSS namespacing. .my-nerdpack .HelloWorld { background: #a1a1a1; }
108. ©2008–18 New Relic, Inc. All rights reserved 108 Layout containers. • Loader mechanism. • CSS namespacing. • Error boundaries.
109. ©2008–18 New Relic, Inc. All rights reserved 109 Component error boundaries. class ErrorBoundary extends Component { componentDidCatch(error, errorInfo) { logError(error, errorInfo); this.setState({ error, }); } render() { if (this.state.error) { return <ErrorMessage />; } return this.props.children; } }
110. ©2008–18 New Relic, Inc. All rights reserved 110 Component error boundaries. class NerdletContainer extends Component { render() { return ( <ErrorBoundary> <Nerdlet /> </ErrorBoundary> ); } }
111. ©2008–18 New Relic, Inc. All rights reserved 111 Layout containers. • Loader mechanism. • CSS namespacing. • Error boundaries. • Basic logging / instrumentation.
112. ©2008–18 New Relic, Inc. All rights reserved 112 https://one.newrelic.com/:nerdpackId/:nerdletId
113. ©2008–18 New Relic, Inc. All rights reserved 113 https://one.newrelic.com/my-nerdpack/hello-world
114. ©2008–18 New Relic, Inc. All rights reserved 114 { "sidebar": { "id": "my-nerdpack.sidebar" } } https://one.newrelic.com/my-nerdpack/hello-world ?state=IjQxRDIxMTk5LTMzMUItNjQyQy03ODk3LTg5NjVGM=
115. ©2008–18 New Relic, Inc. All rights reserved The platform SDK. 115
116. ©2008–18 New Relic, Inc. All rights reserved 116 The platform SDK. • Configure platform features.
117. ©2008–18 New Relic, Inc. All rights reserved 117 The platform SDK. • Configure platform features. • Navigation.
118. ©2008–18 New Relic, Inc. All rights reserved 118 The platform SDK. • Configure platform features. • Navigation. • Persist and receive URL state.
119. ©2008–18 New Relic, Inc. All rights reserved 119 The platform SDK. • Configure platform features. • Navigation. • Persist and receive URL state. • Catalog of all micro frontends.
120. ©2008–18 New Relic, Inc. All rights reserved 120 The platform SDK. • Configure platform features. • Navigation. • Persist and receive URL state. • Catalog of all micro frontends. • Shared UI components.
121. ©2008–18 New Relic, Inc. All rights reserved Building experiences. 121
122. ©2008–18 New Relic, Inc. All rights reserved 122 Nerdlet A
123. ©2008–18 New Relic, Inc. All rights reserved 123 import { Button, navigation } from 'nr1';
124. ©2008–18 New Relic, Inc. All rights reserved 124 import { Button, navigation } from 'nr1'; export default class MyNerdlet extends React.Component { render() { return <Button onClick={this.onClick}>Click me</Button>; } }
125. ©2008–18 New Relic, Inc. All rights reserved 125 import { Button, navigation } from 'nr1'; export default class MyNerdlet extends React.Component { onClick() { navigation.openNerdlet({ id: 'my-nerdpack.nerdlet-b', urlState: { entityId: 832974, } }); } render() { return <Button onClick={this.onClick}>Click me</Button>; } }
126. ©2008–18 New Relic, Inc. All rights reserved 126 Nerdlet B
127. ©2008–18 New Relic, Inc. All rights reserved 127 Cross communication. • URL State.
128. ©2008–18 New Relic, Inc. All rights reserved 128 Cross communication. • URL State. • Pub/Sub library.
129. ©2008–18 New Relic, Inc. All rights reserved 129 Backend communication.
130. ©2008–18 New Relic, Inc. All rights reserved 130 Micro frontend Microservice Microservice Microservice Micro frontend Micro frontend +
131. ©2008–18 New Relic, Inc. All rights reserved 131 Third-party extensibility.
132. ©2008–18 New Relic, Inc. All rights reserved 132 Third party extensibility. • Open the CLI to the public.
133. ©2008–18 New Relic, Inc. All rights reserved 133 Third party extensibility. • Open the CLI to the public. • Secure sandboxing.
134. ©2008–18 New Relic, Inc. All rights reserved 134 Third party extensibility. • Open the CLI to the public. • Secure sandboxing. • Limited SDK surface.
135. ©2008–18 New Relic, Inc. All rights reserved Secure sandboxes. 135 <iframe>
136. ©2008–18 New Relic, Inc. All rights reserved Secure sandboxes. 136 <iframe> RPC Bridge (window.postMessage)
137. ©2008–18 New Relic, Inc. All rights reserved 137
138. ©2008–18 New Relic, Inc. All rights reserved _Our experience_ ©2008–18 New Relic, Inc. All rights reserved Photo by Startaê Team on Unsplash
139. ©2008–18 New Relic, Inc. All rights reserved 139 Did we achieve our goals? • Easier and faster feature development.
140. ©2008–18 New Relic, Inc. All rights reserved 140 Did we achieve our goals? • Easier and faster feature development. • A more unified UI / UX.
141. ©2008–18 New Relic, Inc. All rights reserved 141 Did we achieve our goals? • Easier and faster feature development. • A more unified UI / UX. • Improved performance.
142. ©2008–18 New Relic, Inc. All rights reserved 142 Did we achieve our goals? • Easier and faster feature development. • A more unified UI / UX. • Improved performance. • Third party extensibility.
143. ©2008–18 New Relic, Inc. All rights reserved 143 How can we scale our UI development?
144. ©2008–18 New Relic, Inc. All rights reserved 144 How can we scale our UI development? 1. Communication is still key.
145. ©2008–18 New Relic, Inc. All rights reserved 145 How can we scale our UI development? 1. Communication is still key. 2. Find the right balance.
146. ©2008–18 New Relic, Inc. All rights reserved 146 How can we scale our UI development? 1. Communication is still key. 2. Find the right balance. 3. Invest in UI infrastructure.
147. Thank You ©2008–18 New Relic, Inc. All rights reserved @ErikGrijzen bit.ly/2MrSE81