This article was originally published at: github.com/bigo-fronte… Welcome to follow and reprint.

preface

Bigo computing platform front-end group of two products, the front-end framework is usedAmis, aBaidu open source low code front-end frameworkThe company has been introduced in several previous articlesAmis, its application scenarios, use methods, implementation and best practices in projects, etc. Here, I mainly want to borrowAmisTo express some of my feelings aboutLow Code front endThe idea of.

Conceptually

LCDP, to quote Wiki:

A low-code development platform (LCDP) provides a development environment used to create application software through a graphical user interface instead of traditional hand-coded computer programming.

To put it simply, a low code development platform is a way of developing software by providing a development environment that allows us to generate applications from a user interface rather than a handwritten computer program. There are already related products on the market, including outSystems, and there are also corresponding products in China, such as Yijiu and Microjiu.

The biggest vision of LCDP is that in the digital era of rapid product update, many roles can rapidly develop and launch applications, and quickly verify the feasibility of applications, without relying heavily on the technical team to complete them through long time iteration, and finally achieve a result of cost reduction and efficiency increase.

Of course, there are also many related discussions about LCDP on the Internet. Some people say that low code is “cancer of the industry” and completely negates the value of low code because it violates the “Horn clause”. It is also predicted that by 2025 most enterprise applications will have a low-code software development platform at some point. In short, controversies continue to spring up. So for us in the IT department, especially front-end development, how should we locate Low Code?

Low Code front end

Being is reasonable

If there is a corresponding product, is also applied, then the product must have its value. Now open source or not open source will more or less involve low code, Tencent IMWeb team also has low code products from “building block system” to “Vision” and “Hulk”, through continuous improvement of the platform, can support the C side and THE B side of fast delivery results (um, By accident, meituan also has a system called “Hulk”. It seems that everyone has the same name inspiration :grinning:). Open source products include Amis, X-Render and H5-Dooring, among others.

Because the project uses Amis, let’s look at it a little bit more in this familiar framework :blush:

How do non-front ends use Amis correctly

As we mentioned before, LCDP mainly enables other non-technical personnel to create applications by using the interface. I understand that LC front-end can also enable other non-front-end personnel to generate front-end pages, including interaction, API calls and so on. Amis provides visual editors to create pages, for a simple example :point_down:.

Suppose we have a requirement to create Filters for CRUD (CRUD is an important and most commonly used list component in Amis) :

Using the Amis visual editor you can create a page very quickly, even in less than a minute if you’re comfortable with the framework :v:, see the image below:

The resulting page will generate the desired page, and the Amis JSON code will also be generated on the left side of the editor, which can be applied directly to our front-end code:

So, is there any further understanding of the Low Code front end from the Amis example? So how is Amis’s low-code front-end framework implemented? How do they work? Let’s go further with Amis.

Amis implementation principle

Amis renders json into its React component. Find the corresponding Component using the JSON type, and pass the other properties as props to complete the rendering.

If we look at the source code, we will find such a file factory.ts. Of course, there are many other more rich codes, such as HOC to describe the context, which makes clear the uniqueness of each component name; For example, the logic of how to render, etc., the following part is one of the core codes in my opinion:

export function Renderer(config: RendererBasicConfig) { return function <T extends RendererComponent>(component: T): T { const renderer = registerRenderer({ ... config, component: component }); return renderer.component as T; }; }Copy the code

That’s right, just short :nine: lines of code, one of the code blocks THAT I think is very important, but of course if you want to see the implementation, head over here. This code tells the developer how a component is registered with Amis, so that subsequent Amis framework users can easily use these built-in components. Why does the documentation tell us that if we want to customize components, we can also use Renderer? For this reason, it handles the logic of how to register and exposes the method so that we can use it easily. The way to use this is to use the TS annotation, quoting a simple example from the official:

import * as React from 'react'; import {Renderer} from 'amis'; @Renderer({ test: /(^|\/)my\-renderer$/ }) class CustomRenderer extends React.Component { render() { const {tip} = this.props; Return <div> This is a custom component: {tip}</div>; }}Copy the code

Low Code front-end outlook

We used CLI tools to generate boilerplate code to reduce our development cost. In the case of shorter and shorter software delivery cycle, time is the most important chip for us to win competitiveness. So low code can help us to solve the problem of this part, at the same time the front-end developers can use their more professional technology to do more business value, more complicated things, rather than over and over again to implement those simple components, especially for the solution of the background, low code front-end is bound to have its a slice of the market, Maybe it’s just a Niche Market, but its value is still not negligible. Of course, for this kind of framework, we need to follow certain norms, there is a certain learning cost, but the cost is not great in general, for the long term is likely to be a good thing. What do you think? Welcome to discuss

No prize for correct

While reading the Amis source code, I came across an operator that I don’t use very often, blush, if you know what that means, write it down in the comments: ~ name.indexof (‘.’)?

References:

  • En.wikipedia.org/wiki/Low-co…
  • Baidu. Gitee. IO/amis/useful – CN /…
  • github.com/baidu/amis

Welcome everyone to leave a message to discuss, wish smooth work, happy life!

I’m bigO front. See you next time.