High German client low-code system architecture practice

​Guide reading

For some time in the past, the front-end team of front-end low-code investment technology 160a761876a3ee. It has been implemented in multiple business scenarios on the client, fully verifying the potential of tiered investment technology to support rapid business iteration .

In the practice of low-code, we found that in addition to the front-end visual drag-and-drop construction technology, serverless, intelligent and other technologies are all helpful to the implementation of low-code businesses. This article will introduce the high-tech low-code system architecture and the application methods of some new technologies.

1. Background

Before we start, let's briefly introduce the technical background of AutoNavi's take-off.

First of all, the AutoNavi Map client uses a self-developed cross-terminal framework for front-end development. The framework is based on a JS engine to achieve cross-platform development of mobile native applications, which is dynamic and high-performance.

On the other hand, in actual business development, client business lines are facing increasingly heavier requirements for recommendation cards (or pages). Recommended requirements are characterized by emphasis on display, light on interaction, and rapid iteration. Especially the iteration speed requirements are very strong, and many cards need to be fine-tuned continuously to adapt to market and business needs. This puts forward new requirements for the dynamic capabilities of front-end technology, and also brings many problems:

In order to solve these problems, we hope to improve the dynamic capabilities of recommendation services and reduce the corresponding development costs through the use of tie-in investment technology.

2. Visual construction

The whole set of investment system is actually building + launching. The construction is the cornerstone of the system. The essence of the construction is to maintain a DSL schema in JSON format through visual operation. The schema is based on a set of standard protocols to describe the product of the construction.

In related fields, Alibaba Group has accumulated for many years, and its representative products include Alibaba Cloud DingTalk's Yida system and Ant's Yunfengdie system. The group has also deposited the core construction engine, low-code construction agreement and other tools, and our team also chose to build the platform based on Ali's unified construction engine.

For the self-developed framework development environment of AutoNavi Client, the team developed modules such as component feeding, style simulator, setter customization, template management system, and client building rendering engine.

In the first phase of construction, we chose to build the platform for professional developers, so the construction process is very similar to the front-end development process. The front end can modify the style of the elements on the construction canvas, bind events, and even manually write the page life cycle.

In the later practice, we found that it is very important to clearly establish the final user group of the system. If the system is oriented to professional front-end development, then the construction must be more efficient than professionally developed handwritten code, which places high requirements on the performance of the engine.

If the system is geared towards product operations and other non-professional front-ends, then the ease of use of the system must be improved to the first place. An operation student should not be asked to study what onClick is, but a convenient drag-and-drop component should be developed first so that the operation student only needs to do it casually By binding a piece of data, you can see all the effects you want on the construction canvas.

3. Put

It is not difficult to see that if you only build, you cannot render and build the schema on the client side. A powerful delivery system has become a major demand that follows, and we have also begun to increase the focus from building a single dimension to building full link capabilities.

When there is no delivery system, the client request is a standard front-end, middle-end and back-end classic mode, and the purpose is to obtain service data. For example, the AutoNavi Map App sends a request to the AutoNavi gateway, and the gateway is responsible for requesting a huge downstream data service, aggregating the request data and returning the result.

The purpose of the delivery system is to aggregate the products built by the front-end into service requests. The client requests the front-end template while requesting data. The structure is as follows:

The architectural idea is to be API-oriented and distribute cards in the dimension of API.

The building platform is responsible for building as an independent application. Bind the build product with a client API and save it to the service domain service. The service application is then responsible for registering the card + API to the AutoNavi gateway. After the AutoNavi Gateway receives an API request, it will check whether the API is registered in the online service and is bound to some built-up schema. If it is, in the existing data aggregation logic, aggregate the structured schema into the returned result object.

The advantages of this system are:

• AutoNavi Gateway continues to control all internal traffic with the API dimension;
• It perfectly matches the current AutoNavi gateway architecture, with low development cost and strong stability.

The problems with this system are:

• AutoNavi Gateway only covers services within AutoNavi client, and does not support numerous H5 operations outside AutoNavi.

