NETFLIX UPDATE

How do we create micro frontend with mesh? By Netflix Technology Blog September, 2021


Let’s take the example above – it renders and controls its own header and content regions to reveal specific functionality to users. After release, we get feedback that it would be nice if we could include information presented from other tools in this application. Using our new framework, Lattice, we are able to embed existing functionality from other applications.

A Lattice plugin host (which we’ll dive into later) lets us expand the existing application by mentioning two external plugins, Workflow and Spinker. In our example, we need to define two areas that can be extended – application content for portal components and configurable routing.

The sequence of events to complete the above rendering process will be guided by three components – our new framework network and two plugins:

Transmitting the cycle into the mesh

First, Lattice will load both plugins asynchronously.

Next, the structure will transmit events as they flow through the application.

In our example, the workflow will register its route and the spinner will add its overlay.

To complete the above scenario, the host application needs to include the lattice library and add a new one PluginHost Specifies external plugins with a configuration. This host requires information about specific applications and configurations that indicate which plugins to load:

Develop a responsive application with a fake plugin host

We have ridiculed this implementation in the example above a useFetchPluginConfiguration Hook for retrieving metadata from an external service. Owners can then dynamically add or remove plugins outside of application source code.

Plugin access to routing can be granted using hooks defined by the mesh structure. The usePluggableState Hook will restore the default application routes and pass them through the Lattice Framework. If no plugin responds AppRoutes Identifiers, they can choose their specific root injection:

Extend existing application state with lattice hooks

Plugins can inject any feedback element on the page<Pluggable /> Material as illustrated below. This will allow the plugins to render within AppContent Area:

Custom baby rendering with lattice plugable

The final example application snippet is included below:

Example application elements with fake integration

The mesh is a tiny structure that provides an abstract layer to leverage responsive web applications.

Using Lattice, developers can focus on their core product, and simply wrap areas of their application that can be customized by external plugins. Developers can extend the elements to use the external condition using lattice hooks.

Fake plugin module JavaScript function implemented by remote applications. These functions act as a “glue” between the host application and the remote component (s). The modules declare which elements should be exposed in their application and how they should be presented based on the information provided by the host.

A Mesh plugable material Allows a host application to express a mount point via a standard react component that plugins can manipulate or override with their own content.

Fake custom hooks Used to manipulate the state using a state reducer pattern. These hooks allow host applications to maintain their own initial state and modify accordingly, while allowing plugins to inject their own data.



Source link

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button