1. The background

Meituan taxi service has provided service entrance in Meituan App and Review App for a long time, and has adopted the mixed development technology of H5 and Native in technology. With the launch of the business, some users reported some problems in the performance of our map. The reason is that our taxi map uses the Web version of map (through Tencent Map JavaScript API), while similar products in the industry use the Native version of map SDK. Native map has natural performance advantages compared with Web map. Therefore, there is a certain gap between meituan taxi map loading from the first screen to the subsequent map operation experience.

Problems and Challenges

In order to improve the map experience of taxi-hailing business, we come up with a plan to use Native map in the display part of the map, instead of H5 page in the non-map part. In this way, the map performance gap with rival products can be equalled, and the development efficiency of H5 can be fully brought into play. At first glance, this solution seems like traditional Hybrid development, with no difficulty or novelty. For example, the map is realized by the map SDK pre-built in THE App, and the interaction between H5 and Native uses the mature JSBridge technology in the industry. A taxi from a business perspective, though, because a taxi business there are a lot of entrance to float above the map function, such as the end point card, user center entrance, the floating function on technology is not easy to implement, but also to ensure that the user touch action occurs on the floating element with the map, to separate the event system, Hybrid has no experience in this area.

With these challenges, we carried out a series of attempts and experiments, and finally solved the problem and encapsulated the map invocation framework of our taxi service, which we called the Native map and Web integration framework (hereinafter referred to as the integration framework). In this process, we have summed up some experience, hoping to bring some help to students engaged in related research.

Research 2.

Based on the hybrid technology development system, we studied the application scenarios of most H5 pages and Native maps on the market, which are mainly divided into the following two categories:

  • The H5 page and Native map are two independent pages: when the H5 business logic uses the map, a new map page is opened through interactive technology. In the new page, the Native map calls corresponding map components according to the incoming parameters to complete the display of business functions.

  • The H5 page and the Native map are located on the same page: they divide the screen into two parts, as shown below: The Native map is located in the upper part, and the WebView H5 page is located in the lower part.

After analysis, we find that neither of these two forms can meet the needs of taxi hailing business scenarios, because the mainstream taxi hailing business scenarios on the market are composed of four parts, as shown in the figure below:

  • Start and end selection panel: Occupies the bottom half of the page and slides up and down to reveal more content.
  • Map part: the upper part of the page, showing the starting and ending points, routes and other map elements.
  • More menus: click the icon in the upper left corner to jump to the H5 function menu page.
  • Advertisement entrance: icon in the upper right corner, click to jump to H5 operation page.

In the first category above, H5 page and Native map are located in two independent pages, which can only meet the needs of part of the map scene and cannot be laid out as H5 and map displayed in the same frame in the figure above.

The second type above requires multiple WebViews to achieve such a layout, which has the following disadvantages:

  • The lower WebView and the upper Native map are horizontal components, each occupying half of the screen. There is no gland relationship between them, so it is difficult to realize the effect of sliding up and down from the starting and ending panels.
  • More menus in the upper left corner and upper right corner, as well as the advertising entrance position, need to add two WebView components to cover the map. The WebView component will load corresponding H5 page to achieve the above layout, and the whole step is quite tedious.
  • The page layout composed of multiple WebView components is difficult to synchronize information between them because the memory space is not shared. Too many WebView components are also a waste of system performance.

The conclusion is that none of the existing technologies on the market can meet the needs of taxi hailing.

The presentation of a new scheme

Based on the particularity of taxi-hailing scene, we made a bold assumption: the page is divided into two layers. The lower layer is the Native map layer, which covers the screen. The upper layer is the WebView layer, which completely covers the Native map layer, as shown below:

The desired effect is:

  • When an H5 element is clicked, the click event is sent to the H5 WebView container for processing.
  • When you click on a map area, the click event is sent to the Native map component for processing.
  • The information interaction between H5 and Native map can be realized by mature JSBridge technology.

Specific implementation ideas are as follows, refer to the figure below:

  • Native map is located in the lower layer, and the WebView is placed on the Native map. The background of the WebView is transparent, and the map below can be seen through the WebView. The red box area is the H5 page element opened by the upper WebView.
  • Add a gesture message distribution layer that intelligently determines whether gesture events fall on H5 elements or map elements. For example: click the red box area, the message will be transmitted to the H5 logic processing of the WebView layer, click the area outside the red box, the message will be transmitted to the Native map layer processing (map movement, zooming and other operations).
  • H5 interacts with Native map using JSBridge. For example, when a Marker is added to the map, the business logic of H5 layer sends a message to add Marker, and H5 layer sends the message to Native map layer through JSBridge technology. After receiving the message, Marker elements are added to the map.

In order to verify the correctness of our idea, we first developed a Demo on the Android platform to verify the feasibility of such layered intelligent message delivery. The biggest advantage of this scheme is that it takes into account both the development efficiency of H5 and the high-performance characteristics of Native map, which is very suitable for meituan business map scenarios. In order to make the idea more standardized and systematic, we carried out the following framework design.

3. Frame design

3.1 Introduction to hot zone data

