Since its birth, Flutter has become a leader in cross-end development. Before Flutter could exist as a module, the hybrid app architecture was explored for a long time. Many changes were made to the original project. After the official launch of Flutter module mode, we conducted a lot of research and finally launched a set of hybrid engineering scaffolding, The Flutter – Boot, which is out of the box. To help you quickly build a hybrid project.
This book, “Flutter in Action”, is designed to provide a thorough understanding of Flutter enterprise practices and reveal the technical secrets behind hundreds of millions of Flutter traffic.
The author | xing, to tzu chi Ming, lead horse
background
More and more companies at home and abroad have embarked on the path of flutter exploration. The main development modes of Flutter are divided into two types. One is the independent APP mode, which is mainly based on Flutter, and the original project will be included in the Flutter project. The other option is to allow the flutter to exist as a module, integrated into existing iOS and Android native apps, respectively. In this case, the native project can exist in any directory structure without any association with the flutter project address. The local address of the Flutter project needs to be declared in the native engineering structure.
How to download
The product manager of Google Flutter recommends that engineers learn about the technology behind the billions of pounds of Flutter traffic by clicking on the qr code below or “Read the original article” to get the download address.
Introduction to the
The Flutter -boot core solves two problems in the flutter hybrid development mode: the engineering design and the hybrid stack. So how does the flutter-boot work?
First of all, in terms of engineering design, a standard construction process and friendly interaction commands are established by flutter-boot. When the process is completed, a standard construction structure for mixed development is created. This construction allows us to have both flutter and native development perspectives. There are two modes of FLUTTER integration, local FLUTTER development and cloud Flutter construction, and their effects are shown in the figure below:
In addition, flutter-boot can automatically inject the mix stack dependencies, and at the same time, the core mix stack access code is encapsulated and injected into the original project. The effect of the mix stack can be seen after the user inserts a few lines of template code as prompted. The hybrid works built with the Flutter -boot are ready to use out of the box. Let’s take a look at how the Flutter -boot solves these problems.
Open source address
https://github.com/alibaba-flutter/flutter-boot
Engineering design
Learn about the official Add Flutter to Existing Apps project
Before we understand the engineering details of flutter-boot, we need to have a preliminary understanding of Google’s official solution to Add Flutter to Existing Apps. The Add Flutter to Existing Apps project guides us to create a Flutter in the form of a Module. The engineering structure of a Flutter in the form of a Module is as follows:
some/path/ my_flutter/ lib/main.dart .ios/ .android/Copy the codeUnder the official construction,.ios and.Android are the template projects for running Flutter. They are used to launch applications when running flutter under the Flutter project directory. So how do we make native engineering relevant? This association will be divided into three parts: the Framework for Flutter, the business code for Flutter, and the plugin library for Flutter. The FLUTTER plugin library is divided into two parts: the Flutter Plugin native code and the Flutter Plugin dart code. The differences between these four parts are as follows:
Therefore, the Flutter Framework only needs to be declared in dependency management. The Flutter Plugin native can be integrated directly with the source code. The Flutter Plugin dart is only valid when referenced by business code. Dart code needs to support debug mode and release mode, so the association of DART code intrudes into the app construction process, which determines the Dart code construction mode based on the app construction mode.
To implement this, take iOS as an example. We will add a call to a custom Ruby script called PodFileHelper to the PodFile file. The PodFileHelper declares the dependencies of the Flutter framework. Declare source references to the Flutter Plugin native and declare the path to the business code. In the build phase of Xcode, the shell script xcode_backend is called. Xcode_backend produces the DART build product based on the current build mode.
Flutter – a supplement to the boot
For the official mixed engineering project, we found the following problems after experience:
1. Adding files or configurations takes a long time.
2. Native works running under the FLUTTER repository are not supported.
3. Flutter is not supported to be built on a remote machine when deployed as a separate code repository.
Therefore, in order to solve these problems in the flutter-boot scaffold, we divided the deployment of the hybrid engineering into four processes: CREATE, Link, Remotelink and UPDATE.
To end the create
The purpose of the create process is to help us build a flutter module, including the creation of the flutter Module and the deployment of git repositories. Before calling the flutter Module creation command, we do basic checks to ensure that the project location and naming specifications meet the official conditions. During git repository deployment, we will ignore some files in Gitignore, and we will check the status of the repository. When the repository is empty, we will add files directly, and when the repository is not empty, we will clean the repository first.
U the link
The purpose of the Link process is to associate the local native project with the Flutter project. During the association process, we will first request to obtain the address of the Flutter project and the address of the native project. Then we will automatically integrate the parts mentioned above that need manual integration by script. In order to gain a perspective of flutter development, we have soft-linked the native project to the ios and Android directories of the Flutter project. Before the Flutter will run, it will find the ios or Android directories under the project and run them. The target of iOS project should be specified as Runner when running the FLUTTER project. To solve this problem, we copied the primary target of the original project, a target named Runner.
Also, to support the remote build mode, the declarations of the local path of the Flutter repository are separated according to the build mode and encapsulated in custom dependencies. For example, in the iOS project, we add the fbpodHelper.rb script file. Then add the flutter repository local path to the configuration file fbconfig.local. json.
U remotelink
The purpose of the Update Remotelink process is to capture the code of the Flutter repository in remote build mode and build on the remote machine. In remote build mode, we hack into the process of dependency management. During dependency acquisition, we pull the code of the Flutter repository, place the code in the native project’s. Fbflutter directory, declare this directory as the local path of the Flutter repository, pull the flutter code and deploy it locally. We call this the update process.
This allows the remote build to be identical to the local build. So what’s the difference between remote mode and local mode? Json file. The fbconfig.local. json file is ignored in gitignore. This way, the engineer who initialized the flutter project only needs to run Remotelink once. Other development collaborators will not be concerned with the configuration flow of the remote build.
Taken the init
For quick setup, we provide a command set called init, and we integrate the necessary steps into the init command in command line interaction mode.
Hybrid stack
Hybrid stack is an open source framework used to coordinate the interaction between native pages and flutter pages under the flutter hybrid project. It is currently the mainstream framework under the flutter hybrid development mode. After the hybrid stack became open source, we noticed that a large number of developers had integration problems caused by various environment configurations or code additions when integrating the hybrid stack. So we decided to provide a quick integration solution. To achieve rapid integration we face two problems:
1. Compatible with flutter and hybrid stack versions;
2. Hybrid stack demo code encapsulation and insertion.
Version compatibility issues
The current hybrid stack release is 0.1.52, which supports FLUTTER 1.5.4. When the Flutter is upgraded, the hybrid stack will have to be adapted, that is, our integrated version of the hybrid stack will also need to change. Therefore, the version configuration of the mix stack is maintained through a file, recording the mix stack version required by the current FLUTTER. In the first version of Flutter -boot, we limited the version number of the mix stack. When the new version of the mix stack is released, we will open the version selection function.
Code encapsulation and insertion problems
After investigating the use process of the hybrid stack, we divided the demo code needed for the hybrid stack into four parts:
1. Hosting of flutter engine;
2. Configure page routes.
3. Dart page in demo form;
4. Native test jump point.
★ Hosting of the FLUTTER engine
The hosting of the engine depends on the initialization of the application, and since the initialization process increases with the complexity of the application, we currently provide a line of code as an interface for the user to complete the hosting by adding this line of code during the application initialization.
★ Route configuration
Dart page in the form of Demo. Route configuration means that when a flutter or native page is routed to an identifier, it needs to recognize and redirect to the corresponding page. The configuration of the route needs to be deployed on both sides of the native and flutter. On the native side, we streamlined the demo routing code for the hybrid stack and added it to the native project’s fixed directory. Since iOS simply adding code files is not part of the build scope, we packaged a set of iOS side code adding tools to implement file insertion. Dart files are overwritten on the Flutter side, integrating main.dart with routing logic, and providing the demo Dart page creation logic.
Native test jump entrance
In order to facilitate users to quickly see the jump mode of the hybrid project, we have encapsulated an entry button and the button adding process on both iOS and Android. Users can manually add a line of code on the test page to see the entry of jump FLUTTER.
The effect
Prior to the Use of the Flutter – Boot, it would have taken several days for developers to build hybrid projects. Now, users only need to invoke a command and add two lines of code to build hybrid projects, greatly reducing the developer’s development cost. However, the mission of Flutter – Boot has not been achieved yet. We expect users to develop Flutter more smoothly. In the future, we will optimize the development process of flutter with multiple people, improve the construction of continuous integration environment, and provide users with better development experience.
Flutter in Action is here
Focus on Ali Technology
Four highlights, quick to understand
Flutter in Action
Flutter open source collection of tools
Enterprise application practice of Flutter
Mixed development practice guide
In-depth tutorial on Flutter
How to download
The product manager of Google Flutter recommends that engineers learn about the technology behind Flutter, including open source tools, Summit Direct, hybrid development, deeper advancements, etc. Long click on the qr code below or click on the bottom of the article “Read the article” to get the download address.
You love learning, have you downloaded it? In the comment area, you can tell how you feel about the use of e-books. The top three students will send a super cute idle fish doll. The prize will be opened at 11:00 on October 22 (if the number of likes is the same, the one who left the message earlier will be selected).
You might like it
Click on the image below to read it
Eliminating the “bad taste” of Java code
Avoid these two mistakes, the test target KPI is no longer difficult to set
Is it real inception? Here, everything could be data
Focus on “Ali Technology”
Grasp the pulse of cutting-edge technology
