×
Community Blog AMAP Front-end Technology Development Over the Last Five Years

AMAP Front-end Technology Development Over the Last Five Years

This article introduces how AMAP front-end technology developed with the rapid growth of the business and discusses the future development directions of the AMAP front-end.

Preface

With rapid business development from 2015 to 2020, the AMAP application front-end development team grew vigorously. Along the way, the front-end team transformed itself from a small team that mainly carried out development for short-term operational activities to a team that has over 100 members and covers the top five AMAP business lines and hundreds of modules. This article introduces how AMAP front-end technology developed with the rapid growth of the business, summarizes the deployment practices for dynamic technology, and discusses the future development directions of the AMAP front-end.

The development of AMAP front-end technology is divided into four stages:

  • In 2015, with surging demand for new user acquisition and a sharp increase in demand for activities, the application front-end made its debut on the AMAP technology stage.
  • From 2016 to 2017, the rapid development of business called for efficiency and consistency between the backend and front-end, opening up an opportunity for front-end development. Accordingly, we began to implement dynamic technology.
  • From 2017 to 2019, dynamic technology was fully implemented in AMAP. As a result, the role of front-end development became increasingly important, and the business scope continuously expanded.
  • From 2019 to the present, more attention has been paid to the stability and extensibility of support. This lays a foundation for greater competitiveness in the future.

In simple words, AMAP adapts itself to current conditions in order to achieve success.

1

2015: Debut

At the end of 2014, AMAP proposed a new strategy of focusing on user needs and the technical R&D of map navigation products and navigation products, without establishing any commercial goals for the next three years. Without the pressure to sell commercial products, AMAP focused solely on products and the user experience, and our technologies started to develop rapidly.

Promoting Engineering and Efficiency for Operational Activity Development

Based on a strategy of promoting user daily activity and retention, the development workload for operational activities increased. Generally, activities in this phase were short and fast. Therefore, the development period was short, and delivery and verification had to be completed within one week. After the end of the activity period, the products went offline, so no maintenance was required. As a result, the requirements for code maintainability and technical innovation were low. The goal was to quickly respond to hot events and complete activity development. This approach was very challenging for the front-end team, which had only a few members at the time because many operation activities had to be completed at the front-end. However, the front-end team did not have a great deal of technical knowledge and experience, and the work was extremely repetitive. Therefore, the top priority was to improve efficiency. This was done in the following ways:

  • Components: Standardize and construct components frequently used in activities together with operations personnel.
  • Templates: Use templates to build simple pages.
  • Processes: Use the CLI to speed up workflows.

A focus on basic capabilities allowed us to easily develop and launch services in a short period of time to respond to current events.

2

Increasing Performance and Building Experience During the October 1st National Travel Festival

On October 1, 2015, we launched our first large-scale operational activity, October 1st Buried Treasure, to coincide with the October 1st National Travel Festival. This was the prelude to our annual travel peak in October. By providing a simpler and more interesting interactive design, we enhanced the user gaming experience and promoted communication among users through social features, such as contests and rankings.

This activity was widely promoted inside and outside the company. Activities such as "Treasure Hunt Carnival" and "Buried Treasure Live Show with DouYu". At the time, live rooms were very popular, but we were extremely worried about problems such as lag and white screen crashes during live broadcasts. We were also afraid that "network-wide treasure hunts" might produce a wave of network-wide complaints. We were very lucky that our fears never came to pass.

Despite this, we realized that improving the performance and experience of complex games through technical means would surely become an important issue to be addressed in the future. Therefore, we improved our basic technical capabilities relevant to experience and performance, including audio and speech interaction solutions and best practices for large-scale game performance.

3

By the end of 2015, the overall front-end team had taken shape. The team began to establish a standardized and systematic way of thinking and accumulated a lot of technical resources. To cope with future challenges, the front-end team also recruited many skilled newcomers. This new talent helped us succeed in the subsequent stage of multi-business line operations.

2016-2017: Starting to Grow

