{"id":21731334,"url":"https://github.com/ymm-tech/thresh","last_synced_at":"2025-04-04T17:10:25.040Z","repository":{"id":41260952,"uuid":"325471560","full_name":"ymm-tech/thresh","owner":"ymm-tech","description":"Flutter-based mobile cross-platform dynamic UI framework","archived":false,"fork":false,"pushed_at":"2021-11-17T07:00:48.000Z","size":72801,"stargazers_count":581,"open_issues_count":4,"forks_count":103,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-03-28T16:11:44.546Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ymm-tech.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-30T06:18:06.000Z","updated_at":"2025-03-14T08:55:24.000Z","dependencies_parsed_at":"2022-07-13T13:50:34.907Z","dependency_job_id":null,"html_url":"https://github.com/ymm-tech/thresh","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymm-tech%2Fthresh","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymm-tech%2Fthresh/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymm-tech%2Fthresh/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymm-tech%2Fthresh/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ymm-tech","download_url":"https://codeload.github.com/ymm-tech/thresh/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247217222,"owners_count":20903009,"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":[],"created_at":"2024-11-26T04:24:10.449Z","updated_at":"2025-04-04T17:10:25.022Z","avatar_url":"https://github.com/ymm-tech.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Thresh — 基于JS的Flutter动态化方案\n\n[中文版文档](README.md)|[English Document](https://github.com/ymm-tech/thresh/blob/main/Documentation/README_EN.md)\n\nThresh提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在前端开发中具有原生 APP 体验的服务，是满帮集团开源的一套稳定、高性能的跨端动态化方案。\n\n### 体验包下载地址 [Thresh_v0.0.6.apk](https://github.com/ymm-tech/thresh/tree/main/example/apk/Thresh_v0.0.6.apk)\n\n### 一、主要核心亮点\n\n**1、适用于前端开发，零成本接入（开发语言：JS/TS）** \n\n**2、完善的开发调试面板， 支持HotReload，秒级编译**\n\n**3、页面支持组件级别更新**\n\n### 二、Thresh特性与整体架构\n\nThresh项目推出的初心是为了能提供一种基于Flutter的完全跨端动态化方案，性能能达到甚至优于React Native，再加上其多端渲染一致性以及即将推出的Google Fuchsia系统默认开发语言为Flutter，都表明Thresh未来将会充满想象力。\n\n#### 2.1、 主要特性\n\n- **自定义DSL**，扩展性强，未来会做基于sketch插件原型图自动转换DSL\n- **多端一致性**，拥有统一的渲染引擎skia，较好的跨端兼容性适配\n- **支持Hot Reload**，便于开发调试，秒级编译运行\n- **支持组件级别更新**，极佳的体验性\n- **单端开发**，降低开发成本\n\n#### 2.2、动态化常见思路\n\n- **Flutter编译产物替换**\n\n  Google原本打算在2019年推出Code Push方案，后来放弃了，主要两个原因：违反应用商店的规定和安全方面考虑；但目前android是可以通过产物替换来做到动态化，iOS端则无法做到。\n\n- **组件化搭建**\n\n  通过Dart来定义部分核心通用组件，在平台下发已有的组件列表拼装的页面JSON，端上再通过解析渲染成页面。这种方案能满足轻交互场景，但只能支持有限动态性。\n\n- **自定义Dart转换+动态逻辑映射**\n\n  通过自定义一套Dart规范以及通过转换器生成JSON来做到动态更新，性能损失小，但是逻辑动态性需要提前预埋，且前端开发同学需要一定的学习成本。\n\n- **自定义DSL+依赖JS引擎的动态执行**\n\n  类似于RN/Weex，通过自定义动态化UI描述 + JS引擎的解释运行转换思路，最终构建成页面和执行动态逻辑。这个方案对于前端开发非常友好，零学习成本，但是由于在JS引擎运行，会有一些性能损耗。 \n\n#### 2.3、方案实现与思路\n\n在动态化设计中，DSL 设计尤其重要，考虑极强的逻辑动态性以及兼容同构方案我们选定JS作为开发语言；核心思路是把 Flutter 的页面渲染逻辑中的三棵树中的第一棵，通过JS 来构造。这其中要完成JS与 Flutter 层完成基础组件映射，再通过JSCore引擎来生成UI描述，并传递给Dart层的 UIEngine，UIEngine 把UI描述转换为 Flutter 控件，最终渲染成页面。\n\n  \u003cimg src=\"https://imagecdn.ymm56.com/ymmfile/ps-temporary/1eqpbmu2c.png\" alt=\"image1\" height=\"300\" width=\"610\" /\u003e\n\n动态化Flutter 框架主要由这三部分构成，每一部分都处理不同的逻辑和绑定事件通信来更新渲染页面、事件响应，其核心渲染通信流程：Flutter ⇋ native ⇋ js 。\n\n- **UI层**\n\n  运用JS层定义了与Flutter同功能的基础组件，并对Flutter WidgetTree进行描述，再通过这些组件和API来构造成前端业务页面。\n\n- **Native层**\n\n  1、JS（JSCore/V8）引擎来加载并执行UI层包(xxx业务_js.bundle)，注册被动方法来被JS 调用，如bridge、事件响应、异常上报等。\n\n  2、维护NativeChannel实例，与Flutter建立通道，作为JS 与 Flutter通信的媒介；以及维护UI 线程、任务线程队列。\n\n- **Flutter层**\n\n  维护JavaScript转换为Dart的Engine，并支持缓存，异步更新组件；事件通信以及页面的生命周期管理等。\n\n### 三、接入指南\n\n如果你要在项目中使用 Thresh 提供的 flutter 动态化能力，可以参考以下步骤快速创建一个Thresh 项目。\n\n一个 Thresh项目由 几个部分构成，分别是：业务代码、thresh插件、thresh-js库、与 Native宿主集成。下面将会对代码库、环境接入以及调试一一做出说明。\n\n#### 3.1、环境准备\n\nAndroid 端环境 ：Android Studio  iOS 端：XCode\n\nJS：VSCode + node + npm/yarn\n\nFlutter SDK：**flutter 2.2.2 **【备注：新版本后续会逐步支持 [Flutter环境安装请移步](https://flutter.dev/docs/get-started/install)】\n\n#### 2.2、仓库说明\n\n| 仓库名称        | 地址                                        | 开发语言              | 备注                     |\n| --------------- | ------------------------------------------- | --------------------- | ------------------------ |\n| thresh          | git@github.com:ymm-tech/thresh.git          | java / oc / dart / js | 宿主/native/dart/js-core |\n| thresh-template | git@github.com:ymm-tech/thresh-template.git | js                    | JS 脚手架模板项目        |\n| thresh-cli      | git@github.com:ymm-tech/thresh-cli.git      | js                    | JS 脚手架                |\n\n#### 3.3、集成流程与调试\n\n接入比较简单，[请参考开发手册](DEVELOPER_GUIDE.md)\n\n### 四、进阶指南\n\n* [使用Javascript构建Flutter应用程序的原理](Documentation/使用Javascript构建Flutter应用程序的原理.md)\n\n* [基于Native的三端通信机制](Documentation/基于Native的三端通信机制.md)\n\n* [API-Flutter](Documentation/Apis/Flutter.md)\n\n* [API-JS通信与工具](Documentation/Apis/JS通信与工具.md)\n\n* [API-JS页面渲染](Documentation/Apis/JS页面渲染.md)\n\n* [API-Native](Documentation/Apis/Native.md)\n\n* [打包说明](Documentation/打包说明.md)\n\n* [基础组件](Documentation/基础组件/组件说明.md) 以下为基础组件文档：\n\n  | [Container](Documentation/基础组件/Container.md)             | [AppBar](Documentation/基础组件/AppBar.md)         | [Page](Documentation/基础组件/Page.md)                       | [Button](Documentation/基础组件/Button.md) |\n  | ------------------------------------------------------------ | -------------------------------------------------- | ------------------------------------------------------------ | ------------------------------------------ |\n  | [Checkbox](Documentation/基础组件/Checkbox.md)               | [Icon](Documentation/基础组件/Icon.md)             | [Image](Documentation/基础组件/Image.md)                     | [Input](Documentation/基础组件/Input.md)   |\n  | [ListView](Documentation/基础组件/ListView.md)               | [NativeView](Documentation/基础组件/NativeView.md) | [NestScrollView](Documentation/基础组件/NestScrollView.md)   | [Radio](Documentation/基础组件/Radio.md)   |\n  | [Refresh](Documentation/基础组件/Refresh.md)                 | [ScrollView](Documentation/基础组件/ScrollView.md) | [SwipeActionsView](Documentation/基础组件/SwipeActionsView.md) | [Text](Documentation/基础组件/Text.md)     |\n  | [DragableScrollView](Documentation/基础组件/DragableScrollView.md) | [Picker](Documentation/基础组件/Picker.md)         | [Switch](Documentation/基础组件/Switch.md)                   |                                            |\n\n### 五、接入案例\n\n以下是本站收集的使用 Thresh 编写的应用，供大家参观学习。\n如果你想提交作品，或是要求修改、删除这里列出的应用，请提出 [PR](www.ymm56.com)。\n\n \u003cimg src=\"https://imagecdn.ymm56.com/ymmfile/ps-temporary/1eqpbmu7c.png\" alt=\"运满满\" style=\"zoom:67%;\" /\u003e                                                       \u003cimg src=\"https://imagecdn.ymm56.com/ymmfile/ps-temporary/1eqpbmu7c.png\" alt=\"运满满\" style=\"zoom:67%;\" /\u003e\n\n### 运满满司机端                              运满满货主端\n\n手机配货神器。                                                     手机配货神器。\n\n  -  [iOS](https://apps.apple.com/us/app/apple-store/id766046464)  - [Android](https://imagecdn.ymm56.com/ymmfile/app-apk-biz/73de2567-2621-4935-855b-afc97d7a8733.apk)                                          [iOS](https://apps.apple.com/us/app/apple-store/id766046464)  - [Android](https://imagecdn.ymm56.com/ymmfile/app-apk-biz/73de2567-2621-4935-855b-afc97d7a8733.apk)\n\n##### 应用核心场景【总日均PV超千万，js错误率低于十万分之一】\n\n  \u003cimg src=\"https://imagecdn.ymm56.com/ymmfile/ps-temporary/1eqpbmu46.png\" alt=\"Thresh\" style=\"zoom: 50%;\" /\u003e\n\n### 六、联系我们\n\n如果你在使用过程中遇到问题，或者有好的建议，欢迎给我们提。详细说明请移步 [贡献指南](CONTRIBUTING.md)\n\n对Thresh有兴趣的小伙伴，可以加群交流 钉钉群：【钉钉群号：31835161】\n\n​    \u003cimg src=\"https://imagecdn.ymm56.com/ymmfile/ps-temporary/1eqpbmu7e.jpg\" alt=\"Thresh\" height=\"300\" width=\"240\" /\u003e\n\n### 七、项目作者\n\n* 徐维顺 - 核心开发者 - [SeaShrimper](https://github.com/SeaShrimper)\n* 徐亮 - 核心开发者 - [TroyXL](https://github.com/TroyXL)\n* 章伟 - 核心开发者 - [snowfall]( https://github.com/snowfall)\n* 汤靖咚 - 核心开发者 - [JD-Tang](https://github.com/JD-Tang)\n* 张政 - 核心开发者 - [long831302](https://github.com/long8313002/)\n* 茆俊龙 - 主要贡献者 - [maojunlong](https://github.com/maojunlong)\n\n### 八、开源协议\n\nThresh遵循[MIT](https://opensource.org/licenses/MIT)开源许可证协议。\n\n### 九、致谢\n\n参考以及使用的开源项目\n\n| 项目名称                                                | 开源协议                                                     | 说明              |\n| ------------------------------------------------------- | ------------------------------------------------------------ | ----------------- |\n| [Flutter][https://github.com/flutter/flutter.git]       | [MIT](http://opensource.org/licenses/MIT)                    | dart sdk engine等 |\n| [Maven][6]                                              | [Apache License](https://github.com/apache/maven/blob/master/LICENSE) | 依赖库            |\n| [ReactNative][https://github.com/facebook/react-native] | [MIT](http://opensource.org/licenses/MIT)                    | jsc加载等         |\n| [J2V8][https://github.com/eclipsesource/J2V8.git]       | [Eclipse Public License - v 1.0](https://www.eclipse.org/legal/epl-v10.html) | Android v8        |","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fymm-tech%2Fthresh","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fymm-tech%2Fthresh","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fymm-tech%2Fthresh/lists"}