Alimei's introduction: With the end of the era of mobile Taobao traffic dividends, how to continuously improve the app user experience through refined operations has become our new goal. Under the limited conditions, the hand-tao technology team of children's shoes cleverly used Weex to realize the card-type interaction form that could only be achieved by pure native in the past, creating a small surprise for users (the technology has been open source). Let's take a closer look together.
At the beginning of the article, let's look at two renderings:
At first glance, do you think that these two products should be purely native implementation, weex does not seem to have this ability. But the actual situation is: this is a function that relies on the pure js implementation of the weex container, and it does not rely on native to implement these UI components (such as slider). Then everyone may be very curious, how is this cool interactive experience achieved? Let me analyze the card interaction of "Daily Good Store" (one of the main columns of the mobile Taobao homepage).
background
With the end of the era of mobile Taobao traffic dividends, how to manage existing customers has become the top priority. In response to this situation, the shopping guide line has gradually shifted from the previous CTR and GMV orientation to refined operations, and is committed to improving users. experience, thereby increasing the online time and penetration rate. In this context, the upgrading of "Daily Good Store" products is imperative. Through the efforts of PD and interaction designers, a new card-based interactive product form has been created.
Product function disassembly
The interactive draft I got at the beginning is as follows:
After getting the interactive draft, the first step is to analyze and disassemble the product function. The entire product can be disassembled into the following functional parts:
Card swipe and zoom while swiping
Swipe up on the video card to zoom in, and zoom out when the down button is clicked
The page background is the cover image of the current card, which changes as the card slides
Card navigation numbers change as the card is swiped
The page needs to occupy the full screen and cannot have the system default navigation bar
Cards need to have rounded corners and shadows
When the video is not playing, the cover needs to have a breathing effect
Implementation process
When the function is disassembled, it is time to study the implementation plan. To achieve these functions, we have two options: one is to go native, and the native implements these functions, and the other is to implement js based on the weex container. Of course, the first thing that comes to mind is the native implementation, because the direct use of native implementation, the experience is definitely the best, and the existing capabilities of weex seem to be unable to achieve these functions. However, if the native implementation, in addition to ensuring the experience of the product, it also has its drawbacks:
1. The code cannot be copied and is often a one-time product
2. It requires at least two people to develop Android and iOS, which is more labor-intensive
3. It is troublesome to release the version, you have to follow the release rhythm of Taobao, it is difficult to carry out flexible product iteration
So from a long-term perspective, we prefer to use weex to achieve both a native experience, flexible release and rapid iteration, and a front-end to handle multiple ends.
Next, verifying the capabilities of the weex is the first thing to do. We first wrote two demos. One demo uses the animation module of weex to realize the function of zooming in and out of the video card; the other demo uses the touch event provided by weex to realize the card in a pure front-end way in the web era. Swipe function. Through demo verification, it is found that the main problem on the weex side is the performance problem when using touch events. On the iOS side, the performance of the card sliding is acceptable, but the Android side is very stuck. The reason is because every time touchmove is triggered, there is a communication between native and js, and every time the move event ends, we have to modify the position, and there is a communication between js and native to notify the native to re-render, The trigger frequency of touchmove is quite terrifying, so frequent diff calculation and communication consumes a lot of resources, resulting in page freezes.
Based on this, we designed the BindingX solution. Every time at touchstart, js accepts the native event, and then passes the calculation expression used in the move to the native. The operation of the move is all done by the native side, which completely saves the diff calculation and the connection between the native and the js. consumption of calls.
Of course, in addition to this problem, there are also some other problems. In the end, we figured out all the missing capabilities that weex needed to realize the good store function, and pushed weex to realize all these capabilities.
The following lists the new capabilities of this weex for Haodian:
1. BindingX : A big leap in gesture operation, you can change it how you want
As described above, it is mainly to solve the performance problem of touchmove exposed by weex. Every time when touchstart is started, js accepts the event of native, and then passes the calculation expression used in move to native, and the operation of move is all It is done by the native side, which completely saves the consumption of call between native and js. And BindingX can bind multiple elements at the same time, that is, when you move a target element, you can move multiple other associated elements at the same time. It is a bit obscure to describe in language. It may be more intuitive to describe the functions of background gradient, card zoom, and digital rollover when the card is slid horizontally in pseudocode:
As can be seen from the pseudo code, this usage process is actually very simple:
1. Bind the pan event to the target element
2. Create an expression binding relationship between the target element and the associated element
The ability of BindingX actually gives the front-end a lot of room to play. We can develop a weex UI component (such as the slider component) by ourselves, just like we used to develop UI components on the web side, and even create a weex with strong interactive capabilities. UI component library.
2. NavBar Transparent: The navigation bar is transparent, and the designer has more room for creativity.
The use of transparency in the navigation bar is very simple. You only need to add wx_navbar_transparent=true after the url, and the navigation bar will magically become transparent (the previous pd, visual, and interactive effects can finally be realized). In addition to transparency, it also has a function of hiding the navigation bar. As long as wx_navbar_hidden=true is added after the url, the navigation bar can be hidden, and we can completely control the navigation style and jump logic of the page by ourselves.
3. NavBar Button Color: Back button can also change color.
This function is actually used in conjunction with the transparency of the navigation bar. When the navigation bar is transparent, the background color of the navigation bar becomes the background color of the page. With this ability, the designer can completely change the background color of the page according to the background color of the page. Different, let's adjust the color of the buttons on the navigation bar. Of course it is also very simple to use:
4. Shadow: The card effect is more prominent, and the three-dimensional effect is blowing.
In the past, when the visual effect of the shadow was proposed, would it be very embarrassing, or weex did not support it, or it might have to be achieved in a very geek (through pictures) way. Now the function of weex shadow has finally landed, but unfortunately android does not realize the effect of w3c box-shadow, it only provides the parameter of elevation to achieve the effect of the third parameter of box-shadow.
5. Rounded corners: Even the video component can support rounded corners, and the card effect is more outstanding.
Previously on the Android side, to achieve rounded corners, you must use border-radius in the inner element to control the rounded corners, because its border-radius property is implemented by each basic component (such as view, image). In this way, adding border-radius to the outer view is completely ineffective, and it is quite inconvenient to use, and the video component does not support the border-radius property at all. Now that the ability is enhanced, you can achieve the function of rounded corners by adding border-radius to the outermost layer where you want the rounded corner effect. Even if there is a video inside, it can be displayed with rounded corners. Behind this, the implementation principle of border-radius has changed. In the past, each basic component implemented it by itself, but now it is done in the rendering layer.
Of course, it is well supported on the iOS side, but you have to add an overflow:hidden attribute in the outermost layer in addition to border-radius.
6. Scrollable: You can move only if I let you move.
The scroller component adds a scrollable property, which allows us to flexibly control whether the scroller can scroll.
7. Blur: The frosted glass effect has been an attribute ever since.
If you want to achieve the effect of frosted glass, you only need to add the filter attribute to the style.
It's just that the value of the filter is different on Android and iOS, and this function may need to be improved.
8. Back button event interception: let the business control the fallback logic
When the weex container has not implemented the basic ability of single-page processing such as hash, the function of intercepting the back button event actually provides us with the ability to realize single-page in disguise. The history of the page is completely maintained by itself, and the logic of pop history is controlled by intercepting the fallback event. Of course, this is only a transitional solution. To flexibly implement a real single-page application, weex still needs to implement APIs such as the w3c standard hash.
The above is the interactive upgrade of Haodian products, the new capabilities of the push weex terminal.
Of course, in addition to these new capabilities, we also use the animation module flexibly to cooperate with BindingX to handle some animation effects after the finger is released, and the effect of zooming in and out of the video card. From the overall effect, it has basically achieved what the designer wanted.
open source
At present, we have open sourced the BindingX technology, hoping to help more developers solve similar problems.
BindingX is a solution to the rich interaction problem on weex and React Native. It provides a mechanism called "Expression Binding", which allows complex interactive operations such as gestures to be executed smoothly at a frame rate of 60fps on weex and React Native without causing stuttering, thus bringing better performance. user experience.
BindingX supports both React Native and weex in the form of plugins. On weex, it can be directly registered in the weex environment as a weex module, and supports both weex DSL and Rax DSL at the JS layer. On React Native, it can also be used in a similar way.
Open source address (click "Read the original text" at the end of the article to view):
https://alibaba.github.io/bindingx/guide/cn_introduce
You might also like
Click the image below to read
How to make the machine understand the mystery of Chinese characters?
Which technical books are worth reading again and again?
Speed Collection! "Ali Technical Reference Atlas"
Follow "Ali Technology"
Grasp the pulse of cutting-edge technology