mobile enabled website development

2022.03.24

《Open Source Featured》is we shareGithub、Giteeand other high-quality projects in the open source community,including technology、Learn、Practical and various interesting content。This issue recommends a low-code front-end framework open sourced by Baidu——amis。


After more than ten years of development,Front-end development is getting more and more complex,Barriers are getting higher,to use the popular UI Component library,you must understand npm、webpack、react/vue,must be familiar with ES6 grammar,It is better to also know about state management,for example Redux,If you have no experience with functional programming,It's hard to just get started,And after getting started, you will find that it still has a huge ecology,The related libraries are 2347 indivual,Many functions are similar,High cost of selection。

(mobile enabled website development)However, the development of front-end technology will not stagnate,After learning these, you may find that everyone uses Hooks span、A packaging tool replaces Webpackspan。useamisAll page development can be completed with only simple configuration,you don't need to know React/Vue、Webpack,don't even need to know JavaScript,even without learning amis You can also guess the role of most of the configuration,For most common pages,The easiest way should be used to achieve,You don't even need to learn front-end frameworks and tools。

mobile enabled website development(mobile enabled website development)

amishighlights

  • No need to know the front end:Inside Baidu,most amis The user has never written a front-end page before,neither will JavaScript,But can make professional and complex background interface,This is all other frontends UI library can't do it;
  • Not affected by front-end technology updates:The oldest in Baidu amis page is 4 created years ago,still in use,And the year Angular/Vue/React Versions are now obsolete,popular at the time Gulp also been Webpack replaced,If these pages are not used amis,Maintenance costs will be high now;
  • enjoy amis escalating:amis Has been improving the details of the interactive experience,For example, the first row of the table is frozen、The drop-down box does not freeze under big data, etc.,previous JSON The configuration does not need to be modified at all;
  • amis Lots of built-in components,Rich text editor included、code editor、diff、Condition combination、Business components such as real-time logs,Most of the middle and background page development only needs to understand amis Will suffice;also through custom component to expand the component,Actually amis can be regarded as ordinary UI library to use。
mobile enabled website development

Low-code visual editor

(mobile enabled website development)amisThe positioning is a low-code front-end framework,So here we only introduce the low-code part,If you want to use pureJSONConfiguration to complete page development,Then please take a look at the documentation,Of course you can also use90%low code+10%Hybrid mode of code development,both improved efficiency,without losing flexibility。

Notice:

1.Currently amis-editor Not open source,but free to use(including commercial)

2.To use the editor, you must be familiar with React

1. use in the projectamis-editor

Install dependencies

npm i amis-editor

Instructions

import {Editor} from 'amis-editor';

render() {
  return (
    <Editor
      {...props}
    />
  )
}
(mobile enabled website development)Property description:

  • value: any value,amis ofjson configure。
  • onChange: (value: any) => void。 Triggered when the editor is modified。
  • preview?: boolean Whether it is in preview state。
  • autoFocus?: boolean Whether to automatically focus the first editable component。
  • plugins Plugin class collection


2. Add custom components

There are two ways to add a custom editor:

  • registerEditorPlugin Register a global plugin。
  • do not register,but calling <Editor> when passing plugins attribute incoming。

same effect,The point is how to write Plugin,Example:

(mobile enabled website development)import {BasePlugin} from 'amis-editor'; export class MyRendererPlugin extends BasePlugin { rendererName = 'my-renderer'; // Only support this for now,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 where tab shown below tags = ['customize', 'form item']; // icon icon = 'fa fa-user'; // used to generate preview images previewSchema = { type: 'my-renderer', target: 'demo' }; // Initial data when dragged into the component scaffold = { type: 'my-renderer', target: '233' }; // Right panel related panelTitle = 'custom component'; panelControls = [ { type: 'tabs', tabsMode: 'line', className: 'm-t-n-xs', contentClassName: 'no-border p-l-none p-r-none', tabs: [ { title: 'conventional', controls: [ { name: 'target', label: 'Target', type: 'text' } ] }, { title: 'Exterior', controls: [] } ] } ]; }

well defined plugin back,Can be enabled in two ways

// Way 1,Register default plugin,All editor instances are automatically instanced。
import {registerEditorPlugin} from 'amis-editor';

registerEditorPlugin(MyRendererPlugin);

// Way2,only enable certain editors
() => (
  <Editor plugins={[MyRendererPlugin]} />
)
(mobile enabled website development)The example is only a brief description,There are many more properties available,Specifically, see first npm inside the bag .d.ts document。


3. Editor effects

  • Web version
mobile enabled website development

  • mobile
mobile enabled website development

  • Drag and drop components
mobile enabled website development

  • View code
mobile enabled website development


From web to mobile,includeApp、applet etc.,amisPage requirements that can be met,But in some special cases,For example, some pages pursue personalized visual effects,amis does not apply,In fact, most of the front-end UI Component libraries are also not suitable,Only custom development。more aboutamisThe content can be read by yourself。


open source address:https://gitee.com/baidu/amis

返回列表
更多新闻资讯