Tweet
Tweet

Slide 1

Slide 1 text

©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

Slide 2

Slide 2 text

©2008–18 New Relic, Inc. All rights reserved Erik Grijzen Lead Software Engineer @ErikGrijzen Platform UI, Barcelona, Spain

Slide 3

Slide 3 text

©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.

Slide 4

Slide 4 text

©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? ?

Slide 5

Slide 5 text

©2008–18 New Relic, Inc. All rights reserved _Our journey..._ ©2008–18 New Relic, Inc. All rights reserved Photo by Brett Patzke on Unsplash

Slide 6

Slide 6 text

©2008–18 New Relic, Inc. All rights reserved 6

Slide 7

Slide 7 text

©2008–18 New Relic, Inc. All rights reserved 7 One monolithic application. Monolith DB

Slide 8

Slide 8 text

©2008–18 New Relic, Inc. All rights reserved 8

Slide 9

Slide 9 text

©2008–18 New Relic, Inc. All rights reserved 9 Typical monolithic problems.

Slide 10

Slide 10 text

©2008–18 New Relic, Inc. All rights reserved 10 Adopting microservices.

Slide 11

Slide 11 text

©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.

Slide 12

Slide 12 text

©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.

Slide 13

Slide 13 text

©2008–18 New Relic, Inc. All rights reserved 13 More or less 2 years ago...

Slide 14

Slide 14 text

©2008–18 New Relic, Inc. All rights reserved 14 UX Consistency A more connected and unified user experience.

Slide 15

Slide 15 text

©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.

Slide 16

Slide 16 text

©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.

Slide 17

Slide 17 text

©2008–18 New Relic, Inc. All rights reserved 17

Slide 18

Slide 18 text

©2008–18 New Relic, Inc. All rights reserved 18 The New Relic One platform goals. ● Easier and faster feature development.

Slide 19

Slide 19 text

©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.

Slide 20

Slide 20 text

©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.

Slide 21

Slide 21 text

©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.

Slide 22

Slide 22 text

©2008–18 New Relic, Inc. All rights reserved 22 How can we scale our UI development?

Slide 23

Slide 23 text

©2008–18 New Relic, Inc. All rights reserved _Our architecture_ ©2008–18 New Relic, Inc. All rights reserved Photo by Markus Spiske on Unsplash

Slide 24

Slide 24 text

©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

Slide 25

Slide 25 text

©2008–18 New Relic, Inc. All rights reserved 25 DB API Gateway Micro frontend Microservice DB Microservice DB Microservice Micro frontend Micro frontend Application

Slide 26

Slide 26 text

©2008–18 New Relic, Inc. All rights reserved 26 DB API Gateway Micro frontend Microservice DB Microservice DB Microservice Micro frontend Micro frontend Application

Slide 27

Slide 27 text

©2008–18 New Relic, Inc. All rights reserved Bringing the concepts of microservices to UI development. 27

Slide 28

Slide 28 text

©2008–18 New Relic, Inc. All rights reserved Easier and faster feature development. 28

Slide 29

Slide 29 text

©2008–18 New Relic, Inc. All rights reserved 29 Teams should be autonomous. ● Independent deployments.

Slide 30

Slide 30 text

©2008–18 New Relic, Inc. All rights reserved 30 Teams should be autonomous. ● Independent deployments. ● Cross functional teams.

Slide 31

Slide 31 text

©2008–18 New Relic, Inc. All rights reserved 31 Teams should be autonomous. ● Independent deployments. ● Cross functional teams. ● End-to-end implementation.

Slide 32

Slide 32 text

©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.

Slide 33

Slide 33 text

©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.

Slide 34

Slide 34 text

©2008–18 New Relic, Inc. All rights reserved 34 Micro frontends should be small and decoupled. ● Loosely coupled.

Slide 35

Slide 35 text

©2008–18 New Relic, Inc. All rights reserved 35 Micro frontends should be small and decoupled. ● Loosely coupled. ● Clear contracts.

Slide 36

Slide 36 text

©2008–18 New Relic, Inc. All rights reserved 36 Micro frontends should be small and decoupled. ● Loosely coupled. ● Clear contracts. ● Easier to reason about.

Slide 37

Slide 37 text

©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.

Slide 38

Slide 38 text

©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.

Slide 39

Slide 39 text

©2008–18 New Relic, Inc. All rights reserved 39 Micro frontends should be business domain centric. ● Aligned with business structure.

Slide 40

Slide 40 text

©2008–18 New Relic, Inc. All rights reserved 40 Micro frontends should be business domain centric. ● Aligned with business structure. ● Highly specialized teams.

Slide 41

Slide 41 text

©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.

Slide 42

Slide 42 text

©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.

Slide 43

Slide 43 text

©2008–18 New Relic, Inc. All rights reserved A more connected and unified user experience. 43