Technology in Low Code 160a761876a839

Although the system successfully landed and demonstrated rock-solid stability, we are not satisfied with it. In order to support richer business scenarios, we decided to optimize and upgrade the system architecture.

At that time, Node.js Serverless technology gradually entered our field of vision. One of the goals of Node.js Serverless is to solve the data-heavy logic orchestration problem, so that the front-end business has the opportunity to process the data. This is exactly the ability that the delivery service needs to be supplemented urgently. If a unified FaaS function can be used to build the delivery, it can be connected to various data sources, and the needs of the self-developed framework and H5 support at the same time can also be met.

Therefore, we decided to add a layer of FaaS function to the full set of links, and since then we have named the Amap Lowcode platform for AutoNavi.

Through a layer of FaaS function, the delivery can not only become the downstream service of the original link, but also can directly provide the front-end page for H5 operation activities. In the application of serverless technology, we have summarized two major benefits:

• Automatic expansion and expansion guarantees the stability of the front-end service at the peak traffic of November;
• Unattended operation and maintenance saves a lot of cost for the maintenance of the function, and the function release and online debugging and monitoring are in place in one step, which is very convenient.

The disadvantages of this architecture are:

• Long links make it difficult to get started with business research and development

5. Application of intelligent technology in low code

With the large-scale access of services, we have received a lot of feedback about the complexity of the link and the difficulty of getting started. We are also thinking about how to provide a convenient construction experience through technical means. Intelligent technology has thus entered our field of vision. We have in-depth cooperation with AutoNavi's designer team and Alibaba Group's intelligent team, and are the first to build a platform with intelligent D2C capabilities.

The specific operation steps are mainly divided into two parts. In the design draft stage, the designer can intelligently mark the component names of the designed block with the aid of the design plug-in, and generate a digital design draft that integrates relevant data.

After the developers get the design draft, they can choose to jump to the Lowcode build platform with one click. After entering the platform, the style layout is automatically generated, which directly saves most of the design draft restoration time. (The construction content in the figure below is all automatically generated)

Then, after data arrangement, FaaS launch and other links, it is the scene recommendation card we saw after sliding on the first screen of AutoNavi Map.

In addition, we have also developed the schema to code function. If a front-end business is not yet able to use the delivery link of the project, you can also choose to export the code with one click during the construction phase.

As a result, any front-end R&D can improve its own development efficiency through intelligence.

The addition of intelligent technology directly opens the door to imagination for low-code platforms. In line with the principle of providing a convenient experience for the business side, we have also successively expanded the smart preview function and standard placement container .

The intelligent preview can intelligently select the preview context and environment according to the data source of the design draft, helping the business party to preview the effect of the build product in the actual page effect.

The standard placement container allows the business party to automatically take over the placement function after only entering a unique id and a small amount of configuration information. After some services are connected, the client can be iterated without the need to develop the client code.

6. Summary

The AutoNavi Lowcode platform has four major features: From the first day, it has the characteristics of toC clients; with the help of Serverless technology, the AutoNavi Lowcode platform has the ability to support both the self-developed framework and the H5 dual technology stack. Features: In order to support the H5 construction of operation activities students, a simplified version of the construction process was developed during the construction process. The platform has features for both professional R&D and operation activities students; finally, functions such as one-click conversion of design drafts to D2C bring intelligence to the platform Characteristics.

The above features enable AutoNavi's Lowcode platform to be at the leading level in the industry. Finally, a large picture of the complete set of intelligent investment system is attached:

I look forward to sharing relevant experiences and thoughts in the low-code field with readers. If you are also passionate about low-code technology, you are welcome to join our team and move forward together. Our team is responsible for driving and navigation and other core scenes of AutoNavi Map App. Technically, we have achieved results in multiple front-end directions. Interested students please send your resume to [e-mail] with the subject of the email: Name-Technical Direction-from Gaode Technology.

We are still on the road, and we will work harder in the future to make travel better.