Thresh provides a simple and efficient application development framework and rich components and APIs to help developers have native APP experience services in front-end development. It is a set of stable and high-performance cross-end dynamic solutions open sourced by Manbang Group .
Demo Download Url Thresh_v0.0.4.apk
1、Suitable for front-end development, zero-cost access (Develop language: JS/TS) .
2、Complete development and debugging panel, support HotReload, second-level compilation .
3、Supports component level updates of Page .
The original intention of the Thresh project was to provide a completely cross-terminal dynamic solution based on Flutter, with performance reaching or even better than React Native, coupled with its multi-terminal rendering consistency and the upcoming Google Fuchsia system default development language is Flutter , shows that Thresh will be full of imagination in the future.
- Custom DSL, strong scalability, in the future, it will automatically convert DSL based on the sketch plug-in prototype diagram
- Multi-terminal consistency, with a unified rendering engine skia, better cross-terminal compatibility adaptation
- Support Hot Reload, easy to develop and debug,Compile and run in seconds
- Support component level update, excellent experience
- Single-ended development,reduce development costs
-
Flutter compilation product replacement
Google originally planned to launch the Code Push solution in 2019, but later gave up. There are two main reasons: violation of app store regulations and security considerations; but currently Android can be dynamic through product replacement, but iOS cannot. .
-
Component construction
Dart is used to define part of the core common components, the JSON page assembled by the existing component list is issued on the platform, and the page is parsed and rendered on the end. This solution can meet light interaction scenarios, but can only support limited dynamics.
-
Custom Dart conversion + dynamic logic mapping
By customizing a set of Dart specifications and generating JSON through a converter to achieve dynamic updates, the performance loss is small, but the logic dynamics need to be embedded in advance, and front-end development students need a certain learning cost.
-
Custom DSL+ relies on dynamic execution of JS engine
Similar to RN/Weex, through custom dynamic UI description + JS engine interpretation operation conversion ideas, and finally build pages and execute dynamic logic. This solution is very friendly to front-end development, with zero learning cost, but due to running on the JS engine, there will be some performance loss.
In dynamic design, DSL design is particularly important. Considering the extremely strong logic dynamics and compatible isomorphic solutions, we choose JS as the development language; the core idea is to use the first of the three trees in the page rendering logic of Flutter , Constructed by JS. Among them, the JS and Flutter layer are required to complete the basic component mapping, and then the UI description is generated through the JSCore engine and passed to the UIEngine of the Dart layer. The UIEngine converts the UI description into Flutter controls, and finally renders the page.
The dynamic Flutter framework is mainly composed of these three parts. Each part handles different logic and binding event communication to update the rendering page and event response. Its core rendering communication process: Flutter ⇋ native ⇋ js.
-
UI LAYER
Use the JS layer to define basic components with the same functions as Flutter, and describe the Flutter WidgetTree, and then use these components and APIs to construct front-end business pages.
-
Native LAYER
-
JS (JSCore/V8) engine loads and executes the UI layer package (xxx business_js.bundle), and registers passive methods to be called by JS, such as bridge, event response, exception report, etc.
-
Maintain the NativeChannel instance, establish a channel with Flutter, as the communication medium between JS and Flutter; and maintain the UI thread and task thread queue.
-
-
Flutter LAYER
Maintain JavaScript converted to Dart Engine, and support caching, asynchronous update of components; event communication and page life cycle management, etc.
If you want to use the flutter dynamic capability provided by Thresh in your project, you can refer to the following steps to quickly create a Thresh project.
A Thresh project consists of several parts: business code, thresh plugin, thresh-js library, and integration with Native host. The following will explain the code base, environment access and debugging one by one.
Android side environment: Android Studio iOS side: XCode
JS: VSCode + node + npm/yarn
Flutter SDK: flutter1.9.1-hotfix.6 [Note: The new version will be gradually supported in the future Flutter environment installation please move]
| Name | Address | Develop language | Description |
|---|---|---|---|
| thresh | git@github.com:ymm-tech/thresh.git | java / oc / dart / js | Host/native/dart/js-core |
| thresh-template | git@github.com:ymm-tech/thresh-template.git | js | Thresh Project Template |
| thresh-cli | git@github.com:ymm-tech/thresh-cli.git | js | Thresh command line tools |
// 1、Enter the root directory of thresh and execute the following command line
# flutter clean
# flutter packages get
# flutter packages upgrade
// 2、Enter the example root directory and execute the following command line
# flutter clean
# flutter packages get
# flutter packages upgrade
# flutter run
// 3、After successful compilation and installation, manually open the thresh app, as shown below:
First load the local bundle.js package, and directly click the Start local bundle button to open the demo page in the figure above.
Sandbox debugging mode description: 1. Start the JS server, the port number defaults to 12345 2. For real machine debugging, when the default address is 127.0.0.1, you need to connect to the proxy of the computer or enter the IP of the JS server (that is, the computer) directly in the LAN environment (such as 192.168.0.106)
Enter the project root directory,
-
Execute the
yarn installcommand to install the dependent files; [If the installation fails or other errors occur, you can try to delete the default yarn.lock file and re-execute the install command] -
Executing the
yarn devcommand will start the project and enter the local development mode.
The local http service will be started in development mode. The default service port is 12345, and the port number can be modified in the root directory /webpack/config.js. If you are interested in js configuration and packaging, please refer to Packaging Instructions.
TIP
It is not recommended to modify the default port number, otherwise the corresponding port number of the debugging host project needs to be modified synchronously.
After the project is started, the page cannot be viewed in the browser, and it needs to be viewed and debugged in the debugging host project.
If you need to sandbox the local code in the actual host project, please execute the yarn prod command, which will start the local development mode in a way that can be run on the actual host. The process.env.NODE_ENV corresponding to the two startup commands are development and production respectively.
#Open the JS code warehouse [Demo example project as an example: dynamic_flutter_demo], and enter the root directory to open the command line, execute the following command
#[Note: When installing for the first time, it is best to manually delete the yarn.lock file and install it]
ManbangMacBook-Pro:dynamic_flutter_demo Manbang$ yarn install
ManbangMacBook-Pro:dynamic_flutter_demo Manbang$ yarn prod
yarn run v1.22.4
warning package.json: No license field
$ cross-env NODE_ENV=production webpack-dev-server --config webpack/webpack.config.js
ℹ ｢wds｣: Project is running at http://0.0.0.0:12345/webpack-dev-server/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /Users/Manbang/Documents/YMM/code_flutter/dynamic_flutter_demo/src
ℹ ｢wdm｣: Hash: 014ee6cacc21626073f2
Version: webpack 4.44.2
Time: 5799ms
Built at: 2020-10-26 3:33:35 PM
Asset Size Chunks Chunk Names
/assets/test_image.png 35.6 KiB [emitted]
bundle.js 516 KiB 0 [emitted] main
Entrypoint main = bundle.js
[0] ./src/index.ts 1.62 KiB {0} [built]
[1] ./node_modules/@babel/runtime-corejs3/helpers/interopRequireDefault.js 147 bytes {0} [built]
[2] ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/concat.js 64 bytes {0} [built]
[3] ./node_modules/core-js-pure/stable/instance/concat.js 76 bytes {0} [built]
[50] ./node_modules/@babel/runtime-corejs3/core-js-stable/instance/for-each.js 66 bytes {0} [built]
[51] ./node_modules/core-js-pure/stable/instance/for-each.js 529 bytes {0} [built]
[89] ./node_modules/@babel/runtime-corejs3/core-js-stable/object/define-property.js 71 bytes {0} [built]
[90] ./node_modules/core-js-pure/stable/object/define-property.js 83 bytes {0} [built]
[93] ./node_modules/thresh-js/index.ts 2.49 KiB {0} [built]
[94] ./node_modules/thresh-js/src/core/dynamicFlutter.ts 19.6 KiB {0} [built]
[164] ./node_modules/thresh-js/src/manager/BridgeManager.ts 9.83 KiB {0} [built]
[202] ./node_modules/thresh-js/src/manager/UtilManager.ts 11 KiB {0} [built]
[203] ./node_modules/thresh-js/src/manager/RenderManager.ts 18.8 KiB {0} [built]
[268] ./src/config.ts 7.24 KiB {0} [built]
[315] ./src/pages/homePage.tsx 7.1 KiB {0} [built]
+ 301 hidden modules
ℹ ｢wdm｣: Compiled successfully.
#So far the JS server started successfully！！！When you see the Thresh Demos page and it is successful as shown in the figure above, if there is an exception such as the local server, it should be due to other reasons such as the failure of the proxy connection.
-
Hot Reload
The current business development mode supports hot reload. When js changes, save it in real time and recompile it, and click the reload button on the host side to reload; the debugging tool provides logging tools, reloading, etc., which records the full link operation log for convenience Development and debugging.
-
JS debugging
JS direct debugging currently only supports mac + simulator + safari browser, how to debug can refer to the steps on the Internet.
Like most frameworks, Thresh's js-side framework also has its own scaffolding tool. Through the scaffolding tool, a Thresh js business project can be created quickly and easily. The specific process is as follows: (Take yarn as an example. If yarn is not installed, replace it with npm Equivalent command)
yarn global add thresh-js-cli
ManbangMacBook-Pro:thresh_test_demo Manbang$ yarn global add thresh-js-cli
yarn global v1.22.4
[1/4] 🔍 Resolving packages...
[2/4] 🚚 Fetching packages...
[3/4] 🔗 Linking dependencies...
[4/4] 🔨 Building fresh packages...
success Installed "thresh-js-cli@1.0.0" with binaries:
- thresh-cli
✨ Done in 1.34s.
You can create a new one by executing the thresh-cli create yourAppName command in the target directory, such as: thresh-cli create TreshTest1, and related dependencies will be automatically installed when the project is created.
TIP
For the project created by the
thresh-cli createcommand, the project name will also be used as the name field in package.json, and this field will be used as the module name of the project in the host project. Therefore, if the project name is not the module name, you need to modify the name field in package.json by yourself.
ManbangMacBook-Pro: thresh_test_demo Manbang$ thresh-cli create ThreshTest1
Use ThreshTest1 as the project/module name? (y/N) y
Create project successfully
Repeat the above steps to start the local JS server, and now you can see that the JS server is successfully opened.
After successfully creating the flutter project by yourself and configuring the yaml source, please add dependencies in the pubspec.yaml file on the flutter side:
thresh: "^0.0.4" or Warehouse dependency (recommended warehouse dependency)
Android host code configuration
1. Open the created project
Application class#onCreate: Initialize engine
ThreshFlutter.startInitialization(this);
2. Create ThreshDemoActivity and inherit ThreshActivity
The implementation code can directly refer to the code in the example of the thresh warehouse branch
iOS host code configuration
1. Set the flutterInDebugMode field in userDefaults
2. Use ThreshViewController directly or create a VC inherited from ThreshViewController
The following example will appear
At this point, congratulations on the successful operation of your project!
Take Demo as an example for local debugging.
Run the host AppDemo project (currently the ThreshDemo project is the host demo project), after startup, it will directly connect to http://127.0.0.1:12345/ to load and execute the js script, thereby displaying the pages in ThreshDemo. The page display effect is as follows:
After cloning ThreshDemo to the local, enter the root directory and execute the yarn install yarn dev command in turn to start the local debugging of js demo. The service is started at http://127.0.0.1:12345/.
After the dependencies are added, you can directly refer to the article Apis/Flutter for Thresh access.
-
Principles of building Flutter applications using Javascript
-
Basic Components The following is the basic component documents:
Container AppBar Page Button Checkbox Icon Image Input ListView NativeView NestScrollView Radio Refresh ScrollView SwipeActionsView Text
The following are the applications compiled by Thresh collected on this site for everyone to visit and learn. If you want to submit a work, or request to modify or delete the applications listed here, please submit [PR]
Mobile phone distribution artifact. Mobile phone distribution artifact.
Application core scenario [Total daily average PV exceeds 10 million, js error rate is less than one in 100,000]
If you encounter problems during use, or have good suggestions, please feel free to send us. For detailed instructions, please refer to Contribution Guide
Friends who are interested in Thresh can join the group for communication. Dingding group:【id：31835161】
- Weishun.xu - Core developer - SeaShrimper
- Liang.xu - Core developer - TroyXL
- Wei.zhang - Core developer - snowfall
- Jingdong.tang - Core developer - JD-Tang
- Junking.mao - Core developer - maojunlong
Thresh follows the MIT open source license agreement.
Reference and open source projects used
| Project | Open source agreement | Description |
|---|---|---|
| [Flutter][https://github.com/flutter/flutter.git] | MIT | dart sdk engine.etc |
| [Maven][6] | Apache License | Dependent library |
| [ReactNative][https://github.com/facebook/react-native] | MIT | Runtime mechanism |
| [J2V8][https://github.com/eclipsesource/J2V8.git] | Eclipse Public License - v 1.0 | Android v8 |