First, the concept of “hot zone data” is introduced. In the figure below (Section 3.2), there is a part of message distribution hot zone data in gesture distribution layer, hereinafter referred to as hot zone data. Hot spot data is a concept for the upper WebView and is only valid for the WebView layer, but not for the lower Native map layer. If the user clicks on an on-screen event and wants H5 to capture and process it, a logical rectangle can be set within the on-screen area, such as [0, 0, 50, 50] (upper left area above). This data is called hot area data.

We control the strategy of gesture message distribution by writing code logic. If the gesture message occurs within the scope of hot area data rectangle, we send the message to WebView for processing; otherwise, it is sent to Native map for processing. [0, 0, 50, 50], [430, 0, 50, 50] and [0, 200, 480, 200] can be set in the same screen, and the format of the heat area can be defined by itself. The pixel coordinate format used here is based on the origin of the upper left corner of the WebView component: [left, top, width, height]

3.2 Introduction to the framework diagram

Gesture messages are distributed to the WebView layer process

The main process is 1–>2–>3–>4, as follows:

  • The user’s touch action is first captured by the gesture distribution layer, which determines that the user clicks within the hot zone data range and distributes the message to the WebView H5 layer for processing.
  • WebView H5 layer receives the message, processes the message (for example, adding an endpoint Marker in the map), and transmits the message to Native map layer through communication bridge.
  • Native map layer receives the message and performs the operation of adding Marker, and returns the success message after completion. The overall process is as follows: gesture distribution layer –>1–>2–>3–>6–>7.

The gesture message is distributed to the Native map layer process

The process is mainly shown in Figure 5–>6–>7, as follows:

  • The gesture distribution layer captures the message and finds that there is no intersection between the user gesture and the current hot area data rectangle, so it distributes the obtained message to the Native map layer.
  • If the message is a drag operation, Native map will automatically recognize the drag map message and realize the effect of moving the map. The process involved is as follows: Gesture distribution layer ->5.
  • If the message is clickable, for example, we want to click on a Marker in the map to pass the message to H5 for processing. The implementation step is to add a click event (Native map layer implementation) when we add Marker in advance. When Marker is clicked, the Native map layer will send this event, and the event message will be transmitted from Native map layer to H5 layer through JSBridge technology, and finally H5 layer will get the click message. The whole operation process is: gesture distribution layer –>5–>6–>7.

Dynamic update strategy for hot spot data

Because the height of the panel at the bottom of the taxi service is scalable, the data of the hot area at the bottom is not static. It needs to be considered that the data of the hot area should also be adjusted synchronously with the stretching of DOM elements. DOM changes can be monitored in The WebView H5 layer. When DOM elements change, the position and size of changed DOM elements can be obtained, formatted as hot zone data, and updated to the message distribution hot zone data section. Because the stretching action is a continuous animation effect, we only update the hot zone data at the end of the animation for efficiency, and do not process the transition period in between. The overall process is: 2–>3–>4.

4. Landing practice in review App

4.1 Key codes of gesture distribution layer

This part of the function needs to be realized by Native terminal students, including iOS and Android. When the App is started, three layers of content are set at both ends, the top layer is gesture touch event receiving layer, the middle layer is WebView layer (background setting transparent), and the bottom layer is Native map layer (such as Tencent map SDK). The current hot zone data is recorded with an array. When an event occurs in the gesture distribution layer, the finger position information is obtained through the Touch event, and the hot zone array is traversed to determine whether the finger position intersects with the rectangle of the hot zone. If so, the message is distributed to the WebView layer, otherwise it is distributed to the Native layer. Here are the key codes for Android and iOS message distribution:

Android distribution layer key code

@Override
public boolean dispatchTouchEvent(MotionEvent event){
  if(event.getAction() == MotionEvent.ACTION_DOWN) {
    // The distribution layer receives the gesture touch message and determines whether the gesture falls in the hot zone through the dispatchService class, so as to determine the object of the message distribution
    this.touchHandler = dispatchService.inRegion(event) ? TouchHandler.WebView : TouchHandler.MapView;
  }
  // Distribute to Native map layer
  if(this.touchHandler == TouchHandler.MapView) {
    return this.mapView.dispatchTouchEvent(event);
  }
  // Distribute to the WebView H5 layer
  return super.dispatchTouchEvent(event);
}
Copy the code

IOS distribution layer key code

- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event { UIView *hitTestView = nil; // The distribution layer receives the gesture touch message and uses pointInHotspot to determine if the gesture is in the hot zone. If ([self pointInHotspot:point]) {// Distribute to WebView H5 layer hitTestView = [self.WebView hitTest:point withEvent:event]; }else{// Assign to Native map layer hitTestView = [self.mapView hitTest:point withEvent:event]; } return hitTestView; }Copy the code

4.2 the WebView H5 layer

This layer has two functions:

  • Provides the JS interface setHotRegion for setting hot zones. Services can use this interface to set hot zones on the screen.
  • It encapsulates a map interface in the form of JS to provide map services for upper-layer businesses. This layer realizes asynchronous communication between H5 and Native layer with the help of JSBridge communication bridge.

4.3 Introduction to communication Bridge

Communication bridge, namely JSBridge technology, mainly realizes the information interaction between H5 and Native. The technologies in this respect are relatively mature, and there are many JSBridge implementations in the industry with similar principles. Common ones are as follows: Native object layer into the H5, URL to intercept technology to call Native JS stringByEvaluatingJavaScriptFromString commonly used built-in functions, etc. Meituan has a relatively mature KNB framework, so KNB framework is directly used in the project.

4.4 Native map layer

This layer is encapsulated on the basis of map SDK (such as Tencent Map SDK) and provides some taxi business friendly interfaces, such as basic map operation, Marker addition of taxi starting and ending point, car animation of driver picking up and picking up, map events, information pop-ups of various markers, etc.

4.5 Automatic maintenance technology of Dom element hot zone data

The front-end technology stack of taxi hailing business is: the single-page system constructed by Vue + VueX + VUE-Router. As shown in the figure below, there are many H5 elements in the page that need to add hot areas. It would be tedious to write code to add elements one by one. Moreover, the hot area data need to be updated synchronously when the position and size of page elements change.

It is obvious that the card at the bottom of the right picture is taller. The change of the card requires simultaneous update of the corresponding hot zone data. Directive technology can conveniently solve this problem, and the principle is as follows:

  • When an element is added, the bind hook function of the Vue directive is fired, which calculates the popover element’s size and position: The getBoundingClientRect function can be used to obtain the left, top, width, height and other information of the element, and the new hot zone data can be updated to the gesture distribution layer through the setHotRegion function.
  • When an element is removed, the unbind hook function is triggered to remove the hotspot data, which automatically adds and deletes hotspots.
  • Using instruction technology is very simple. After writing the logic of the instruction, register it globally and set a V-Hotregion tag on the element that needs to update the hot area dynamically.

4.6 Debugging Tools and Tests

Debugging tools can use simulators and real machines. During development, we used simulators for development and QA used real machines for verification during testing. The debugging process mainly verifies two parts of the function, namely the hot area verification and map interface verification.

Hotspot validation

Mainly verify whether the hot area set on the main page is correct, including whether you can click, whether the bottom card can drag normally, whether the business function is normal, etc. Because the hot zone data is a string of numbers, such as: [0, 0, 50, 50], it is impossible to intuitively judge whether the data is wrong. Therefore, we developed a visualization tool, which highlighted the elements setting the hot zone with red rectangle, as shown in the figure below, so as to quickly diagnose whether the hot zone data is abnormal. The tool is realized by using Canvas Canvas, which is exactly the same size as the screen. With the help of Canvas, the rectangular hot area data can be drawn in real time on the screen.

Map interface validation

This project is mainly completed by writing unit tests. More than 50 map interfaces are encapsulated in this project. For each interface, a single test case is written to observe input and output parameters, console output results, and whether the map display effect is correct. The testing is done in the iOS emulator so that debugging information can be printed on the console for diagnostics.

5. Online effect

After the launch of this framework in Dianping App, map experience has been significantly improved, mainly in the following aspects:

  • The operation experience of the map, such as map movement and zooming, is significantly better than that of THE H5 map. The animation effect of selecting the starting and ending point, ordering a car and picking up and driving a car by using the Native map is smoother.
  • The indicators of first-screen map data are also significantly improved, as shown in the following table:

  • At present, the online operation is stable. Two months after the online operation, the number of crashes is in single digits, and the Crash rate is far lower than 0.1‰.
  • After the launch of the framework, the business iteration in Dianping App can be launched in accordance with the H5 rhythm to achieve the development efficiency of releasing versions at any time.

The Native map layer code interface is stable and has rich functions, which basically meets the business requirements of map scenes. You only need to iterate on the H5 business logic for the first release.

6. Summary of this paper

In this paper, WebView and Native map components are superimposed together to realize the mechanism of intelligent distribution of user gesture events and solve the problem of difficult layout of WebView and Native map in the same page. This fusion mechanism for improving iterative efficiency at the same time guarantee the map experience a taxi business provides an effective way, everyday business functions online using H5 iteration, Native map as the basis of not often update ability first version installed on the user’s phone, when the ability to implement business requirements at any time release, no longer restricted by major app stores, Users also have a smoother experience navigating the map. The converged framework is suitable for the following business scenarios:

  • The service uses the map function, and has high requirements for map loading and operation experience.
  • The business belongs to Hybrid business, and the H5 page and map layout function in the same page.
  • If your business is built on multiple WebViews and Native maps, it is highly recommended that you read this article.

7. Author profile

Meituan Taxi Technology Department Terminal RESEARCH and development Center, Jia Peng, Zhang Bin, Yang Rui, Qiu Bo, Hai Feng, etc.

8. Job information

The terminal R&D center of Meituan Taxi Technology Department sincerely invites senior front-end development engineer, front-end development expert, senior iOS engineer and senior Android engineer. We provide high-quality taxi service for meituan-Dianping users, which is an important part of the local life restaurant. Welcome to join us and build ultimate travel products together. If you are interested, please send your resume to [email protected] (subject: Terminal R&D Center of Meituan Taxi Technology Department).

For more technical articles, please follow the official wechat account of Meituantech.