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:
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:
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:
Plugins can inject any feedback element on the page
<Pluggable /> Material as illustrated below. This will allow the plugins to render within
The final example application snippet is included below:
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.
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.