bPanel is built entirely around plugins. All visual elements can be extended or overridden via the plugin system including the header, footer, sidebar, and main panel/view element. This is done by leveraging the composable nature of React as well as the 3 principles of redux (single source of truth, read only state, and functional reducers (read more about how below)). Even if you're unfamiliar with either React or Redux, bPanel makes it easy to hook into the underlying architecture and interact with the blockchain API layer on the backend.
Nearly everything you see here is a plugin
This plugin system was heavily influenced by the amazing work done on the Hyper.is JS terminal emulator by the team at Zeit.co. If you're familiar with their plugin system then you should be able to pick up the bPanel API pretty easily!
We wanted to make bPanel as extensible as possible. Rather than try and solve all problems with a single tool, our goal was to enable developers to create many tools to solve problems for any use case. Whether you wanted to have a footer widget that shows the progress of your node sync or the most recently generated address for a wallet, you can build that plugin for your specific instance of bPanel.
The bPanel plugin system also allows you to bundle a group of plugins together, creating a theme. By building out themes in this way, a user of bPanel can put together a bespoke version of bPanel, utilizing a range of plugins from other developers, that suites their specific needs- from wallet interfaces to transaction management to block explorers or even advanced scripting.
In order to hook into bPanel, plugins should expose at least one of the API extensions. These extensions tell bPanel how you would like your plugin to decorate or extend the app. This works either by decorating React Components (using the power of Higher Order Components), extending the reducer, or adding middleware to respond to actions. You can even interact with the web sockets API of your bcoin backend via redux, using bsock-middleware (read more here).
A Plugin Ecosystem
The last important part of the design philosophy behind the plugin architecture is the ability to
easily enable an open ecosystem of plugins. Based on the system built into Hyper.is,
bPanel allows you to simply
npm install --save a plugin into your local bPanel's
then add it to your app's config file. You can also use
localPlugins to develop or install plugins
locally. The idea is that with just a few
npm installs, it will be that easy to compose your
perfect blockchain interface (and eventually we hope to have a GUI to even simplify that).