{"id":13725965,"url":"https://github.com/alibaba/bindingx","last_synced_at":"2025-05-15T09:07:03.381Z","repository":{"id":45708063,"uuid":"120870238","full_name":"alibaba/bindingx","owner":"alibaba","description":":rocket: Bind actions to effects.","archived":false,"fork":false,"pushed_at":"2023-03-06T13:25:39.000Z","size":11806,"stargazers_count":1270,"open_issues_count":26,"forks_count":106,"subscribers_count":53,"default_branch":"master","last_synced_at":"2025-04-14T15:01:40.626Z","etag":null,"topics":["android","design","interactive","ios","react-native","ui","weex"],"latest_commit_sha":null,"homepage":"https://alibaba.github.io/bindingx/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alibaba.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-02-09T07:05:40.000Z","updated_at":"2025-04-07T06:54:22.000Z","dependencies_parsed_at":"2024-06-18T13:57:13.257Z","dependency_job_id":null,"html_url":"https://github.com/alibaba/bindingx","commit_stats":{"total_commits":374,"total_committers":12,"mean_commits":"31.166666666666668","dds":"0.44919786096256686","last_synced_commit":"a783754628ab794949d5dbf607f6e899c50cfcd2"},"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba%2Fbindingx","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba%2Fbindingx/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba%2Fbindingx/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alibaba%2Fbindingx/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alibaba","download_url":"https://codeload.github.com/alibaba/bindingx/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254310515,"owners_count":22049469,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","design","interactive","ios","react-native","ui","weex"],"created_at":"2024-08-03T01:02:44.200Z","updated_at":"2025-05-15T09:06:58.362Z","avatar_url":"https://github.com/alibaba.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\n![BindingX_250.png](https://img.alicdn.com/tfs/TB1ZG58bb1YBuNjSszeXXablFXa-400-400.png_250x250.jpg \"\")\n\n# BindingX\n\n[![Join the chat at https://gitter.im/alibaba/bindingx](https://badges.gitter.im/alibaba/bindingx.svg)](https://gitter.im/alibaba/bindingx?utm_source=badge\u0026utm_medium=badge\u0026utm_campaign=pr-badge\u0026utm_content=badge)\n\n![image | left](https://img.shields.io/badge/PRs-welcome-brightgreen.svg \"\")\n![image | left](https://img.shields.io/badge/license-Apache--2.0-brightgreen.svg \"\")\n[![CircleCI](https://circleci.com/gh/alibaba/bindingx/tree/master.svg?style=svg)](https://circleci.com/gh/alibaba/bindingx/tree/master)\n\n* [Read Documentation](https://alibaba.github.io/bindingx/guide/introduce)\n* [中文](https://github.com/alibaba/bindingx/blob/master/README_cn.md)\n\nA new interaction way based on `weex` \u0026 `react native` \u0026 `html5` .\n\nIt provides a way called `expression binding` for handling complex user interaction with views at 60 FPS in React Native and weex :tada: :tada: :tada: .\n\n# Description\n\nThe async nature of the js-native bridge in react native and weex incurs an inherent performance penalty. This traditionally prevents JavaScript code from running at high framerates.\n\nWe exploreed and implemented a completely new approach to solve the problem. It's main idea is translate the user interaction into expression, and transfer those expressions into native environment. When events occurs (events such as user gesture), all computing task is running on the native side, NO redundant js-bridge calls any more. [Read More](https://alibaba.github.io/bindingx/guide/introduce)\n\n# Glance\n\nBelow are some examples which is using bindingx. You can get more examples by running our playground app. Or you can write your own example use our [online playground](https://alibaba.github.io/bindingx/playground), have fun:)\n\n\u003cdiv align=\"center\"\u003e\n    \u003cimg style=\"margin-right:10px\" src=\"https://gw.alicdn.com/tfs/TB1fES5bhGYBuNjy0FnXXX5lpXa-320-563.gif\" width = \"200\" height = \"350\"/\u003e\n    \u003cimg style=\"margin-right:10px\" src=\"https://gw.alicdn.com/tfs/TB1hOaKbbGYBuNjy0FoXXciBFXa-320-563.gif\" width = \"200\" height = \"350\"/\u003e\n    \u003cimg style=\"margin-right:10px\" src=\"https://gw.alicdn.com/tfs/TB1LCmUbkyWBuNjy0FpXXassXXa-320-563.gif\" width = \"200\" height = \"350\"/\u003e\n    \u003cimg src=\"https://gw.alicdn.com/tfs/TB1FRGZbeuSBuNjy1XcXXcYjFXa-320-563.gif\" width = \"200\" height = \"350\"/\u003e\n\u003c/div\u003e\n\n# Demo examples\n  1. pan gesture: [rax](https://jsplayground.taobao.org/raxplayground/34ceb3e5-8927-4e0c-a282-2dd37c9d7b74)  [vue](https://jsplayground.taobao.org/vueplayground/1518d8ac-4403-414f-ba83-616eb8b77dc6)  [rn](https://github.com/alibaba/bindingx/blob/master/react-native/example/src/AnimatedBall.js)\n  2. timing: [rax](https://jsplayground.taobao.org/raxplayground/31211efb-d643-4cd0-8e9e-46b0c29ddd50)  [vue](https://jsplayground.taobao.org/vueplayground/6a016074-225c-461e-bfa7-b73b8336ea3d)  [rn](https://github.com/alibaba/bindingx/blob/master/react-native/example/src/TimingDemo.js)\n  3. scroll: [rax](https://jsplayground.taobao.org/raxplayground/8e3b0234-f218-41e2-b146-db76a00e4096)  [vue](https://jsplayground.taobao.org/vueplayground/0fe39539-f08c-4be0-a589-499be32f6351)  [rn](https://github.com/alibaba/bindingx/blob/master/react-native/example/src/ScrollViewDemo.js)\n  4. orientation: [rax](https://jsplayground.taobao.org/raxplayground/1d3ed4e1-506b-4308-bffa-ecf241a0cc70)  [vue](https://jsplayground.taobao.org/vueplayground/18a9115c-c85b-4a12-a1b2-2b0c401a6eb6)  [rn](https://github.com/alibaba/bindingx/blob/master/react-native/example/src/OrientationDemo.js)\n\n# RealLife examples\n\n  1. Draggable ball: [rax](https://jsplayground.taobao.org/raxplayground/3ec5c8ef-42ff-47fb-9791-4bd7c257b4a7)  [vue](https://jsplayground.taobao.org/vueplayground/de9c7e84-2dc0-4873-8bb0-ce899e64f6ab)\n  2. Swipeable card: [rax](https://jsplayground.taobao.org/raxplayground/7ac0f12b-72e7-4aa5-b398-693ba7b34cd6)  [vue](https://jsplayground.taobao.org/vueplayground/9e4899f6-0fe1-4ffa-86ec-b9c28d22bae9)\n  3. Expandable menu: [rax](https://jsplayground.taobao.org/raxplayground/3f93ffd1-3028-4a9e-9e94-0188973bc44b)  [vue](https://jsplayground.taobao.org/vueplayground/3a388c50-18f8-45d3-b1cf-3f5f0c226c19)\n  4. Slide layout: [rax](https://jsplayground.taobao.org/raxplayground/34e0eae9-ca2d-481f-94b5-239732651eeb)  [vue](https://jsplayground.taobao.org/vueplayground/925802dc-c7c9-4309-b1e1-f83458bb39c4)\n  5. Circle menu: [rax](https://jsplayground.taobao.org/raxplayground/0b2fa94c-b107-422f-8c2c-60481af89d31)  [vue](https://jsplayground.taobao.org/vueplayground/42ffd6b2-9ff6-4161-8224-34779b3af7e6)\n  6. Navigation with Tab: [rax](https://jsplayground.taobao.org/raxplayground/b8583160-f63f-4ab6-9f98-af7a3da283f8)  [vue](https://jsplayground.taobao.org/vueplayground/ccef74e2-00ba-4a30-b8bc-d354b6dfc11e)\n  7. Ripple effect: [rax](https://jsplayground.taobao.org/raxplayground/c4a295f5-bec2-485e-8e05-de80c7274191)  [vue](https://jsplayground.taobao.org/vueplayground/2741ac64-3956-4dc9-ad61-d59b5768d97f)\n\nNote: Weex has two DSL (rax \u0026 vue). The link is jumping to JS-Playground. But now our JS-Playground not support React-Native code, so it is jumping to plain source code.\n\n\u003e You can also contribute your examples to us by open an `pull request`. And we will display your example here if it's cool enough.\n\n# Feature\n\n* Complex but fluid user interaction\n* Powerful expression parsing engine\n* Plenty of easing functions\n\n\n# Installation\n\n### Weex\n\n*Prerequisites*: integrate [weex sdk](https://github.com/apache/incubator-weex) to your application.\n\n##### Android\n\nWe provide two ways to integrate bindingx plugin.\n\n 1. manual integration\n\n    * add dependencies in your application's build.gradle\n\n        ```\n        implementation 'com.alibaba.android:bindingx-core:1.0.1'\n        implementation 'com.alibaba.android:bindingx_weex_plugin:1.0.1'\n        ```\n\n    * register bindingx plugin in code. (`Application#onCreate`, for example)\n\n        ```\n        BindingX.register()\n        ```\n\n 2. use weex plugin loader\n\n    * add dependencies in your application's build.gradle\n\n      ```\n      implementation 'com.alibaba.android:bindingx-core:1.0.1'\n      implementation 'com.alibaba.android:bindingx_weex_plugin:1.0.1'\n      implementation 'org.weex.plugin:plugin-loader:1.0.0'\n      ```\n\n    * register bindingx plugin use plugin loader.\n\n      ```\n      WeexPluginContainer.loadAll(getApplicationContext());\n      ```\n\n#### iOS\n\nadd dependencies in your application's `Podfile`\n\n```\n  pod 'BindingX', '~\u003e 1.0.3'\n```\n\nmodule will be registed automatically by WeexPluginLoader, also you can use weex standard module register api `[WXSDKEngine registerModule:@\"bindingx\" withClass:NSClassFromString(@\"EBWXModule\")]`.\n\n### React Native\n\n*Prerequisites*: integrate [react native](https://facebook.github.io/react-native/) to your application.\n\n1. install dependencies: `npm install react-native-bindingx --save`;\n2. link library: `react-native link react-native-bindingx`;\n\n#### Android \n\nadd `bindingx-core` library to `build.gradle` manually:\n\n  ```\n  implementation 'com.alibaba.android:bindingx-core:{latest_version}'\n  ```  \n\n1. migrate to [android gradle plugin 3.0](https://developer.android.com/studio/build/gradle-plugin-3-0-0-migration);\n2. use `implementation` instead of `compile` in your build.gradle;\n3. add google repository to your root build.gradle:\n\n  ```\n  repositories {\n    google()\n    ...\n  }\n  ```\n\n# Who is using\n\n| taobao | tmall | youku | fliggy |\n| :--- | :--- | :--- | :--- |\n| ![Taobao](https://img.alicdn.com/tfs/TB1N.thdzuhSKJjSspjXXci8VXa-256-256.png_60x60.jpg \"\") | ![tmall](https://img.alicdn.com/tps/TB15a7wOFXXXXcgXVXXXXXXXXXX-256-256.png_60x60.jpg \"\") | ![youku](https://img.alicdn.com/tfs/TB1jjyxhwoQMeJjy1XaXXcSsFXa-256-256.png_60x60.jpg \"\") | ![fliggy](https://img.alicdn.com/tfs/TB11rPqRXXXXXc_apXXXXXXXXXX-256-256.png_60x60.jpg \"\") |\n\n\n## Contributing\n* Any PR is welcome\n* Dingding chat group.\n\n\n![Snip20180115_20.png | left | 229x229](https://img.alicdn.com/tfs/TB1suFjbBiE3KVjSZFMXXbQhVXa-300-312.jpg \"\")\n\n## License\n```\nCopyright 2018 Alibaba Group\n\nLicensed under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License.\nYou may obtain a copy of the License at\n\n    http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software\ndistributed under the License is distributed on an \"AS IS\" BASIS,\nWITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\nSee the License for the specific language governing permissions and\nlimitations under the License.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falibaba%2Fbindingx","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falibaba%2Fbindingx","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falibaba%2Fbindingx/lists"}