As AMAP businesses were refined both horizontally and vertically, the personalized customizations required by scenic spots, hotels, banks, shops, and charging piles were gradually highlighted. Higher requirements were poses for the front-end display and rapid response. AMAP mainly faced the following pain points during this period:

  • Businesses required quick release and trial & error improvement.
  • R&D resources were increasingly unable to keep up with the rapid pace of business growth.

Opportunity: Emergence of AMAP Dynamic Technology

These problems were constantly making us think of ways to build an architecture that allows fast development and release as fast as HTML5 pages while maintaining a native experience. In fact, we began to implement dynamic technology as early as 2015. At that time, React Native already existed in the industry. However, the technical research carried out by the team indicated that React Native could not fully meet our business requirements, especially in terms of performance. Therefore, we decided to develop dynamic technology.

We had to overcome some difficulties at the beginning of the project:

  • Which layout should we select, RN Yoga, iOS absolute layout, or Android's RelativeLayout?
  • Where should be the runtime framework deployed? Should we use C++ or JS?
  • What modular mechanism should we use, Node Require or Webpack Require?
  • We also had to consider and decide on issues related to communication, animation, and many other fields.

After many fierce discussions within the team, we finally came up with the following core design ideas.

Core

Our core design idea was that the dynamic engine layer should be moved downward as far as possible, and both ends should be as thin as possible. The dynamic engine (C++) references Webkit and Node. This means native applications can be written in HTML, CSS, or JavaScript. In addition, interaction capabilities with native applications, such as file manipulation, can be used in the same way as Node.js. Such design provides greater flexibility when connecting to the front-end ecosystem and better performance when dealing with large pages with complex and frequent interactions.

Optimization

In addition to conventional animations, correlated animation is used to solve the issue of high-frequency liked animations. Correlated animation is not a playback dynamic effect. It is designed based on the observer mode. The property change of the observed item will affect the property change of the observer. This approach binds the association in advance and transmits it to the UI thread through the JS thread, so as to ensure sound interactive performance.

After this solution was clarified, the whole team also invested in capacity building. Although we struggled to find and solve problems every week, we still enjoyed the upgrade process. After getting the basic capabilities and auxiliary tools ready, we began to implement dynamic business practices, and finally chose the Point of Interest (POI) business. POIs include schools, hotels, restaurants, gas stations, and supermarkets. There are tens of millions of POIs on AMAP.

Full Steam Ahead: Deploying Dynamic Technology for POIs

4

Our POI business is characterized by the following features:

  • A complex UI with multiple categories and diverse presentation formats
  • Map interaction
  • High-performance requirements, long lists, and large amounts of data
  • Rich interaction, a large amount of gesture interaction, and animation correlation

Collaborative Development Issues

Given our tight project schedule, to quickly verify capabilities, the front-end team went all in for the project. Although the POI business had only one page, it involved multiple industries. Each industry had multiple modules, and each module required different presentation formats in different industries. Therefore, we had to find a solution to collaboration issues.

For this reason, we had developed a framework that used the JSX syntax to implement basic componentization. We also performed create, read, update, and delete (CURD) operation at the component level to solve the problem of modular development.

Debugging Issues

At the beginning of the project, we did not have a complete debugging method or even debugging capabilities. We simply printed logs on mobile terminals. This problem became a bottleneck during POI business development. The business scenario was complex and a large number of real-time logs could not be viewed, resulting in extremely low efficiency.

To solve this problem, we implemented the web SDK and mock and previewed and debugged POI pages in the browser.

Although we encountered various problems when implementing the POI business, the results were satisfying and the dynamic technology has withstood the test of a business scenario. The new POI business not only provided complete support to previous HTML5 functions but also provided a better interactive experience and improved performance in gesture animation and list display. As the business was launched, the first phase of infrastructure construction was completed. This phase was business-centric and mainly focused on the design of supporting capabilities and the basic development experience.

5

The successful implementation of the POI business also demonstrated the technical capabilities of the front-end team and showed that we could undertake more complex, important, and large-scale AMAP business scenarios. This success kicked off the heyday of the front-end team.

2017-2019: Boom Time

