preface

In early March, Alibaba opened source a set of rich interactive solution “BindingX” based on Weex and React Native. It provides a mechanism called “Expression Binding” that allows complex interactions such as gestures to run smoothly at 60fps on Weex and React Native without causing stutter, thus leading to a better user experience.

background

That sounds like a big wheel, so why build it?

It goes back to the source, what problem he solved.

As we know, Weex and React Native have the same three-layer structure: JS layer, Native layer and Bridge layer. The Native layer is responsible for visual rendering and event collection, while the JS layer is responsible for visual control and event processing. Bridge layer is the communication Bridge between JS layer and Native layer, responsible for instruction “translation”. Take Weex as an example:

In order to make the Native layer do some complex interactive operations, the JS layer needs to constantly process the events collected from the Native layer and make “timely” response. If the response is “not timely”, the visual lag will be caused.

What is “timely”?

We often say that the 60fps frame rate is the base for smoothness, which means that an effective refresh needs to be completed in 1/60 of a second. If the JS layer completes more than 16.67ms from event receiving, processing and feedback to Native drawing a new view, there will be a “visual lag”.

In addition, even if each update can be completely controlled within 16.67ms, a large number of communication operations will consume too much CPU, which increases the risk of Crash

Without breaking through this bottleneck, it will be difficult for such technologies to reach new heights.

BindingX solves this problem.

The principle of

The “Expression Binding” proposed by BindingX transfers the specific gesture control behavior to Native in the form of “Expression”, monitors the gesture operation on the “bound element” and outputs the offset of horizontal “X” and vertical “Y” in the process. Therefore, we can send “X, Y “is used as an input parameter of the expression” f(x), f(y) “to” bind change “the style of a target element.

All these operations are completed independently in Native layer, which greatly reduces the pressure of JS layer and Bridge layer.

“No Binding Mode”

Binding Mode

expression

An expression is a string of numbers, operators, variables, etc., to obtain meaningful values. For example, x\*3+10 is an expression, and when x is assigned, the whole expression has a definite result. Through the expression, we can describe a specific interaction behavior. For example, we want the transparency to change from 1 to 0.5 when x changes from 0 to 100. Then the expression can be described as: F (alpha) = 1-(x/100)*0.5 could also be f(alpha) = 1-x/200 except the first expression is more straightforward.

Here’s a simple example.

/ * in code * /
bindingx.bind({
      anchor:foo_view.ref  ,                    //==> Event trigger
      eventType:'pan'.//==> Event type
      props: [
          {
            element:foo_view.ref,               //==> The reference or ID of the view to be changed
            property:'transform.translateX'.//==> Attribute to be changed
            expression:'x+0'                    / / = = > expression}}]);Copy the code

As simple as that, a few lines of code can bind foo_view to allow the view to interact with the gesture. Of course there are complicated ones, but they’re all built up by these little interactions.

In addition to the basic four operations, but also support ternary operators, mathematical functions and other advanced syntax, basic can meet most of the scene.

The event type

In addition to gestures, BindingX also supports “list scroll”, “animation Timing” and even “gyroscopic orientation”. Each event type is used in roughly the same way, with some points to note. Please refer to the BindingX official documentation for details.

Do it

How to experience it quickly?

Keep up with me

playground

Though the official also provides a testing ground for https://alibaba.github.io/bindingx/playground, grammar are Rax but DSL, and many foreign Vue Weex version, we can’t online editing view effect, Only ali-department App “such as Taobao, Xianyu, Feizhu” can be used to scan the code to experience the effect.

None of this is what we want.

Of course there is always a way.

Clone the official BindingX code directly to the Vue version of Weex Playground.

bindingx/weex/playground/[ios|android]
Copy the code

Ios and Android choose a tool to install on your phone. I won’t explain it here, but I won’t ask Google or leave a comment below.

Use dotwe.org/vue/ to edit online and scan the code to see the effect.

Share a few Vue versions of the demo.

Dotwe.org/vue/e50f76a…

Dotwe.org/vue/2dff486…

Dotwe.org/vue/6499843…

Dotwe.org/vue/cd942c4…

Strictly select Demo to introduce BindingX

This is a long time ago a small Demo, interested in can star about github.com/zwwill/yanx…

The following is my small trial based on a strictly selected Demo.

To upgrade the ios platform

To use the BindingX plug-in, you must have your platform support. The solution is simple, just update Platforms /ios/Podfile.

source '[email protected]/CocoaPods/Specs.git'
platform :ios, '8.0'                                    # 8.0 lowest
#inhibit_all_warnings!

def common
	pod 'WeexSDK'.'0.17.0'                         Upgrade to 0.17.0
	pod 'Weexplugin', :path=>'./Weexplugin/'
    pod 'WXDevtool'
    pod 'SDWebImage'.'3.7.5'
    pod 'SocketRocket'.'0.4.2'
    pod 'BindingX'                                     # increase BindingX
end

target 'WeexDemo' do
    common
end

target 'WeexUITestDemo' do
    common
end

Copy the code

Then run pod Install once to install it successfully. If an error occurs, press the prompt to fix it.

A profound

Vue is introduced in a different way than Rax, requiring the weex.RequiRemodule () API.

<template>
    <div class="wrapper">
        <image ref="headerBg" resize="cover" src="http://cdn.zwwill.com/yanxuan/imgs/bg5.png"></image>
        <scroller ref="contentScroller">
            <div>
                <! -- Omit non-critical code -->
            </div>
            <div class="fbs">
                <! -- Omit non-critical code -->
            </div>
        </scroller>
    </div>
</template>

<script>
    const binding = weex.requireModule('bindingx');    / / introduce bindingx
    export default {
        mounted(){
            this.headerBgBinding();
        },
        beforeDestroy(){
            this.headerBgBindingDestory();
        },
        methods: {
            headerBgBinding(){
                let self = this,
                    scroller = self.$refs.contentScroller.ref,
                    headerBg = self.$refs.headerBg.ref;
                    
                let bindingResult = binding && binding.bind({
                    eventType:'scroll'.anchor:scroller,
                    props:[
                        {
                            element:headerBg,
                            property:'transform.scale'.expression: {origin:'y<0? (1-y/500):(1+y/500)'}}, {element:headerBg,
                            property:'transform.translateY'.expression: {origin:'-y/2'}}},function(e){}); self.gesToken = bindingResult.token; } headerBgBindingDestory(){let self = this;
                if(self.gesToken ! =0) {
                    binding.unbind({
                      eventType:'scroll'.token:self.gesToken
                    })
                    self.gesToken = 0; }}}}</script>
Copy the code

The result is the most common profile page, with the title background resized with scrolling events.

Effect diagram cdn.zwwill.com/yanxuan/res…

Write in the last

Weex is enhanced by BindingX. Higher efficiency! Can be more stable! At the same time, open source GCanvas is also a magic tool.

Recently, heavy work, overnight writing articles, if found defects in the article, please understand!

A link to the

  • Github.com/zwwill/yanx…
  • alibaba.github.io/bindingx/
  • Dotwe.org/vue/e50f76a…
  • Dotwe.org/vue/2dff486…
  • Dotwe.org/vue/6499843…
  • Dotwe.org/vue/cd942c4…

Author: Kiba Zwwill First address: github.com/zwwill/blog…