Front end, why not try “plug-in” development

Front-end componentized development

• Products need to be customized and deployed in different places
• Most of the products have the same or similar functions
• Later maintenance is required

How do I address code reuse, rapid development

There are some common characteristics between “mature functional products” and “partially functional ambiguous products for enterprises or organizations.”

• Most of the logic functions are the same, and they may be used in many systems
• These features need to be maintained. It is impossible to maintain one feature and change it on N systems
• Modification of a part of the function will not affect other functions, can be online at any time, the cost of full station regression is too high.

My overall approach is incremental encapsulation into visual development

1. Build an internal UI component library (small encapsulation granularity)
2. Build business component library based on UI component library (general encapsulation granularity, with some functional logic)
3. Build plug-in library based on UI component library and business component library (large encapsulation granularity, including complete business logic)
4. * Generate page code based on template compilation for plug-in development
5. * Platform-based visual configuration + low code development platform for template compilation

What is plug-in development

Use kernel + application software development ideas, first there is the core of a plug-in scheduling, with the support of the core can be developed to support the core of the application, I call these applications “plugins”, plug-in is a complete with logical application, it is not dependent on any other plugin, you just need to rely on the core in the system run independently.

What the core contains

• Plug-in scheduling
• Base Component (reference self-built or third party)
• Basic services
• The HTTP service
• Data format conversion
• Time conversion, etc.
• Event bus
• other
• Automatic loading of plug-in files (asynchronous)

Plug-in system core, as the environment dependence of plug-in, provides basic services, plug-in scheduling, events and other basic functions for plug-in. Calls between plug-ins can be passed through the plug-in core and are decoupled without affecting the logic inside the plug-in. The basic components and business components provided by the plug-in core come from external dependencies, so the plug-in core is a relatively simplified core, which can extend the functions of the plug-in core through external dependencies.

The core of the plug-in HAS been published to NPM and can be installed directly from NPM.

Plugin system NPM link

Plug-in development DEMO

I also made a DEMO for plug-in development, if you are interested, you can try it out.

Each plug-in is called asynchronously.

How to use

Only React DEMO has been released at present, and Vue DEMO will be developed in the future

Step 1: Install the plug-in core in the project

npm i react-plugin-systemCopy the code

Step 2: Add the plugin alias in webpack.config.js and specify the plugin directory

// webpack.config.js
{    alias: {        "@plugins": path.resolve("./src/plugins"),}}Copy the code

Step 3: Register the plug-in in the entry file

// src/index.jsimport { register } from "react-plugin-system";
let pages = require.context("@plugins".true, /\/.*config\.js$/);
pages.keys().map(key= > { 
  let config = pages(key).default;  
  // reigster plugins  
  register(config); 
  return config;
});
Copy the code

Step 4: write a plug-in, plug-in contains configuration file and code file, the configuration file is used to specify the unique ID of the plug-in and define the plug-in entry file, the core can find the specific location of the plug-in through the configuration file. Plug-in code files are used to write plug-in specific business.

// src/plugins/add/config.js
export default { 
   id: "add".index: "add/index.js"
};Copy the code

// scr/plugins/add/index.js
import { message } from "antd";
export default function(config = {}) {
  const { calllBack = (a)= > {} } = config;
  message.success("Add success!");
  calllBack();
}Copy the code

Step 5: Use plug-ins

// src/pages/*/*.jsx
import React from "react";
import { callPlugin, Plugin } from "react-plugin-system";
export defalut class ButtonBox extends React.Component {
    constructor(props) {        
        super(props);        
        this.state = {};
    }
    /** * add */    
    addHandle = async() = > {// callPlugin        
        const path = (callPlugin('add'));        
        const plugin = await import("@plugins/" + path);        
        (plugin.default)({ a: 1 });    
    } 
    /** * infoClose */
    infoCloseHandel = (data) = > {
        console.log(data)    
    }
    render() {
        const path = (callPlugin('info'));
        return <div>
            <Button icon="plus" onClick={this.addHandle}>ADD</Button>            
            <Plugin importComponent={()= > { return import("@plugins/" + path) }} onClose={this.infoCloseHandel} />
        </div>}}Copy the code

There are two ways to call components and functions.

In the late planning

Open source is still in its infancy. In terms of framework, VUE will be supported later; In terms of community, a plug-in market will be set up to publish the developed plug-ins to the platform, and plug-ins can be searched and previewed on the platform. In terms of tools, a CLI will be developed, which can quickly initialize a standard plug-in development environment, quickly convert ordinary code into plug-ins, and quickly install plug-ins released by the platform. Further, a visual platform based on EJS compilation will be developed, which can be configured online through the visual platform, and a low-code development platform based on plug-ins can be developed again.

This project is purely a personal hobby, I hope interested students can give their opinions or participate in the improvement of the project, if you think the project is interesting, welcome to my star.