takeaway

In the past period of time, the big front-end team of Amap App has been exploring the front-end low-code partnership technology, which has been implemented in multiple business scenarios on the client side, fully verifying the potential of partnership technology to support rapid business iteration.

In the practice of low code, we found that in addition to front-end visual drag and drop construction technology, Serverless, intelligent and other technologies are conducive to the business landing of low code. This article will introduce autonavi low code system architecture and some new technology application methods.

1. The background

Before we begin, let’s briefly introduce autonavi’s technical background.

Firstly, Amap client uses self-developed cross-end framework for front-end development. The framework realizes cross-platform development of native mobile applications based on JS engine, which is dynamic and high performance.

On the other hand, in the actual business development, the client’s lines of business are faced with increasingly heavy demand for recommency-type cards (or pages). Recommendation requirements are characterized by emphasis on presentation, light interaction and fast iteration. In particular, the speed of iteration is very strong, and many cards need to be fine-tuned to meet market and business needs. This puts forward new requirements for the dynamic capability of front-end technology, and also brings many problems:

In order to solve these problems, we hope to improve the dynamic capability of recommendation business and reduce the corresponding development cost through partnership technology.

2. Visual construction

A complete set of partner system, in fact, is to build + delivery. Construction is the cornerstone of the system. The essence of construction is to maintain a JSON FORMAT DSL Schema through visual operation, which can describe the products of construction based on a set of standard protocols.

In related fields, Ali Group has accumulated for many years, and its representative products include Aliyun Dingdingyi Matching system and Ant Yunfengdi system. The group also accumulated tools such as core building engine and low code building protocol. Our team also chose to build the building platform based on ali unified building engine.

For autonavi client self-development framework development environment, the team has developed module feeding, style simulator, setup customization, template management system, client building rendering engine and other modules.

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

In later practice, we found that it was critical to identify the end user group for building the system. If the system is developed for professional front-end, then the construction must be more efficient than professional development of handwritten code, which puts forward a high demand on the performance of the engine.

If operating system for products, and other professional front end, the system’s ease of use have to rise to the top, one should not let operating classmates study what is onClick, and should develop convenient can drag and drop components operating students only need to bind a casually data can see want all effects on structures, the canvas.

3. On the

It’s not hard to see that you can’t render the schema on the client side if you just build. A strong delivery system became a major requirement, and we began to focus on the construction of the full link capability from building this single dimension.

When not on the system, client requests are a standard front, middle and back end classic pattern for retrieving service data. For example, amap App sends a request to Autonavi Gateway, which is responsible for requesting the downstream huge data service, aggregating the request and returning the result.

The purpose of the system is to build the front-end products into the aggregation of service requests, the client in the request data at the same time in the request front-end template. The structure is as follows:

The architectural idea is API oriented, API as a dimension to distribute cards.

Responsible for building platform as an independent application. Bind the build artifact to a client API and save it to the service domain service. The service application is then responsible for registering the card +API with autonavi Gateway. When autonavi receives a request for an API, it checks to see if the API is registered with some build Schema bindings for the online service. If so, aggregate the build schema into the return result object in the existing data aggregation logic.

The advantages of this system are:

  • Autonavi gateway continues to control all intra-end traffic in API dimension.
  • Perfect match with the current Autonavi gateway architecture, low development cost, strong stability.

The problem with this system is:

  • Autonavi Gateway only covers the internal business of Autonavi client, but it does not support many H5 operation activities outside autonavi.

4. Application of Serverless technology in low code

While the system landed successfully and demonstrated rock-solid stability, we weren’t satisfied. 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 vision. One of the goals of Node.js Serverless is to solve the problem of choreography of heavy data logic, giving front-end business the opportunity to do business with the data. This is the ability of putting service that needs to be supplemented. If you can build and put through a unified FaaS function, you can connect with various data sources, and the requirements supported by the self-developed framework and H5 can also be met.

So, we decided to add a layer of FaaS functions to the full set of links, and from then on we named the Platform Amap Lowcode.

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

  • Automatic expansion and expansion ensures the stability of the front-end service in the eleventh peak flow;
  • Unattended operation and maintenance saves a lot of costs for the maintenance of functions. It is very convenient to release functions online, debug and monitor functions in one step.

The disadvantages of this architecture are:

  • The links are long and it is difficult to get started with service development

5. Application of intelligent technology in low code

With the large-scale access of services, we received a lot of feedback about the complexity of links and the difficulty of getting started. We’re also thinking about how technology can be used to provide an easy build experience. Intelligent technology has entered our field of vision. We cooperated deeply with Autonavi designer team and Ali Group intelligent team, and took the lead in implementing intelligent D2C capability on the building platform.

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

Once a developer receives a design draft, they can choose to jump to Lowcode to build the platform with one click. After entering the platform, the style layout is automatically generated, directly saving most of the time to restore the design draft. (All the building content in the following figure is automatically generated)

Then, after data arrangement, FaaS delivery and other links, we see the scene recommendation card after sliding on the first screen of AmAP.

We also developed a Schema to Code feature. If a front-end service is not able to apply the delivery link of the partnership, it can also choose to export the code with one click during the setup phase.

As a result, any front-end development can improve its 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 convenient experience for business side, we have also developed intelligent preview function and standard placement container.

Intelligent preview can intelligently select the preview context and environment according to the data source of the design draft, and help the business side preview the product effect in the actual page effect.

Standard placement containers allow businesses to automatically accept placement functions by entering a unique ID and a small amount of configuration information. Some businesses can complete client iteration without developing client code after access.

6. Summary

The Autonavi Lowcode platform has four major features: it has toC-oriented client features from day one; With the help of Serverless technology, Autonavi Lowcode platform has the dual stack capability feature that supports both self-developed framework and H5. In order to support the H5 construction of students in operation activities, a simple version construction process was developed in the construction process. The platform has the characteristics of catering to students in both professional research and operation activities. Finally, the functions of one-click D2C transformation of the design draft bring intelligent characteristics to the platform.

These features make the Autonavi Lowcode platform a leader in the industry. Finally, attached is a picture of the whole intelligent co-investment system:

I look forward to sharing my experience and thoughts on the low-code field with readers. If you are also passionate about low code technology, you are welcome to join our team. In business, our team is responsible for driving navigation and other core scenes of AMAP App, and has achieved technical achievements in multiple front-end directions. If you are interested, please send your resume to [email protected] with the subject line: Name – Technical Direction – from Autonavi.

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