Slide 44

Slide 44 text

©2008–18 New Relic, Inc. All rights reserved 44 Micro frontends should have a consistent UI / UX. ● Design system. ○ Component library.

Slide 45

Slide 45 text

©2008–18 New Relic, Inc. All rights reserved 45 Micro frontends should have a consistent UI / UX. ● Design system. ○ Component library. ● Declarative platform APIs.

Slide 46

Slide 46 text

©2008–18 New Relic, Inc. All rights reserved Improved performance. 46

Slide 47

Slide 47 text

©2008–18 New Relic, Inc. All rights reserved 47 Micro frontends should be performant. ● Shared common dependencies.

Slide 48

Slide 48 text

©2008–18 New Relic, Inc. All rights reserved 48 Micro frontends should be performant. ● Shared common dependencies. ● Deduplicate dependencies as much as possible.

Slide 49

Slide 49 text

©2008–18 New Relic, Inc. All rights reserved Micro frontends composition. 49

Slide 50

Slide 50 text

©2008–18 New Relic, Inc. All rights reserved 50 Build-time composition. Run-time_ Server-side_ Build-time_ Source code_

Slide 51

Slide 51 text

©2008–18 New Relic, Inc. All rights reserved 51 Server-side composition. Run-time_ Server-side_ Build-time_ Source code_

Slide 52

Slide 52 text

©2008–18 New Relic, Inc. All rights reserved 52 Run-time composition. Run-time_ Server-side_ Build-time_ Source code_

Slide 53

Slide 53 text

©2008–18 New Relic, Inc. All rights reserved _Our implementation_ ©2008–18 New Relic, Inc. All rights reserved Photo by Helloquence on Unsplash

Slide 54

Slide 54 text

©2008–18 New Relic, Inc. All rights reserved 54 Extending the platform with the New Relic One CLI.

Slide 55

Slide 55 text

©2008–18 New Relic, Inc. All rights reserved > nr1 create --type nerdpack --name my-nerdpack 55

Slide 56

Slide 56 text

©2008–18 New Relic, Inc. All rights reserved > nr1 create --type nerdpack --name my-nerdpack > cd my-nerdpack 56

Slide 57

Slide 57 text

©2008–18 New Relic, Inc. All rights reserved 57 Nerdpack package.json

Slide 58

Slide 58 text

©2008–18 New Relic, Inc. All rights reserved 58 Nerdpack repository. ● Project structure.

Slide 59

Slide 59 text

©2008–18 New Relic, Inc. All rights reserved 59 Nerdpack repository. ● Project structure. ● Build setup.

Slide 60

Slide 60 text

©2008–18 New Relic, Inc. All rights reserved 60 Nerdpack repository. ● Project structure. ● Build setup. ● Deployment pipeline.

Slide 61

Slide 61 text

©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

Slide 62

Slide 62 text

©2008–18 New Relic, Inc. All rights reserved 62 Nerdpack package.json Nerdlet

Slide 63

Slide 63 text

©2008–18 New Relic, Inc. All rights reserved 63 Nerdpack package.json Nerdlet Nerdlet Nerdlet Nerdlet Nerdlet

Slide 64

Slide 64 text

©2008–18 New Relic, Inc. All rights reserved 64

Slide 65

Slide 65 text

©2008–18 New Relic, Inc. All rights reserved 65

Slide 66

Slide 66 text

©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

Slide 67

Slide 67 text

©2008–18 New Relic, Inc. All rights reserved 67

Slide 68

Slide 68 text

©2008–18 New Relic, Inc. All rights reserved 68

Slide 69

Slide 69 text

©2008–18 New Relic, Inc. All rights reserved 69

Slide 70

Slide 70 text

©2008–18 New Relic, Inc. All rights reserved 70 nr1.json index.js export default class HelloWorld extends React.Component { render() { return
Hello World!
; } } Nerdpack package.json Nerdlet Nerdlet Nerdlet Nerdlet Nerdlet

Slide 71

Slide 71 text

©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; }

Slide 72

Slide 72 text

©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

Slide 73

Slide 73 text

©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

Slide 74

Slide 74 text

©2008–18 New Relic, Inc. All rights reserved 74 Nerdpack package.json Nerdlet Nerdlet Nerdlet Nerdlet Nerdlet Registry service _publish_

Slide 75

Slide 75 text

©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

Slide 76

Slide 76 text

©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

Slide 77

Slide 77 text

©2008–18 New Relic, Inc. All rights reserved Everything works out of the box. 77

Slide 78

Slide 78 text

©2008–18 New Relic, Inc. All rights reserved Other types of micro frontends. 78

Slide 79

Slide 79 text

©2008–18 New Relic, Inc. All rights reserved 79 Nerdpack Nerdlet (Views)

