Wikipedia In computing, a plug-in (or plugin, add-in, addin, add-on, or addon) is a software component that adds a specific feature to an existing computer program.
Nowadays we can use as an example an app like VSCode, which is composed by a bunch of elements: alerts, panels, commands… that can be used by extensions.
Each extension makes use of an “sdk” library which is exposed by the host (VSCode Editor). With this library, the extension is able to register its own alerts, panels, commands…
In the following example we can see how the “Docker” extension makes use of this sdk to register a tree container and several trees.
One of the points to take into account is the startup time of the application since the plugins have to be loaded at startup.
This explains the performance difference between a VSCode instance with and without extensions.
Thanks to the advances with “Module Federation” in webpack 5, we are now able to decouple the rest of the plugins from the host application source code and load them dynamically.
This also allows us to:
The following example for simplicity does not use webpack5 with “Module Federation”, but it shows one approach for plug & extends on the fly an exsiting component.
Starting from a “QuickSearch” component which is composed of:
We need to be able to extend it easily to include other searches or even add actions as shortcut… Without altering the original code and without adding new dependencies.
In our case, we are going to add three groups: Cities, Departures, Arrivals. Each group has its own search logic and clicking on each element in it can derive in different actions.
Cities group uses a query via Rest API and when we click on a city we navigate to /cities/:id. While the Fligths group gets the result using websocket based communication.
You can see the working example here:
When importing each module, at the same time imports the SDK module and passes its own configuration to it.
In that case “FlightsModule” registers two search groups: Arrivals y Departures.
“QuickSearchService” is being used as a kind of bridge between “QuickSearchComponent” and each search logic.
In the last days in my team we were moving from a custom “dev ui” written in angular to storybook. During the process we faced several challenges that I would like to share with you here.
Series about micro front-ends in angular.