This section gives a brief overview of poi's architecture. It might be helpful for you to grasp the idea, but you don't actually need to know all of them to develop a plugin.
poi is built upon
Electron.js could be consider as a fusion of
Chromium browser and
Node.js. It enables rapid User Interface development like web applications, as well as natively talking with
React.js serves as poi's MVVM(Model View ViewModel) framework. It provides pleasant way to write data driven web interface.
Blurprint.js is a UI component library for
React.js. It helps in building poi's user interface.
Besides, poi also benefits from many
Node.js and browser libraries.
To summerize, following topics are relevant in plugin development. and again, they are not all required in building your plugin. Here's a learning resource list that could be of help.
- HTML, CSS
- Node.js as well as npm
- Redux as well as React-Redux
Node.js module, and finally form a
npm package. poi bundles its own
npm executable for downloading, installing and removing plugins.
To make a plugin valid npm package, a
package.json under plugin root directory is necessary. The entry file is specified in
main field, nad if not provided, poi will try possible common entry file names, e.g.
package.json file, then load plugin package to discover predefined variables. According to the information of the plugin, poi launches corresponding tasks to make plugin work.
A typical folder structure of poi plugin could be:
poi-plugin-foo-bar ├── assets │ └── // images, stylesheets, etc ├── i18n │ └── // i18n translation files ├── index.es // main entry point ├── lib │ └── // 3rd party lib ├── LICENSE.md ├── package.json // npm package meta data file ├── README.md ├── redux │ └── // redux related, e.g. reducers, actions, selectors, └── views └── // your react components
In brief, building a plugin is to:
- prepare variables to export in entry file
- form a valid npm package
- publish the package so that it could be publicly accessed