Weex is an easy-to-use cross-platform development solution that can build high-performance and extensible native applications based on web development experience. In order to achieve this, Weex collaborates with Vue and uses Vue as the upper framework. It also implements a unified JSEngine and DOM API in compliance with W3C standards, so you can even use other frameworks to drive Weex and create a three-end native application.

Introduction to the

The basic concept

In order to use BindingX, developers need to understand the following concepts: expressions, event types, and attribute transformations.

expression

An expression is a combination of numbers, operators, variables, etc., in a meaningful arrangement that yields a numerical value. For example, x*3+10 is an expression, and when x is assigned, the whole expression has a definite result. Using an expression, we can describe a specific interaction. For example, if we want transparency to change from 1 to 0.5 when x changes from 0 to 100, the expression can be described as f(alpha) = 1-(x/100)*0.5. In BindingX, we implemented a lightweight expression parsing engine for executing expressions. In addition to the basic four operations, it also supports advanced syntax such as ternary operators and mathematical functions, which can satisfy most scenarios. To see the expression syntax supported in BindingX, see Supported Expression Syntax

The event type

Now that you know that BindingX describes interactions through expressions, what are the variables in those expressions? The answer is “Different event types have different expression variables”! So what is an event type? In BindingX, an event is a data producer that can drive a change in the value of an expression, such as “user gesture”, “scrolling of a list” or even “gyro-sensed direction change”. Each of these events corresponds to a unique event type, such as “gesture”, which corresponds to pan. To see all the event types supported by BindingX, refer to the documentation: Supported Event Types. Also, each event type corresponds to a different expression variable. For example, when the event type is PAN, the expression variables are X and Y, representing the horizontal and vertical offsets during the gesture, respectively.

Attribute transformation

The result of the expression’s execution ultimately drives UI changes, such as transparency, displacement, background color, and so on, which attribute transformations are used to describe. In BindingX, common transform attributes such as translation and scale are supported, as well as transparency and width and height attributes. To see all the supported property transformations, refer to the documentation: Supported Properties.

Background and Principles

Implementing some complex gesture interaction effects in Weex environment may cause lag, because each gesture interaction produces two JS-native communications. The first time is Native Call JS, which passes the gesture event to the JS layer for the front-end processing. When the JS layer receives the callback, the second communication, JS Call native, will be generated to drive the interface change. At the same time, the frequency of gesture callback events is very high, and the time cost caused by frequent communication is likely to cause the interface to be unable to complete drawing in 16ms, resulting in lag. Here’s a schematic of the traditional scheme:

  • Monitor the scrolling of the container and update the UI based on variables such as the scrolling distance, such as the most common parallax animation;
  • Monitor gyro direction change data and update UI;
  • Monitor time changes and update UI;

Function in

BindingX can be used to achieve a number of responsible functions, mainly complex animation, gyroscope, ceiling effect.

Gestures to monitor

BindingX can listen for elements’ PAN events, which can be used for drag-and-drop, card slippage and other interactive effects. Even more surprisingly, components like the Weex Slider can now be implemented using BindingX.

animation

The usual way to implement animation on WEEX is to use the Animation Module, but now there are new options. BindingX provides all the effects that an Animation Module can achieve. In addition, more than 30 sets of common interpolators are built into BindingX. You can also use custom interpolators for Bezier curves in cubicBezier, and these effects can be used in RN.

BindingX has a built-in gyroscope listener, which can monitor the direction change of the device. This is very useful in many rich interactive scenarios, such as mobile Taobao, where you can see a lot of gyroscope-based parallax effects.

List scrolling listener

BindingX listens for onScroll events in scrolling containers such as lists and can be used for cool parallax animations.

Use profile

BiningX supports both ReactNative and Weex. For Weex, it doesn’t matter if you use Rax or Vue DSL. The following uses Weex as an example to illustrate how to use BindingX.

Access BindingX

Step 1: Install dependencies

Install NPM dependencies.

npm install weex-bindingx --save
Copy the code

Then introduce the BindingX module into the JS code.

import BindingX from weex-bindingx;
Copy the code

Step 2: Write the expression

Select the EventType you need based on your business scenario. For example, to listen for gestures, evenType is pan and scrollOffset, eventType is Scroll.

Based on the interaction, select the property to change and write the corresponding expression. For example, the interaction would be “user swipes 100 units, opacity changes from 1 to 0”. The property is “opacity” and the expression is “1-x/100”.

Step 3: Bind the expression

Based on eventType, Expression, and Property obtained in step 2, call the bind method of the BindingX module to complete the binding. Such as:

let result = BindingX.bind({
    eventType: 'pan'Event type Anchor:'foo', ==> Anchor refers to the event trigger if eventType is"orientation"or"timing"/ / props: [{element: view.ref, ==> Reference or ID expression of the view to be changed:"1-x/100", ==> property:"opacity"==> Attribute to change}]})Copy the code

When the bind method is called, Native starts listening and executes one or more of the expressions you previously bound when a target event (such as a finger swipe, a device direction change, etc.) occurs. The bind method returns a JS object containing a token property that can be used to unbind.

Step 4: Unbind

Call BindingX’s unbind method when appropriate to unbind. For example, when the page is not visible or about to be destroyed.

BindingX.unbind({
    token: result.token,
    eventType: 'pan'
})
Copy the code

Implementation details

The following takes Android as an example to introduce the specific implementation of BindingX from a Native perspective. First, we will sort out the whole process:

1. The front end defines specific view changes declaratively, and each view change process is described by a triplet:

  • Element: Target element.
  • Property: The property to be changed.
  • Expression: expression. Generate abstract syntax trees through tools.

2. Native registers the corresponding event listener according to EventType and saves the mapping; 3. When the specified event occurs, Native consumes all the expressions previously bound, calculates the results, and updates the view according to the results.

The whole process can be described in this diagram:

other

BindingX is actually more powerful than we thought — the architecture diagram above shows transformed Views as the output, but it turns out that BindingX can do more interesting things than just views. Such as:

  • BindingX and Lottie combine. BindingX drive Lottie to achieve animation;
  • BindingX and Weex SVG combine to achieve playful trajectory animation, path following animation, and even morph deformation animation;
  • BindingX and Shader are combined to control shaders with BindingX!
  • .

Weex’s SDK is currently being updated to make it more user-friendly in terms of performance rendering and access, in order to better embody the open source spirit and get more developers to use Weex.