The successful implementation of the POI business demonstrated the stability of dynamic technology solutions, showing they could cope with a variety of complex businesses. Next, dynamic technology would be tested in a large number of businesses. With the more in-depth application of dynamic technology and full access by main business modules, the pressure to transform increased due to inadequate support capabilities and a lack of dynamic technology developers.

Team Growth: From Small Front-end to Big Front-end

Staff issues are generally solved through internal and external solutions. Externally, we worked to recruit more front-end engineers with relevant backgrounds. Internally, plans to strengthen technical training for native engineers and transfer them to dynamic technology development were officially put on the agenda.

Many engineers have this sort of experience. If you ask them to work on new technology, they become very happy and excited. An exploration into unknown fields and the desire for knowledge are the common drivers of research and development. However, a lot of doubts arise if they continue to develop this technology.

6

To address concerns about the uncertainty and future of technologies, many engineers began to turn to the dynamic technology during training. By the beginning of 2019, the entire dynamic "big front-end" team had grown rapidly.

Improved Infrastructure: Closed-loop R&D and Incremental Breakthroughs

7

  • We use integrated development environments (IDEs) to integrate development and debugging capabilities.
  • We perform operations, such as publishing, rollback, update, monitoring, and analysis on the engineering platform.

Business Growth: Coverage of AMAPS Core Businesses

Our powerful team and gradually improving infrastructure accelerated business development. Our businesses involved services covering where you are (main map, positioning), where you want to go (search, POI), and how to get there (planning, navigation), modes of transportation (by taxi), and what to do at your destination (scenic spots). Our dynamic technology was fully deployed in more than 60 modules of AMAP's top five business lines.

8

At this stage, the dynamic business was developing rapidly and the front-end team was constantly growing, evolving from a small front-end to a big front-end. The infrastructure construction was constantly improved with a focus on business. With a stable development environment, from 2017 to 2018, our code production increased from 30,000 to 600,000 lines, and our module production increased from 1 to over 60. We also saw a rapid increase in the number of developers. Businesses were released more frequently and rapidly, with our iteration speed increasing from a version per month to two versions per month.

2019 to the Present: The Longest Journey Begins with a Single Step

As our businesses are becoming increasingly complex, many details need to be further ironed out. For example, the need to better empower our business has again become a top issue. As Yubo, a senior front-end expert at Alibaba, says, "We are willing to wait for the flowers to bloom and take a longer-term approach. We need to be fast, but not hasty."

Over the past few years, the AMAP front-end team has always worked to grasp the business opportunities of the current moment. In terms of support, we have always carried out drastic and rapid construction and successfully built up things from scratch. Next, we need to improve the competitiveness of our services. Now that our basic capabilities are in place, we need to review our practices and refine our functional integrity and extensibility.

In the future, we will continue to complement our capabilities through refinement, standardization, and differentiation in terms of the R&D ecosystem, engineering mid-end, and intelligence. We will gradually complete our mid-end and intelligent infrastructure management to provide a comprehensive scenario-based development experience for IDEs.

Five Infrastructure Construction Guidelines

  • Refined: We must accurately address pain points and systematically solve problems.
  • Standardized: We must develop an Alibaba Group ecosystem and industry standards.
  • Differentiated: We must extend AMAP capabilities based on standards.
  • Intelligent: We must implement low code development, reuse materials, and enable automatic UI generation.
  • Mid-end: We must move universal capabilities from the front-end downward to mid-end, so they are no longer limited to AMAP.

Technical Blueprint

9

Key Directions to Pursue in the Near Future

  • We should continuously optimize toolchain stability and scalability.
  • We should move platform capabilities to the mid-end.
  • End-to-end monitoring: We should quickly analyze and locate problems.
  • Materials: We should shorten the path from development to resources and accumulate more basic capabilities.
  • Intelligence: We should achieve low code or even no-code development.

This article described the development of AMAP front-end technology over the past five years. We are still striving to improve and will work harder in the future to provide an even better travel experience.

0 0 0
Share on

amap_tech

15 posts | 1 followers

You may also like

Comments