BindingX: Going Native, Without Going Native

Background

As with many e-commerce platforms, the management of existing customers has become one of Mobile Taobao’s top priorities. Over the years, the focus of shopping guidelines has shifted from click-through rate (CTR) and gross merchandise volume (GMV) operations to more refined procedures, improving user experience and increasing customers’ online time and penetration. With this in mind, the Alibaba tech team thought the Featured Stores section on the Mobile Taobao homepage could do with an upgrade, and formed a team of product and interaction designers to create a new card-based interaction.

Interaction Function Breakdown

Here are some of the team’s initial drafts for the interaction:

Implementation Process

As the team considered how to implement these functions, they were faced with the choice between:

Weex Feature Breakdown

The following is a list of newly added Weex features for the Featured Stores section:

1. BindingX: enhanced gestures that you can operate however you like

As mentioned above, the main objective while developing BindingX was to resolve the touchmove performance problem. Each time a touchstart occurs, JavaScript accepts the native event, and then passes the expression used in the move to the native methods. This operation is entirely performed by native methods, eliminating the diff calculations and the call consumption between the native methods and JavaScript. BindingX can also bind multiple elements simultaneously, meaning that if you move a target element, you can move multiple associated elements at the same time.

let sliderCtn = findDOMNode('sliderCtn'); // findDOMNode is the syntax in rax for the entire horizontal slider container, it is equivalent to $el in vueeb.enableBinding(sliderCtn.ref,'pan'); // First, bind the event to the target element in advance

let bgLeft = findDOMNode('bgLeft'); // The left card’s background
let bgMiddle = findDOMNode('bgMiddle'); // The middle card’s background
let bgRight = findDOMNode('bgRight'); // The right card’s background
let letCard = findDOMNode('leftCard'); // Left shrunk card
let currentCard = findDOMNode('middleCard'); // Currently centered card
let rightCard = findDOMNode('rightCard'); // Right shrunk card
let animateNumber = findDOMNode('animateNumber'); // Numbers that need to be scrolled up and down
let args = [
{element: bgLeft.ref, property: 'opacity', expression: 'max(0, 0-x/588)'}, // When sliding right, the background of the left card fades in; when sliding left, it disappears
{element: bgMiddle.ref, property: 'opacity', expression: '1 - abs(x)/588'}, // The current card fades when sliding left or right
{element: bgRight.ref, property: 'opacity', expression: 'max(0, 0-x/588)'}, // When sliding left, the background of the right card fades in; when sliding right, it disappears
{element: sliderCtn.ref, property: 'transform.translateX', expression: `x - ${currentCardLeft}`}
, // The distance traveled minus the distance to the current card from the left of the container
{element: leftCard.ref, property: 'transform.scale', expression: '1-abs(x)/588*0.122'},
{element: currentCard.ref, property: 'transform.scale', expression: '1-abs(x-588)/588*0.122'},
{element: rightCard.ref, property: 'transform.scale', expression: '1-abs(588+x)/588*0.122'},
{element: animateNumber.ref, property: 'transform.scale', expression: `${currentNumberTop} + x/588*80`},
];
// Next, bind the associated element, the changed property, and calculation formula to the target element, and pass it to the native side
eb.createBinding(el.ref,'pan','',args,function(e){
if(e.state === 'end') {
// When the move ends, do some callbacks (usually using the animation module to process some reset animations after executing touchend)
}
});

2. Navigation bar transparency: providing extra space for designers

To make the navigation bar transparent, simply add wx_navbar_transparent=true to the end of the URL. Alternatively, you can hide the navigation bar altogether by adding wx_navbar_hidden=true at the end of the URL. In doing so, you can fully control the navigation style and page jump logic.

3. Navigation bar button color: customizable back button color

This feature is linked to the transparency of the navigation bar. If the navigation bar is transparent, the bar’s color automatically becomes whatever the page’s background color is, meaning that designers can work with one full page background. It also allows them to adjust the color of the button in the navigation bar. If you want to activate this feature, simply do the following:

let navigationBar = require('@weex-module/navigationBar');
navigationBar.setStyle({
color: '#ffffff'
}, () => {}, () => {});

4. Shadow: for cards with more prominent 3D effects

One member of the team commented that in the past, if they’d been tasked with creating a shadow effect, it may have proved a tad embarrassing. They would either have said that Weex didn’t support it, or that it could only be achieved via a rather convoluted method involving the help of pictures. These days, however, Weex has an easy-to-use shadow function. That said, on Android it still can’t create a W3C box-shadow effect — it only provides elevation parameters to create the effects of the third box-shadow parameter.

5. Rounded corners for video: for truly exceptional card effects

To make rounded corners on past Android systems, you used to need to add a border-radius in the inner layer, as the corner’s border-radius attribute was implemented by each underlying component. Indeed, adding a border-radius to the outer view was useless. Thanks to advancements made to Weex, you can now implement rounded corners simply by adding a border-radius to the outermost layer — to wherever you want the rounded corners (even a video card).

6. Scrolling: You now have control over card scrolling

A scrolling attribute has been added to the scroller component, giving you full control over exactly how and when the scroller scrolls.

7. Blur: The frosted glass effect is now an attribute

To apply the frosted glass effect to your images, just add the filter attribute to the style:

filter: 'blur(10px)'

8. Back button event interception: The service controls the back-off logic

If a Weex container hasn’t implemented the basic capabilities of a single-page application (SPA), such as hash, the back button event interception function actually provides an indirect way of implementing SPA. But this is just a temporary measure. To perform SPA flexibly, Weex needs to implement hash-like APIs at W3C standard.

Open Source

The Alibaba tech team believes in giving developers the means to solve the problems facing them. In that spirit, BindingX is currently open source.

Alibaba Tech

First hand, detailed, and in-depth information about Alibaba’s latest technology → Facebook: “Alibaba Tech”. Twitter: “AlibabaTech”.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Alibaba Tech

Alibaba Tech

First-hand & in-depth information about Alibaba's tech innovation in Artificial Intelligence, Big Data & Computer Engineering. Follow us on Facebook!