XRender – Open source road

XRender is an open source product hatched from inside Ali Flying Pig, currently has 4.2K star on GitHub; This article will not dwell on the use of XRender; Our goal is to let more people know how XRender has changed over the course of the year, and to make XRender available to more front-end developers.

Github:github.com/alibaba/x-r… Official documentation: X-render.gize. IO /

One, foreword

1. What is XRender

XRender is a lightweight, easy-to-use, and easy-to-use mid-background “forms/tables/charts” solution based on the React.js framework. It has been serving alifeizu for 3 years now, and will continue to serve XRender users in the future.

2. Why is XRender needed

For middle and background services, forms and tables can cover 90% of the business scenarios, and most of the forms and table scenarios are highly repetitive. Developers don’t have to spend their time on forms, cutting diagrams of tables, so enhancement tools like XRender are essential.

Second, XRender’s self-innovation

FormRender became the first member of the XRender family three years ago when it was incubated by Alifepig and officially opened source on GitHub as a form solution.

In the face of increasingly complex business scenarios, FormRender 0.x’s old technical solutions were challenged, and it was decided internally to upgrade FormRender and add more Render solutions to improve the performance of internal front-end developers.

Now XRender in addition to FormRender, also has “FRGenetator, TableRender, ChartRender” four common component rendering schemes, these four schemes together called XRender.

1.”FormRender”- Protocol-driven forms solutions

Without further ado, let’s start with the code

import * as React from 'react';
import { Button, PageHeader } from 'antd';
import FormRender, { useForm } from 'form-render';

const schema = {
  type: 'object'.properties: {
    input: {
      title: 'Simple input field'.type: 'string'.placeholder: 'nickname'.required: true,},textarea: {
      title: 'Simple Text Edit box'.type: 'string'.format: 'textarea',},color: {
      title: 'Color selection'.type: 'string'.format: 'color',},image: {
      title: 'Picture show'.type: 'string'.format: 'image',},uploader: {
      title: 'Upload file'.type: 'string'.format: 'upload'.props: {
        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',},},},};export default function Form() {
  const form = useForm();

  const onFinish = (formData: any, errors: any) = > {
    console.log('formData:', formData, 'Check Information :', errors);
  };

  return (
    <PageHeader
      ghost={false}
      onBack={()= >History. go(-1)} subTitle=" extra={[<Button key="1" type="primary" onClick={form.submit}>submit</Button>,]} ><FormRender form={form} schema={schema} onFinish={onFinish} />
    </PageHeader>
  );
}
Copy the code

The renderings

As shown above, the core of FormRender remains the same: “protocol-driven rendering”.

Code refactoring for the future

FormRender 1.x is a very thorough refactoring of its kernel, embracing React Hooks and Antd Design 4.x, and adding Typescript type definitions that are much simpler to write than FormRender 0.x.

The life cycle

BeforeFinish and onFinish are added for developers to “verify form before submission” and “submit form data”. New onMount method, like React componentDidMount;

State the built-in

Add a userForm method that returns a form instance, and all operations on the form depend on the methods provided by the form instance. For example, after receiving data asynchronously, you can use form.setSchemaByPath to dynamically modify the schema in the drop-down box.

Data to monitor

New watch variable, used to call back data listener, syntax similar to Vue watch.

The built-in components are richer

Added built-in support for components such as Rate and treeSelect; We added the format attribute to the JSON Schema to describe the format of the input field, and the auxiliary type to determine which component to use for rendering and to validate the form data.

Better support for custom components

Custom components make FormRender very extensible, so when FormRender doesn’t have built-in components for your needs, consider writing a custom component.

2.”Form designer”- In the background form visual construction generation tool

Drag-and-drop, buildable form designer

FormRender liberates the efficiency of front-end development in writing forms, while FormRender’s “form Designer” brings the ability to construct, drag and drop forms, and export corresponding schemas.

3.”TableRender”- Table solutions

advantage

TableRender is a new member of XRender. It is a FormRender based “table solution” with built-in search, reset and paging functions. Developers only need to provide “Schema, columns” to quickly develop a query table that can interact with the server. The search filter capability is provided by FormRender, which quickly generates the upper search panel at minimal cost.

Seamless usage

TableRender is just like Antd Table, but we extend the column property of Antd Table to provide enum, Ellipsis, valueType and other features, which can quickly format Table data, for example: Time formatting, text ellipsis display, ToolTips, enum enumeration definitions, and more.

Get TableRender Context

We provide useTable to get the entire TableRender React Context, which returns methods for developers to customize.

4.”ChartRender”- Chart solutions

ChartRender is a charting solution based on @ant-Design/Charts and is often used for quick chart page generation. You can quickly generate a chart with a small amount of code.

True out of the box

Just need to care about your data, pass in meta, data to generate graphs.

Development experience comfort

Developed in TypeScript, complete type definition files are provided.

Seamless usage

Charts are provided using Ant Design Charts and custom styles support parameter passthrough.

Three, suitable for the scene

Middle and back office business development

XRender has fully covered the middle and background business of Feizhu. In addition, students of BU such as Ali Cloud, Autonavi, Taobao and Ant are using it in depth.

Put in and build platform for C-terminal

If your team is building a platform for operations, we highly recommend that you use XRender to build the following excellent case for community students:

Who is using

More visible usage scenarios, if XRender helps you, feel free to add or submit PR in the comments section.

4. Future planning

Built-in components such as List and Array can be customized

FormRender’s built-in List and Array nested components have a single style and do not support customization at the moment. You need to open the customization port to meet different business requirements.

XRender 2.0

XRender 1.x has been running steadily for a year or so. In order to support more component libraries and mobile engines, the underlying code needs to be removed and reconfigured. The specific actions are roughly: remove form-render-core, implement plugin mechanism, and mobile render engine.

Embrace mobile

XRender has served PC side business for 3 years. During this period, the demand for XRender on mobile side has never stopped, no matter in the community or inside. After serious discussion and planning at XRender’s developer weekly conference recently, it was decided that XRender 2.0 will be ready for Mobile by mid-2022: Rax, Ant Design Mobile V5.

Five, the end

To thank the XRender developers, we made a video to honor the community! xrender.mp4

1. If you want to try using XRender in your projects to improve your daily development efficiency, you can get started quickly by visiting our documentation site;

2. If you want to browse the source code or submit an Issue, you can go to our GitHub repository;