Slide 80

Slide 80 text

©2008–18 New Relic, Inc. All rights reserved 80 Nerdpack Nerdlet Launcher (Views) (Applications)

Slide 81

Slide 81 text

©2008–18 New Relic, Inc. All rights reserved 81 Nerdpack Nerdlet Launcher Overlay (Views) (Applications) (Cross platform experiences)

Slide 82

Slide 82 text

©2008–18 New Relic, Inc. All rights reserved 82 Nerdpack Nerdlet Launcher Overlay Entity Type (Views) (Applications) (Cross platform experiences) (Models)

Slide 83

Slide 83 text

©2008–18 New Relic, Inc. All rights reserved 83 Nerdpack Nerdlet Launcher Overlay Entity Type Hook (Views) (Applications) (Cross platform experiences) (Models) (Extension points)

Slide 84

Slide 84 text

©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"] }

Slide 85

Slide 85 text

©2008–18 New Relic, Inc. All rights reserved 85

Slide 86

Slide 86 text

©2008–18 New Relic, Inc. All rights reserved 86

Slide 87

Slide 87 text

©2008–18 New Relic, Inc. All rights reserved 87

Slide 88

Slide 88 text

©2008–18 New Relic, Inc. All rights reserved 88

Slide 89

Slide 89 text

©2008–18 New Relic, Inc. All rights reserved 89 Nerdpack Nerdlet Launcher Overlay Entity Type Hook nr1.json index.js export default function(args) { // ... }

Slide 90

Slide 90 text

©2008–18 New Relic, Inc. All rights reserved 90

Slide 91

Slide 91 text

©2008–18 New Relic, Inc. All rights reserved Platform application shell. 91

Slide 92

Slide 92 text

©2008–18 New Relic, Inc. All rights reserved 92

Slide 93

Slide 93 text

©2008–18 New Relic, Inc. All rights reserved 93 Application shell responsibilities. ● Fast initial load.

Slide 94

Slide 94 text

©2008–18 New Relic, Inc. All rights reserved 94 Application shell responsibilities. ● Fast initial load. ● Handle cross cutting concerns.

Slide 95

Slide 95 text

©2008–18 New Relic, Inc. All rights reserved 95 Application shell responsibilities. ● Fast initial load. ● Handle cross cutting concerns. ● Layout composition.

Slide 96

Slide 96 text

©2008–18 New Relic, Inc. All rights reserved 96 Application shell responsibilities. ● Fast initial load. ● Handle cross cutting concerns. ● Layout composition. ● Provide common dependencies.

Slide 97

Slide 97 text

©2008–18 New Relic, Inc. All rights reserved 97 Dependency management.

Slide 98

Slide 98 text

©2008–18 New Relic, Inc. All rights reserved No dependencies 98 Dependency deduplication. Nerdlet

Slide 99

Slide 99 text

©2008–18 New Relic, Inc. All rights reserved No dependencies 99 Dependency deduplication. Webpack common chunks Nerdlet Nerdpack

Slide 100

Slide 100 text

©2008–18 New Relic, Inc. All rights reserved No dependencies 100 Dependency deduplication. Webpack common chunks Webpack externals Nerdlet Nerdpack Platform application

Slide 101

Slide 101 text

©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', } };

Slide 102

Slide 102 text

©2008–18 New Relic, Inc. All rights reserved Layout composition. 102

Slide 103

Slide 103 text

©2008–18 New Relic, Inc. All rights reserved 103

Slide 104

Slide 104 text

©2008–18 New Relic, Inc. All rights reserved 104 Layout containers. ● Loader mechanism.

Slide 105

Slide 105 text

©2008–18 New Relic, Inc. All rights reserved 105 Layout containers. ● Loader mechanism. ● CSS namespacing.

Slide 106

Slide 106 text

©2008–18 New Relic, Inc. All rights reserved 106 CSS namespacing. .HelloWorld { background: #a1a1a1; }

Slide 107

Slide 107 text

©2008–18 New Relic, Inc. All rights reserved 107 CSS namespacing. .my-nerdpack .HelloWorld { background: #a1a1a1; }

Slide 108

Slide 108 text

©2008–18 New Relic, Inc. All rights reserved 108 Layout containers. ● Loader mechanism. ● CSS namespacing. ● Error boundaries.

Slide 109

Slide 109 text

©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 ; } return this.props.children; } }

Slide 110

Slide 110 text

©2008–18 New Relic, Inc. All rights reserved 110 Component error boundaries. class NerdletContainer extends Component { render() { return ( ); } }

Slide 111

Slide 111 text

©2008–18 New Relic, Inc. All rights reserved 111 Layout containers. ● Loader mechanism. ● CSS namespacing. ● Error boundaries. ● Basic logging / instrumentation.

Slide 112

Slide 112 text

