Hello, I’m 🌲 Tree sauce. Today, I will talk about some intersection between me and Json Schema. By the way, I will reorganize the concept of today’s protagonist and some main application scenarios

1. What is JSON Schema

Believe that front-end children shoes, should be very familiar with JSON. JSON (short for JavaScript Object Notation). JSON is a data format that provides concise, readable, and extensive Notation. JSON gives you the flexibility to represent arbitrarily complex data structures.

For example, if we want to describe a person’s information, we can use JSON to describe it

What the hell is JSON Schema? 🤔

JSON Schema is mainly used to describe JSON data. We can see the different key-value values in JSON, including string and date. For different application scenarios, we want to agree on the fields, field value types and even dependencies that JSON data contains, so we need to have a specification that describes the relationships between these constraints. And that’s why JSON Schema exists

The following figure shows a JSON Schema that describes JSON data. We can clearly see that the JSON Schema itself is written in JSON, in other words, it is a JSON file itself!

The JSON Schema core defines the following data types. The JSON data type is specified by type

Ah Le: What can I do with JSON Schema?

As you can see from the JSON Schema example above, it is obvious that the definition of data type can be used for data validation

With the demo above, we use this online verification tool to demonstrate a wave of 👇

Above, JSON displays an invalid message. Why? This is because the birthday field I defined on the left needs to be in date format, and the field values in the JSON data we defined on the right are not in date format, so the verification is abnormal

Add another 🌰 : the front and back end of the data interface agreement, such as the back end of the interface output, directly use JSON Schema to do acceptance of the interface.

In addition to defining types and verifying field types, JSON Schema supports the following features

  • Determine whether the field is required
  • Regular expression verification is supported
  • Support the enumeration
  • Number of fields, maximum and minimum value constraints, etc

JSON Shema is essentially a structured JSON definition

More detailed definitions of different data types are not covered here. Those who are interested in children’s shoes are recommended to see the recommendation below

Read more:

  • Apifox – JSON Schema introduction

  • JSON Schema Specification (Chinese version)

2. Application scenarios of JSON Schema

The advantage of JSON Schema is that data types can be described and understood easily. At the same time, it also allows the machine to “understand”, such as data verification or input detection prompts, automatic testing, etc. Let’s talk about the implementation of JSON Schema in the following several front-end application scenarios

2.1 Form data verification

There are a lot of forms in background applications that require validation. What validator libraries do you have? You can use the classic open source tool AJV, which is a very popular JSON Schema validation tool and boasts the best performance

The diagram above shows the specific use of Ajv. We need to declare a data schema and define rules (essentially JSON Shema). Then we use this schema to verify that the data entered by the user conforms to our constraints

There are many other Validator tools, including async-Validator, which is commonly used in open source component libraries.

  • These Node open source tools are worth having – data validation tools

  • Front-end form data stuff

2.2 Interface data Verification

After the back-end interface is designed, the front-end needs to conduct joint adjustment according to the interface design. Generally, interface documents constrain and define the types of returned fields in the interface.

With the recent use of Apifox for interface debugging, let’s talk about the principles behind this tool

First we can create a Pet entity in the data model module, and then we can define the Pet related fields. We can define the field type (which is essentially JSON Schema based for data validation), and we can even define the expected Mock return data form 👇 based on the defined field type

Then back to the interface debugging page, we are querying Pet details in this interface data binding our preset entity Pet👇

Finally, we run the interface and find that Apifox verifies the data response returned by the interface

The tool described above is essentially a validation of the data returned by the interface based on JSON Schema

The Apifox tool also allows you to select Mock types based on the type of field definition. And in addition to having ready-made mock rules, you can also set mock rules manually (mock.js)

2.3 Low-code Low-code

There are many open source projects based on THE JSON Schema community, such as dynamic forms, visual construction pages or large data screens.

Here I recommend a visual H5 building platform Dooring 👇

In essence, visual construction mainly includes the following aspects 👇

  • Area on the right: customized setting for materials (controls)
  • Middle area: layer engine rendering on the page
  • Left area: Material (control) select drag area

So what role does JSON-schema play in visual scaffolding?

There are two main points you can understand:

  • The configuration page generates the JSON Schema

  • View page consumption parses the JSON Schema and renders the view

Components of H5-Dooring are dynamically loaded. They are loaded on demand. Components that are not needed are not loaded. The underlying technology is to encapsulate a component dynamic loader on the basis of UMI dynamic scheme, as shown in the following figure. It’s also essentially a combination of JSON Schema

Students who are interested in visual construction can read the big screen of developing visual data from 0 to 1 written by Shu Jiang Jun earlier 📺

Other open source low-code projects for reference

  • Baidu – amis
  • vue-layout
  • Alibaba – Formily
  • Alibabalist
  • Ruban H5

3 the last

If you’ve done anything else with JSON Schema, you’re welcome to leave a comment in the comments section at 👏