Some users reported that there are some problems with the performance of the Meituan taxi-hailing map. After investigation and analysis, the Meituan taxi-hailing technical team adopted a set of integration framework of Native map and Web, which not only realized the mechanism of intelligent distribution of user gesture events, but also solved WebView. It is difficult to lay out on the same page as the Native map, and the performance is also fully optimized. This article summarizes and shares the experience of fusion technology.
1. Background
Meituan’s taxi-hailing business has provided service portals in the Meituan App and Review App for a long time, and technically adopts the hybrid development technology of H5 and Native. With the launch of the business, some users reported that our map performance has some problems. The reason is that we use the web version of the map for taxi maps (via Tencent Maps JavaScript API), and similar products in the industry use the Native version of the map SDK, Native map Compared with Web maps, it has natural performance advantages, so there is a certain gap between the loading of Meituan taxi map from the first screen map to the subsequent map operation experience.
Problems and challenges
In order to improve the map experience of the ride-hailing business, the solution we thought of was to use Native maps in the display part of the map, and use the H5 page to display the non-map part, which can tie the gap in map performance with competing products and give full play to H5. Development efficiency.
At first glance, this solution seems to be a traditional Hybrid development, without any difficulty or novelty. For example, the map is implemented using the map SDK pre-built into the App, and the interaction between H5 and Native uses the industry's mature JSBridge technology. But from the perspective of taxi business, because many functional entrances of taxi business need to float on the map, such as start and destination card, user center entrance, etc., this floating function is not easy to realize technically, and users must touch When actions occur on floating elements and on the map, they are distributed to their respective event systems. Hybrid technology has no experience to learn from in this regard.
With these challenges, we conducted a series of attempts and experiments, and finally solved the problem and encapsulated the map call framework of our taxi business, which we call the Native Map and Web Fusion Framework (hereinafter referred to as the Fusion Framework). In this process, we have summed up some experience, hoping to bring some help to students engaged in related research.
2. Research
Based on the hybrid technology development system, we have 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 the Native map are two separate pages: When the H5 business logic uses the map, a new map page is opened through the interactive technology. In the new page, the Native map calls the corresponding map component according to the input parameters to complete the business function. Show.
-
The H5 page and the Native map are in the same page: the two divide the screen into two parts, as shown in the following figure: the Native map is in the upper half, and the WebView H5 page is in the lower half.
After analysis, we found that neither of these two forms can meet the needs of the ride-hailing business scenario, because the mainstream ride-hailing business scenario currently on the market consists of 4 parts, as shown in the following figure:
-
Start and end selection panel : occupy the lower half of the page, you can slide up and down to reveal more content.
-
Map part : The upper part of the page displays map element information such as start and end points and routes.
-
More menu : the icon in the upper left corner, click to jump to the H5 function menu page.
-
Advertising entrance : the icon in the upper right corner, click to jump to the H5 operation page.
In the first category above, the H5 page and the Native map are located in two separate pages, which can only meet the needs of some map scenes, and cannot be laid out to the effect that the H5 and the map in the above picture are displayed in the same frame.
In the second category above, multiple WebViews are needed to implement such a layout, which has the following disadvantages:
-
The lower WebView and the upper Native map are flat-level components, each occupying half of the screen, and there is no overlap relationship between them. It is difficult to achieve the effect of sliding up and down on the start and end panels.
-
For the more menus in the upper left and upper right corners, two new WebView components need to be added to the advertising entry position to be overlaid on the map. The WebView component then loads the corresponding H5 page to achieve the above layout. The whole step is cumbersome.
-
For the page layout composed of multiple WebView components, because the memory space is not shared, it is difficult to synchronize information between them. Too many WebView components are also a waste of system performance.
The conclusion of the survey is that none of the existing technologies on the market can meet the needs of the taxi-hailing scene.
Proposal of a new plan
Based on the particularity of the taxi-hailing scene, we made a bold assumption: divide the page into 2 layers, the lower layer is the Native map layer, covering the screen; the upper layer is the WebView layer, which completely covers the Native map layer, as shown below :
The desired effect is:
-
When the H5 element is clicked, the click event will be dispatched to the H5 WebView container for processing.
-
When the map area is clicked, the click event will be sent to the Native map component for processing.
-
The information interaction between H5 and Native map can be realized by using mature JSBridge technology.
The specific implementation ideas are as follows, refer to the following figure:
-
The Native map is located in the lower layer, the WebView is placed on the Native map, the WebView background 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, which will intelligently determine whether the gesture event falls on the H5 element or the map element. Example: Click the red box area, the message will be passed to the H5 logic processing of the WebView layer, click the area outside the red box, the message will be passed to the Native map layer for processing (map movement, zoom, etc.).
-
The interaction between H5 and Native map is done using JSBridge. For example, if you add a Marker to the map, the business logic of the H5 layer sends a message to add the Marker, the H5 layer sends the message to the Native map layer through JSBridge technology, and the Native map adds the Marker element to the map after receiving the message.
In order to verify whether the idea is correct, we first developed a Demo through the Android platform to verify that this hierarchical intelligent messaging is feasible. The biggest advantage of this solution is that it takes into account the development efficiency of H5 and the high-performance features of Native maps, which is very consistent The needs of the Meituan business map scene. In order to make the idea more standardized and more systematic, we have carried out the following frame design.
3. Frame design
3.1 Introduction to hot zone data
First introduce the concept of "hot zone data", the following figure (section 3.2) has a message distribution hot zone data part in the gesture distribution layer, which is referred to as hot zone data below. Hot zone data is a concept for the upper WebView, which is only valid for the WebView layer, and is invalid for the lower Native map layer. If the user clicks on the screen event and wants H5 to capture and process, you can set a logical rectangular area in the screen area, such as: [0, 0, 50, 50] (the upper left corner of the figure above), this data is called hot District data.
We write code logic to control the strategy of gesture message distribution. If the gesture message occurs within the rectangle of the hot zone data, we send the message to WebView for processing, otherwise, it sends it to Native map for processing. As shown in the figure above, you can set multiple hot zones in the same screen, [0, 0, 50, 50], [430, 0, 50, 50], [0, 200, 480, 200], The format can be defined by yourself. 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 frame diagram
Gesture messages are distributed to the WebView layer process
Mainly the process of 1-->2-->3-->4 in the above figure, as follows:
-
The user's touch action is first captured by the gesture distribution layer. The gesture distribution layer judges that the user clicks into the hot zone data range and distributes the message to the WebView H5 layer for processing.
-
The WebView H5 layer receives the message, processes the message (for example, adding a terminal marker to the map), and transmits the message to the Native map layer through the communication bridge.
-
The Native map layer receives the message, executes the Add Marker operation, and returns a success message after completion. The above overall process is: gesture distribution layer-->1-->2-->3-->6-->7.
The process of distributing gesture messages to the Native map layer
Mainly the process of 5-->6->7 in the above figure, as follows:
-
The gesture distribution layer captures the message and finds that the user gesture does not overlap with the current hot zone data rectangle, so it distributes the acquired message to the Native map layer.
-
If the message is a drag operation, Native Map automatically recognizes the drag map message to achieve the effect of moving the map. The process involved is: gesture distribution layer --> 5.
-
If the message is a click operation, for example, we want to implement the function of clicking the Marker in the map and passing the message to H5 for processing. The implementation steps are that we add a click event before adding the Marker (implemented by the Native map layer). When the Marker is clicked, the Native map layer will dispatch this event. The event message will be transmitted from the Native map layer to the H5 layer through JSBridge technology, and finally the H5 layer. Get the click message. The entire operation process is: gesture distribution layer-->5-->6-->7.
Dynamic update strategy of hot zone data
Because the height of the panel at the bottom of the ride-hailing business is scalable, the hot zone data at the bottom is not static. It is necessary to consider that the hot zone data should be adjusted synchronously with the stretching of the DOM element. You can monitor the DOM changes at the WebView H5 layer. When the DOM element changes, the position and size of the DOM element after the change are obtained, formatted as hot zone data, and updated to the message distribution hot zone data part. Because the stretching action is a continuous animation effect, in order to be efficient, we only update the hot zone data at the end of the animation, and do not handle the intermediate transition period. The overall process is: 2-->3-->4.
4. Comment on the landing practice in the app
4.1 Key code of gesture distribution layer
This part of the function needs to be implemented by native students, including iOS and Android. The two ends respectively set up three layers of content when starting the App. The top layer is the gesture touch event receiving layer, the middle is the WebView layer (the background is set to be transparent), and the bottom layer is the Native map layer (such as Tencent Map SDK). Use an array to record the current hot zone data. 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 the hot zone rectangle. If it does, the message is distributed to the WebView layer. Otherwise, it will be distributed to the Native layer. Below is the key code for Android and iOS message distribution:
Android distribution layer key code
@Override
public boolean dispatchTouchEvent(MotionEvent event){
if(event.getAction() == MotionEvent.ACTION_DOWN) {
// 分发层接收到手势触摸消息，通过dispatchService类判断手势是否落在热区内，从而确定消息分发的对象
this.touchHandler = dispatchService.inRegion(event) ? TouchHandler.WebView : TouchHandler.MapView;
}
// 分发给Native地图层
if(this.touchHandler == TouchHandler.MapView) {
return this.mapView.dispatchTouchEvent(event);
}
// 分发给WebView H5层
return super.dispatchTouchEvent(event);
}
Key code of iOS distribution layer
- (UIView *)hitTest:(CGPoint)point withEvent:(UIEvent *)event {
UIView *hitTestView = nil;
// 分发层接收到手势触摸消息，通过pointInHotspot判断手势是否落在热区内，从而确定消息分发的对象
if ([self pointInHotspot:point]) {
// 分发给WebView H5层
hitTestView = [self.WebView hitTest:point withEvent:event];
}else{
// 分发给Native地图层
hitTestView = [self.mapView hitTest:point withEvent:event];
}
return hitTestView;
}
4.2 WebView H5 layer
This layer has 2 functions:
-
Provides the JS interface setHotRegion to set the hot zone, and the business can set the hot zone on the screen through this interface.
-
Encapsulate a layer of map interface in JS form to provide map services for upper-layer business. This layer uses JSBridge communication bridge to realize asynchronous communication between H5 and Native layer.
4.3 Introduction to Communication Bridge
The communication bridge is JSBridge technology, which mainly realizes the information interaction between H5 and Native. The technology in this area is relatively mature. There are many JSBridge implementations in the industry, and the principles are similar. Common ones are: injection of native objects into the H5 layer, URL interception Technology, Native calls JS commonly used built-in function stringByEvaluatingJavaScriptFromString and so on. Meituan has a relatively mature KNB framework, so the KNB framework is directly used in the project.
4.4 Native map layer
This layer is encapsulated on the basis of the map SDK (such as Tencent Map SDK), and provides some friendly interfaces for taxi services, such as basic map operations, addition of markers for taxi start and end points, animation of the driver's car, map events, and various Marker information Pop-up windows etc.
4.5 Automatic maintenance technology of Dom element hot zone data
The front-end technology stack of the taxi-hailing business is: a single-page system built by Vue + VueX + Vue-Router. As shown in the figure below, there are many H5 elements on the page that need to add hot zones. It would be cumbersome to write code one by one to add them. Moreover, when the position and size of the page elements change, the hot zone data needs to be updated synchronously. Here we use the Vue Directive (instruction) to solve this problem.
The above left and right 2 pictures are the different states of the page display during user operation. It is obvious that the card at the bottom of the right picture has become taller, and the corresponding hot zone data needs to be updated simultaneously when the card changes. Directive technology can easily solve this problem. The principle is as follows:
-
When adding an element, the bind hook function of the Vue instruction is triggered. At this time, the size and position of the pop-up element are calculated: use the getBoundingClientRect function to obtain the left, top, width, height and other information of the element, and add the new hot zone data Update to the gesture distribution layer through the setHotRegion function.
-
When the element is removed, the unbind hook function is triggered, and the hot zone data is removed at this time, so that the automatic addition and deletion function of the hot zone is realized.
-
The instruction technology is very simple and convenient. After writing the logic of the instruction, register it to the global, and set a v-hotRegion tag on the element that needs to dynamically update the hot zone.
4.6 Debugging tools and testing
The debugging tool can use a simulator or a real machine. The simulator we use during development is developed, and QA uses real machine verification during testing. During the debugging process, two functions are mainly verified, namely the verification of the hot zone and the verification of the map interface.
Hot spot verification
Mainly verify whether the hot zone set on the main page is correct, including whether it can be clicked, whether the bottom card can be dragged normally, whether the business function is normal, etc. Because the hot zone data is a series of numbers, in the form: [0, 0, 50, 50], it is impossible to visually judge whether the data is wrong, so we developed a visualization tool that uses red rectangles to set the elements of the hot zone Highlight it, as shown in the figure below, so that you can quickly diagnose whether the hot zone data is abnormal. The tool is implemented using the Canvas canvas. The size of the canvas completely overlaps the screen size. With the help of the canvas, the rectangular hot zone data can be drawn on the screen in real time.
Map interface verification
The main task is to write unit tests. This project encapsulates more than 50 map interfaces. For each interface, write a single test case to observe input parameters, output parameters, console output results, and whether the map display effect is correct. The test is mainly done in the iOS simulator, which is convenient for printing some debugging information on the console for diagnosis.
5. Online effect
After the framework was launched in Dianping App, the map experience has been significantly improved, which is mainly reflected 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 user uses the Native map to select the starting and ending point, place an order and call a car, and the animation effect of picking up the car is smoother.
-
The data indicators of the first screen map have also been significantly improved, as shown in the following table:
-
At present, the online operation is stable. During the first two months of launch, the number of crashes was in single digits, and the crash rate was far below 0.1‰.
-
After the framework is launched, the business iterations in the Dianping App can be launched in accordance with the H5 rhythm to achieve the development efficiency of release at any time.
Native map layer code interface is stable and rich in functions, which basically meets the business needs of map scenarios. You only need to follow the version for the first time and only need to iterate the business logic of H5.
6. Summary of this article
This article superimposes WebView and Native map components together, realizes the mechanism of intelligent distribution of user gesture events, and solves the problem of difficult layout of WebView and Native map on the same page. This integration mechanism provides an effective way for the ride-hailing business to improve the iterative efficiency while ensuring the map experience. The daily business functions are launched using H5 technology iteration. The Native map is installed on the user’s mobile phone as a basic capability that is not frequently updated when it is first released. The ability to achieve business needs to release at any time is no longer restricted by major application stores, and users have a smoother experience of operating maps. The fusion framework is suitable for the following business scenarios:
-
The map function is used in the business, and the business with higher requirements such as map loading and operation experience.
-
The business belongs to the Hybrid business, and the H5 page and the map are laid out on the same page.
-
If your business is a system based on multiple WebViews and Native maps, it is highly recommended that you read this article.
7. About the author
Terminal R&D Center of Meituan Taxi Technology Department, Jia Peng, Zhang Bin, Yang Rui, Qiu Bo, Haifeng, etc.
---------- END ----------
Job Offers
The Terminal R&D Center of Meituan Taxi Technology Department invites senior front-end development engineers, front-end development experts, senior iOS engineers, and senior Android engineers. We provide high-quality taxi services to Meituan Dianping users, which is an important part of local life, eating, drinking and playing. Welcome all friends to join us to create the ultimate travel products. Interested students can submit their resumes to: [email protected] (please specify the subject of the email: Meituan Taxi).
Maybe you still want to watch
| The practice of React Native in the Meituan takeaway client
| Exploration of TSLint static inspection tool in React Native project
| Open source React Native component library beeshell 2.0 released