©2008–18 New Relic, Inc. All rights reserved 112 https://one.newrelic.com/:nerdpackId/:nerdletId

Slide 113

Slide 113 text

©2008–18 New Relic, Inc. All rights reserved 113 https://one.newrelic.com/my-nerdpack/hello-world

Slide 114

Slide 114 text

©2008–18 New Relic, Inc. All rights reserved 114 { "sidebar": { "id": "my-nerdpack.sidebar" } } https://one.newrelic.com/my-nerdpack/hello-world ?state=IjQxRDIxMTk5LTMzMUItNjQyQy03ODk3LTg5NjVGM=

Slide 115

Slide 115 text

©2008–18 New Relic, Inc. All rights reserved The platform SDK. 115

Slide 116

Slide 116 text

©2008–18 New Relic, Inc. All rights reserved 116 The platform SDK. ● Configure platform features.

Slide 117

Slide 117 text

©2008–18 New Relic, Inc. All rights reserved 117 The platform SDK. ● Configure platform features. ● Navigation.

Slide 118

Slide 118 text

©2008–18 New Relic, Inc. All rights reserved 118 The platform SDK. ● Configure platform features. ● Navigation. ● Persist and receive URL state.

Slide 119

Slide 119 text

©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.

Slide 120

Slide 120 text

©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.

Slide 121

Slide 121 text

©2008–18 New Relic, Inc. All rights reserved Building experiences. 121

Slide 122

Slide 122 text

©2008–18 New Relic, Inc. All rights reserved 122 Nerdlet A

Slide 123

Slide 123 text

©2008–18 New Relic, Inc. All rights reserved 123 import { Button, navigation } from 'nr1';

Slide 124

Slide 124 text

©2008–18 New Relic, Inc. All rights reserved 124 import { Button, navigation } from 'nr1'; export default class MyNerdlet extends React.Component { render() { return Click me; } }

Slide 125

Slide 125 text

©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 Click me; } }

Slide 126

Slide 126 text

©2008–18 New Relic, Inc. All rights reserved 126 Nerdlet B

Slide 127

Slide 127 text

©2008–18 New Relic, Inc. All rights reserved 127 Cross communication. ● URL State.

Slide 128

Slide 128 text

©2008–18 New Relic, Inc. All rights reserved 128 Cross communication. ● URL State. ● Pub/Sub library.

Slide 129

Slide 129 text

©2008–18 New Relic, Inc. All rights reserved 129 Backend communication.

Slide 130

Slide 130 text

©2008–18 New Relic, Inc. All rights reserved 130 Micro frontend Microservice Microservice Microservice Micro frontend Micro frontend +

Slide 131

Slide 131 text

©2008–18 New Relic, Inc. All rights reserved 131 Third-party extensibility.

Slide 132

Slide 132 text

©2008–18 New Relic, Inc. All rights reserved 132 Third party extensibility. ● Open the CLI to the public.

Slide 133

Slide 133 text

©2008–18 New Relic, Inc. All rights reserved 133 Third party extensibility. ● Open the CLI to the public. ● Secure sandboxing.

Slide 134

Slide 134 text

©2008–18 New Relic, Inc. All rights reserved 134 Third party extensibility. ● Open the CLI to the public. ● Secure sandboxing. ● Limited SDK surface.

Slide 135

Slide 135 text

©2008–18 New Relic, Inc. All rights reserved Secure sandboxes. 135

Slide 136

Slide 136 text

©2008–18 New Relic, Inc. All rights reserved Secure sandboxes. 136 RPC Bridge (window.postMessage)

Slide 137

Slide 137 text

©2008–18 New Relic, Inc. All rights reserved 137

Slide 138

Slide 138 text

©2008–18 New Relic, Inc. All rights reserved _Our experience_ ©2008–18 New Relic, Inc. All rights reserved Photo by Startaê Team on Unsplash

Slide 139

Slide 139 text

©2008–18 New Relic, Inc. All rights reserved 139 Did we achieve our goals? ● Easier and faster feature development.

Slide 140

Slide 140 text

©2008–18 New Relic, Inc. All rights reserved 140 Did we achieve our goals? ● Easier and faster feature development. ● A more unified UI / UX.

Slide 141

Slide 141 text

©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.

Slide 142

Slide 142 text

©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.

Slide 143

Slide 143 text

©2008–18 New Relic, Inc. All rights reserved 143 How can we scale our UI development?

Slide 144

Slide 144 text

©2008–18 New Relic, Inc. All rights reserved 144 How can we scale our UI development? 1. Communication is still key.

Slide 145

Slide 145 text

©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.

Slide 146

Slide 146 text

©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.

Slide 147

Slide 147 text

Thank You ©2008–18 New Relic, Inc. All rights reserved @ErikGrijzen bit.ly/2MrSE81