In order to improve the flexibility of App and quickly solve the changing business requirements, developers have explored various solutions, such as PhoneGap, React Native,Weex, etc., but there is no good solution for Flutter ecology. In the future, Flutter will be developed cross-side based on Flutter. If Flutter breaks the release cycle, business requirements can be fulfilled without release and performance experience can be compatible, which will undoubtedly respond to business requirements more quickly. Therefore, we need to explore the dynamics of Flutter ecology.
Learning from the dynamic solutions on Android and Ios, we also considered several Flutter dynamic solutions.
A. Download the replacement Flutter compilation product
Download a new build of Flutter and replace the build in the App installation directory to make Flutter dynamic. This is possible on Android, but not on Ios. We need a two-end all-in-one solution, so this is not the best option.
B. Similar to React Native framework
Let’s start with the React Native architecture
React Native is converted to an Android (ios) Native component and rendered. Using the React Native design idea, turn the XML DSL into an atomic widget component of a Flutter that renders it. It’s technically possible, but it’s expensive, it’s a huge project, and it’s not a good choice in terms of the input/output ratio
C. Page dynamic component framework
Dynamic page assembly by coarse-grained Widget components, Native side has many mature frameworks, such as Tangram of Tmall, DinamicX of Taobao, it has achieved a good balance in performance, dynamic, and development cycle. The key is that it can meet most of the dynamic requirements and solve problems.
The comparison chart of the three schemes is as follows:
According to the actual dynamic requirements, from the consistency of both ends, and performance, cost, dynamic consideration, we choose a compromise, the design idea of dynamic components of the page is a good choice.
The dynamic assembly of robust components on Flutter to build pages requires a full set of front-end and back-end services and tools. This article focuses on the front-end interface rendering engine process.
Syntax tree selection
Native Tangram, DinamicX and other frameworks have one thing in common: Xml or Html as DSLS. But Flutter is the React Style syntax. His own syntax already expresses the page well. No custom Xml syntax, custom logical expressions. Using Flutter source code as a DSL can greatly ease the development and testing process without requiring additional tool support.
Therefore, Flutter source code was selected as DSL to achieve dynamic.
How to parse DSL
The Flutter source code is a DSL, so we need to parse and analyze the source code well. Some ideas are given by Flutter Analyzer, a code style detection tool. It uses Package: Analyzer to parse the DART source and fetch the ASTNode.
Take a look at the source structure for Flutter Analyze, which uses package: Analyzer in the DART SDK
dart-sdk:
analysis_server:
analysis_server.dart
handleRequest(Request request)
analyzer:
ParseCompilationUnit ()
parseDartFile
parseDirectives
Copy the codeGet the ASTNode process from the source of the Flutter Analyze.
The plugin or command makes a request to the Analysis Server with the file path to analyze and the type of analysis. The Analysis_Server obtains commilationUnit (ASTNode) using Package: Analyzer. After computer analysis, astNode returns a list of analysis results.
We can also use Package: Analyzer to convert source files to commilationUnit (ASTNode), which is an abstract syntax tree, Abstract syntax tree (or AST for short) is a tree-like representation of the abstract syntax structure of source code.
All use abstract syntax trees to parse THE DART source code well.
Parsing the Rendering engine
The following focuses on the rendering module
Architecture diagram:
1. Source code parsing process
A. ST tree structure
See the following source for the Flutter component:
import 'package:flutter/material.dart';
class FollowedTopicCard extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Container(
Padding: const EdgeInsets. FromLTRB (12.0, 8.0, 12.0, 0.0),
child: new InkWell(
child: new Center(
child: const Text('Plugin example app'),
),
onTap: () {},
),
);
}
}
Copy the codeIts AST structure:
From the AST structure, he is regular.
B.A ST to the widget Node
We have ASTNode, but ASTNode and Widget Node Tree are two completely different concepts. We need to recursively convert ASTNode to Widget Node Tree.
Elements required for Widget Node
What type of widget is recorded by Name
The arguments for the widget are placed in the map
The literals for widgets are placed in the list
The children of the widget are placed in lSIT
Widget’s trigger event function map
Widget Node with fromJSON, tojson methods
Can in the tree, the recursive astNode identify InstanceCreationExpression to create a widget node.
2. Component data rendering
Registered components supported in the framework SDK include:
A. Atomic Components: Flutter widgets in the Flutter SDK
B. Local components: components written locally to a large particle, card widget components
C. Logical components: Widget components that have logic wrapped locally
D. Dynamic components: Widgets rendered dynamically through the source DSL
The specific code is as follows:
const Map<String, CreateDynamicApi> allWidget = <String,
CreateDynamicApi>{
'Container': wrapContainer,
..................... .
}
static Widget wrapContainer(Map<String, dynamic> pars) {
return new Container(
padding: pars['padding'],
color: pars['color'],
child: pars['child'],
decoration: pars['decoration'],
width: pars['width'],
height: pars['height'],
alignment: pars['alignment']
);
}
Copy the codeUsually the data we request from the network is a map. ${data.urls[1]}’ AST. If you get a string, or an AST expression, you can parse it to get the corresponding value from the map.
3. Logic and events
A. Support logic
The concept of Flutter is that everything is a widget that encapsulates expressions and logic into a custom widget. If you write if else, variables, etc. in the source code, it will aggravate the SDK parsing process. So encapsulate the logic in widgets. These logical widgets, as components, as framework components.
B. Support events
The page jump, popbox, and other services registered in the SDK. Convention users are only available for SDK services.
4. Rules and detection tools
A. Detection rules
Rules need to be laid down for the formatting of the source code. For example, writing if else directly is not supported, so you need to use the logical wiget component instead of the if else statement. Without rules, parsing an AST Node into a Widget Node can be complicated. In theory, it can be parsed, as long as the parsing SDK is strong enough. Make rules that ease the parsing logic of the SDK.
B. Tool testing
Use tools to verify that the source code conforms to specified rules to ensure that all source code can be parsed.
Performance and effect
The frame rate is greater than 50fps and the experience looks smoother than weex pages with the same functionality. On the Samsung Galaxy S8, it doesn’t feel like components are dynamically rendered.
The data structure
For the data requested by the server, we can agree on a format as follows:
class DataModel {
Map<dynamic, dynamic> data;
String type;
}
Copy the codeEach page is made up of components, and the data for each component is rendered by DataModel. Find the corresponding template according to type, template +data, render the interface.
Dynamic template management module
We convert Widget Node Tree into a component Json template that requires a management platform to support version control, dynamic downloads, upgrades, rollbacks, updates, and more.
The framework is dynamic through component assembly, component layout dynamic change, page layout dynamic change to achieve dynamic. So it is suitable for operation changes quickly home page, details, orders, my pages. Some of the more complex logic needs to be wrapped inside components, which are built into the framework as native components. The framework focuses on the assembly of dynamic components, while the engine’s parsing of complex logical expressions of source code is weak.
A. Integration with UI automation
UI automation, which has been described in previous articles. UI automation tools generate components, which are then converted into templates and delivered dynamically to quickly address operational requirements.
B. Support for internationalization
App will have different functions in different countries, we can dynamically assemble our page according to the region.
[C]. A thousand faces
According to the different crowd, to dynamically render different interface.
This article introduces the rendering part of the dynamic scenario. This scheme is in the preliminary stage, and there are still many improvements to be made. We will continue to expand and modify it in the future. After reaching the open source standard, we will consider open source. Dynamic solution is a back-end and front-end integrated solution, which requires a set of tools. The following articles will continue to introduce the overall dynamic solution. Please follow the public account of Xianyu technology, and invite you to join xianyu to explore interesting technology.
References:
Static Analysis:
https://www.dartlang.org/guides/language/analysis-options https://www.dartlang.org/tools/analyzer
dart analyzer :
https://pub.dartlang.org/packages/analyzer https://github.com/dart-lang/sdk/tree/master/pkg/analyzer_cli#dartanalyzer
dartdevc:
https://webdev.dartlang.org/tools/dartdevc
Qcon2018·Flutter&Dart three-terminal integrated development
GDD2018·TensorFlow application “UI 2 Code”
Thousands of online problem playback technology revealed
2018 Double 11· Real-time selection of top goods and excellent products — “Mach”
Pay attention to two-dimensional code, forward-looking technology is in control