This issue recommends a low-code front-end framework that is open source by Baidu——amis。

After more than ten years of development, front-end development has become more and more complex, the threshold is getting higher and higher, to use the popular UI component library, you must understand npm, webpack, react/vue, must be familiar with ES6 syntax, and it is best to understand state management, such as Redux, if you have not been exposed to functional programming, Light is very difficult to get started, and after getting started, you will find that it has a huge ecology, there are 2347 related libraries, many functions are similar, and the selection cost is high.

However, the development of front-end technology will not stop, and after learning this, you may find that everyone has replaced Webpack with Hooks and some packaging tool. You don’t need to know React/Vue, Webpack, or even JavaScript. Even if you haven’t studied amis, you can guess what most of the configurations will do. For most common pages, you should use the simplest way to implement them. You don’t even need to learn front-end frameworks and tools.

amis Highlights

• No front-end knowledge required: Inside Baidu, most amis users have never written a front-end page before and do not know JavaScript, but can create a professional and complex background interface, which is not possible with all other front-end UI libraries.
• Not affected by front-end technology updates: The oldest amis pages inside Baidu were created more than 4 years ago and are still in use today, while the Angular/Vue/React versions are now obsolete, and the popular Gulp has been replaced by Webpack. If these pages were not in amis, they would be expensive to maintain.
• Enjoy the continuous upgrading of amis: amis has been improving the interactive experience of details, such as freezing the first row of the table, no deadlock under the drop-down box big data, etc., the previous JSON configuration does not need to be modified;
• amis has a large number of built-in components, including rich text editor, code editor, diff, condition composition, real-time logging and other business components. Most of the background page development only needs to understand amis. You can also extend components by customizing them. In fact, amis can be used as a regular UI library.

Low code visual editor

amis is positioned as a low-code front-end framework, so we only cover the low-code part here. If you want to use pure JSON configuration to complete page development, then check out the documentation. Of course, you can also use a mixed pattern of 90% low code +10% code development to improve efficiency and flexibility.

attention：

1.amis-editor is not currently open source, but is free to use (including commercially).

2.You must be familiar with React to use the editor

1. Use amis-editor in your project

Installation dependency

npm i amis-editor

method of application

import {Editor} from 'amis-editor';

render() {
  return (
    <Editor
      {...props}
    />
  )
}

attribute specification

• value:any value, json configuration of amis.
• onChange: (value: any) => void。 Triggered when the editor is modified.
• preview?: boolean Whether it is in preview state.
• autoFocus?: boolean Whether to autofocus the first editable component.
• plugins Plug-in class set

2. Add custom components

There are two ways to add a custom editor:

• registerEditorPlugin Register global plug-ins.
• Not registered, but passed through the plugins property when calling <Editor>.

The effect is the same, the focus is still how to write a Plugin, example:

import {BasePlugin} from 'amis-editor';

export class  MyRendererPlugin extends BasePlugin {
  rendererName = 'my-renderer';

  // For the time being, only this is supported. After configuration, the code editor will be opened
  $schema = '/schemas/UnkownSchema.json'; 

  // Used to configure the name and description
  name = 'Custom renderer';
  description = 'This is just an example';

  // tag，Decide which tab to display under
  tags = ['custom', 'form item'];

  //icon
  icon = 'fa fa-user';

  // Used to generate preview images
  previewSchema = {
    type: 'my-renderer',
    target: 'demo'
  };

  // The initial data when dragged into the component
  scaffold = {
    type: 'my-renderer',
    target: '233'
  };

  // Right panel correlation
  panelTitle = 'custom component';
  panelControls = [
    {
      type: 'tabs',
      tabsMode: 'line',
      className: 'm-t-n-xs',
      contentClassName: 'no-border p-l-none p-r-none',
      tabs: [
          {
              title: 'convention',
              controls: [
                  {
                      name: 'target',
                      label: 'Target',
                      type: 'text'
                  }
              ]
          },

          {
              title: 'appearance',
              controls: []
          }
      ]
    }
  ];
}

Once the plugin is defined, you can enable it in two ways

// In method 1, the default plug-in is registered and all editor instances are automatically instantiated.
import {registerEditorPlugin} from 'amis-editor';

registerEditorPlugin(MyRendererPlugin);

// In method 2, only certain editors are enabled
() => (
  <Editor plugins={[MyRendererPlugin]} />
)

The example only makes a simple explanation, and there are many available attributes, specifically, look at the.d.ts file in the npm package first.

3. Editor effect

• web version

• mobile terminal

• Drag assembly

• View code

From web pages to mobile terminals, including apps and applets, amis can meet page needs. However, in some special scenarios, such as some pages pursuing personalized visual effects, amis is not suitable. In fact, most front-end UI component libraries are not suitable, and can only be customized development. You can read more about amis on your own.