The development of flutter in digital life and the landing practice of Tianyi cloud disk

Flutter It is the present. IT The most popular model selection in the industry cross platform technology , Consistent user interaction across different devices , At the same time, with the help of rendering engine and high-performance code runtime, we can achieve high-quality user experience of cross platform devices , And effectively reduce labor costs .

Tianyi digital life has always been committed to the active exploration and practice of new technologies , The development and application of core technologies use the cutting-edge technologies in the market , So I hope to Flutter Build a new generation of R & D mobile terminal development system , Various business scenarios supporting numerous projects ,

Meet the people's growing needs for a better digital life

, Stimulate the potential of digital applications , Empowering the digital transformation of thousands of industries .

1 Flutter In the current situation of digital life

1.1 

Cross platform development

With the continuous development of mobile Internet and projects , More and more business functions are required to meet different devices and scenarios , And the functional interaction should be consistent , So cross platform technology came into being , Let's take a look at the importance of cross platform development technology .

The cross platform technology development of the mobile terminal is mainly divided into six stages , These stage representatives are mainly divided into ：

HTML

、

Cordova

、

lonic

、

React Native

、

Weex

and

Flutter

etc. , As shown in the following table ：

1.2 

Cross platform advantages

The above describes the development of cross platform technology , So what are the benefits of cross platform ？

• Development efficiency

Using cross platform solutions , Developers usually use only one set of code to run in a compatible way  iOS、Android  or  WEB  On the platform , There is no need to develop separately . Cross platform  APP  The ability to reuse code between different platforms is the main advantage of most project selection .

• Performance advantages

adopt “ owner-draw UI+ Native system ” Achieve high frame rate fluency UI, Performance closer to native . Use Skia As 2D Rendering engine , Use Dart Language as a function , And the use of Text As a typesetting engine .

• Ease of maintenance

The same set of code not only reduces the cost during the initial build , And it will be good for the lifetime of your application , You can also share unit tests .

• Interaction consistency

In cross platform development , Can handle most popular  UI  differences . In native development ,Android  and  iOS  Developers may also have some differences in the implementation of functions . In cross platform development , This rarely happens , Because the platform uses the same set of code , Achieve the effect of consistent interaction .

1.3 

Why choose Flutter

Cross platform development is just a set of code can be used in Android、iOS And other platforms , High maintenance costs are avoided , Save a lot of time and resources . Cross platform development is the most popular 、 One of the most widely used frameworks . There are various frameworks for cross platform development , such as HTML、Cordova、lonic、React Native、Weex and Flutter etc. . There are a lot of frameworks that have gradually dropped out of history due to poor performance and other reasons . The following is a horizontal comparison of various cross platform technologies .

It can be seen from the results of horizontal comparison ,Flutter From the performance experience and development efficiency , Are superior to other technical frameworks , So our technical team chose it .Flutter  Is a powerful open source application development framework developed by Google , On  2017  Officially appeared in , According to the Statista  research report ,Flutter  Currently in  39%  Among the developers who have been selected as the preferred cross platform application development framework .

Performance experience and development efficiency are two key points that have been publicized by the government , I'm just going to go over it here . besides , We are also interested in  Flutter  Interaction consistency , The high degree of consistency here is not just about platforms  UI  Agreement , More importantly, each platform runs the same code . So we want to do it at a lower cost 、 A shorter time 、 Less code to quickly iterate over project requirements ,Flutter Undoubtedly the best solution ！

Let's look at consistency , It's on it  Flutter  Wrote a Tianyi cloud disk service page （Android and iOS）, stay Android and iOS Almost the same as .UI  Little sister designed UI  I always want to experience the same in many ways , It can be highly consistent .

In this paper, the team of Tianyi cloud disk is working on Flutter The reality of the transformation , Transform from architecture 、 Basic ability 、 Capacity development and open empowerment , Shared how Tianyi cloud disk did during landing ,

What is the main process of implementation , What problems will be encountered in the implementation process and how to solve them , This article will discuss these issues with you

, I hope it helped you .

2 

Sky wing cloud disk Flutter framework

2.1 

How does Tianyi cloud disk relate to Flutter combination

Tianyi cloud disk has analyzed the characteristics of existing projects and combined with Flutter Build an extensible set of features , Separate loosely coupled structural systems . among UI Separate from the business code Flutter engineering , Some functions are added to... In the form of libraries Flutter In a separate project . Native Android And iOS Use separate projects , Compile native code with a separate build tool .

and Flutter Build projects generate library artifacts through specific scripts , Push to a specific product library , The native project is compiled after being obtained through the middle platform . You can also modify the reference method , Reference local code , Convenient for development and debugging , The specific structure is as follows ：

2.2 

Tianyi cloud disk development architecture

Tianyi cloud disk adopts MVVM Design patterns , Drive through the unified router , among ViewModel Part of the core control page as a whole ,View Components and page contents are responsible for displaying ,Model It is a component that combines business and model , adopt Plugin API Interact with native , The details are as follows: ：

among ,Page adopt PageState Of build Method , Render the entire page ,Page The received parameters will be passed to PageState in , and PageState To render other controls , Can directly include other widget To build in , and widget Provide controller to PageState Control the data interaction of this control .

For some page operations , Can pass Helper Class to operate on , For example, the menu bar at the bottom , Can be extracted to Helper Class , Just use the page in the bottom menu , You only need to import the corresponding Helper That's all right. .

For the business logic of the page itself , adopt ViewModel To manage ,ViewModel The business class will eventually be called Business Class to operate on , There are two main types of operations in the business class , One is network request Domain, One is the native bridging operation Plugin.

The remaining tool classes and message bus , Can be used anywhere , It is convenient to reduce repeated code and redundancy problems . Please refer to the following figure for details ：

2.3 

Tianyi cloud disk technology panorama

Sky wing cloud disk Flutter The technology panorama mainly separates business from basic functions , The specific business is the top level , Below is the Dart The capability layer , Include UI Component capability , Common capabilities such as network transmission 、 Image loading 、 Message bus and so on , And log control , exception handling .

The corresponding native capabilities adopt unified routing management and management through virtual machines PluginAPI The two parts deal with page Jump and ability exchange .

The balance includes the ability to automatically build and deploy 、 Packaging, reinforcement and release of midrange capacity . Operation and maintenance includes remote strategy distribution , Layout configuration 、 Message push 、 Upgrade configuration and full link log, etc . Its structure is as follows ：

2.4 

Tianyi yunpan construction planning route

Because Tianyi cloud disk has many business functions , The project cycle is tight , The required workload is often concentrated in the interface UI part , and Flutter The consistency and efficiency of can just solve the problems of Tianyi cloud disk project team , Therefore, we have transformed the functional modules with high efficiency and low cost , achieve Android and iOS The effect of unified interaction .

For the huge project transformation of cloud disk, we have formulated a three-step plan to reconstruct the existing project , Phase I mainly includes the basic capability construction and... Of the main functional modules UI Component refactoring , Phase II mainly includes daily monitoring, operation and maintenance modules 、 Safety reinforcement 、 Auto deploy build , Phase III mainly includes the reconstruction of existing routes 、 The output of the mobile midrange component library and the output technical capability . Through these three phases of transformation plan, Tianyi cloud disk has completed all the transformable functions Flutter turn , It greatly reduces the time for subsequent maintenance and development .

In the future, the goal of unified platform will be achieved , Adapt to the latest Flutter 3.0、Plugin API 2.0, reform Flutter Container for full platform compatibility 、 Modular separation 、 Hot renewal and other technologies .

3 

Engineering practice and evolution of Tianyi cloud disk

3.1 

The first phase of - Basic capacity building

3.1.1 

Network transmission capacity

Because the Tianyi cloud disk request interface scenario is very complex , First, protect the privacy of users , Then you need to ensure that your user data is secure , Solve the problem of user connection transmission speed . In addition, the original native has implemented a complete set of network framework core , Its stability is beyond doubt , Experienced the test of time .

To this end, we are based on the original core , Added Cronet Handle Http3 request ,Okhttp Handle Http1/2 request , In the middle MdHttpClient As a proxy, the underlying implementation is masked . The agreement adopts Restful API, adopt retrofit Mode access . The upper interface is through Mdmp The interface between the middle platform container and Flutter Plug in interface forwarding Flutter Network request for , Achieve a set of applications , The same network framework , Reduce the problem , It's easy to troubleshoot .

Its structure is as follows ：

3.1.2 

Image loading and caching design

The image interface of Tianyi cloud disk is customized , And the image request contains encryption and some security issues , That leads to the present Flutter The officially provided components do not meet our usual development needs , So we have encapsulated a set of frameworks that meet our own encryption and caching requirements .

Because the Tianyi cloud disk has many picture modules such as picture list or picture wall , We need to be aware of what we already have Flutter picture   Components are optimized and encapsulated , So we encapsulated a set of our own image request framework robust_image. This framework is optimized as follows .

• Third level cache of network pictures , And USES the LRU Algorithm management cache

• Optimize the exception handling mechanism

• For multi graph loading, it provides a mechanism for multi task loading pictures

• Provide local pictures of different platforms uri The analytic problem of

• It deals with the encryption and security problems during the request

The main flow chart and architecture diagram of the framework

combination robust_image The business requirements of many pictures of cloud disk can also be developed iteratively quickly , At the same time, it reduces the repeated development of team members , It saves a lot of labor costs .

3.1.3 

Unified UI Components

Because of business needs ,UI Component design changes with each passing day , After each revision , Controls may require a lot of modification . Only unified components can solve these problems . because Flutter Is a new platform , So we designed a unified UI Component to solve this problem .

This set of components is divided into three parts , Design specifications and tools 、 Design basic components 、 Highly integrated components .

The design specification tools include color configuration files 、 Font family 、 internationalization 、 Global style control 、 Diablo mode and so on .

Design basis components include Base、Animation、Layout、Navigation、View Five parts , among Base It mainly includes some basic icons 、 Button, etc ; and Layout Is the layout system of the page , This includes the container layout 、 Linear layout 、 Fluid layout 、 Elastic layout 、 Stack layout 、 Cards, etc ;Navigation It mainly includes navigation related controls , Including the bottom button set 、 File menu 、 Global navigation 、 Modal and non modal loading ;View Including global pop-up window, etc .

Highly integrated components are extended through basic components , Include page state controller , Drop down refresh list , File list 、TabBar controller 、 Frame animation 、Lottie Animation container 、 Separate functional components of various businesses .

Realize configurable 、 Easy to modify 、 Extensible and simple general component architecture , Its organization is shown in the figure below ：

3.1.4 

Unified messaging bus

There is a set of communication bus in the original native , and Flutter There is also a set of self-developed bus , In order to achieve the unification of two messages , We designed Flutter One end is used bus agent Be responsible for processing the messages sent by the native , adopt Virtual Publisher Send to Flutter End bus . and Flutter The event will notify a Virtual Subcriber And then inform Bus Agent Send to native processing .

The primary side passes through PluginAPI Interact , utilize Message Plugin Of invoke And onChannel Operations handle native notification and receive events respectively .

All conversion logic passes through BusAgent perhaps Plugin transformation , Achieve notification consistency . Its structure is as follows ：

3.2 

Phase two - Ability development

3.2.1 

Dynamic configuration and distribution

Because of the Flutter Design page layout , It's not like tradition HTML The page can update the data displayed by the user by modifying the code at any time , But the operation hopes to get a more free configuration .

For this reason, a dynamic configuration scheme was born ： First, by separating all the interface components , Each component type is designed separately , Display the results through a layout configuration sorting component , Each component independently requests the interface to obtain the displayed data , This greatly enriches the ability of page configuration .

Let me analyze how to implement such a scheme through the flow chart of the service page , First, display the default or cached layout after the user opens the page , By requesting the layout interface , The provincial operation interface obtains the operation information of the current province , Show the corresponding layout , Then the respective components request the interface to refresh the rendering , Finally show the user .

After a series of transformation , The homepage of Tianyi cloud disk can be freely configured , My brother and sister are very satisfied with the operation .

3.2.2 

Full link exception handling

For an application, the most important thing is to ensure the stability of the application . Among them, the first thing to ensure the stability is to ensure full testing during the R & D process before launching , However, unexpected situations often occur after the reality goes online , A look at these questions , We want to restore the user's behavior completely through a link , Analyze user data , Solve these problems accurately .

Therefore, we design a full link tracking model for log and exception handling , This includes a tracking agent , Mainly responsible for burying point and user behavior statistics , The log feedback agent records Flutter And native logs , The exception log 、Http Request information , Audio and video playback information is gathered into the log collector , Store locally after cleaning by desensitization filtration , Waiting to report . Finally, you can see the corresponding quality view on the back end 、 User portrait 、 Custom events 、 Request tracking, etc . The specific hierarchy is shown in the following figure ：

3.2.3 

Automatic deployment and continuous build

It is always a troublesome problem to deploy and build , Joined the Flutter after , If different ends continue to adopt their own packaging mode , It will take a lot of time , And inconsistent behavior .

To solve this problem , We introduced Automated Deployment and continuous build architecture . First, through Gitlab Source code Center , Combine the configuration center with the script 、CI Configuration information , Add to the build environment to automatically package artifacts APK And AAR Other finished products , Then push to the remote resource , After the security reinforcement, it will be distributed to the R & D and test center for testing .

This part can be passed through Jenkins Fully automatic platform deployment and construction , Support follow-up tracking and restore script and compilation information , The specific architecture design is shown in the figure below ：

3.3 

Three issues - Open empowerment

3.3.1 

Global unified routing

Many places in the new version will jump to different pages , It is recommended to design a native router , The structure is as follows ：

First determine whether it is native , If it is Flutter Of , Use the original

Unified router

Just jump , If it is a native page , By bridging to the native router , Similar projects are also developed on the primary side

Unified router

The router , Other parts of the router can also be used in the future . It can be unified URI Go to different pages , Including applets 、 Native PAGE 、H5 Page or other special operations .

The unity of design URI Examples are as follows ：

3.3.2 

Mobile midrange component output

The purpose of Zhongtai construction is to solve the above problems by forming the standardization of development engineering system with necessary technical means at the basic level of development and by means of automation and other technical means , The construction of mobile middle station is also the development trend of the industry .

The mobile midrange consists of a component-based development framework 、 Component chemical tool chain and basic ability / Service consists of three parts . The component-based development framework provides the specification and support of the component-based development model , It is mainly reflected in component container technology and related service governance 、 Life cycle management and application integration and startup Pipeline Technology .

The component chemical tool chain mainly runs through the mobile end product development 、 Integrate 、 Release a collection of relevant automation tools for component development and project engineering maintenance management throughout the R & D cycle , Efficiency for component-based development 、 Provide the necessary basic tools and quality assurance . Basic ability / Service is the standardized reuse of some common basic services and capabilities accumulated by mobile clients , Closely combined with component engineering , Achieve basic capabilities / Automatic integration of services on demand and reduction of necessary access and maintenance costs .

4  Summary and Outlook

4.1  Look back

After three months Flutter reform , Sky wing cloud disk V9.0 Version on 2021 year 10 The transformation is completed in January , Realized Flutter Comprehensive , Remarkable achievements , At the same time, some performance optimization and structure optimization goals are achieved , namely App Page rendering performance is significantly improved ,

Interface code to achieve both ends 95% The reuse rate of , Compared with pure native development, the efficiency is improved 40%, The average response time of the restoration problem modification is increased to 13 individual / Man's Day

, Compared with the pure original development, the average increase is 86%

, 

iOS Support for apple Metal Graphics driven , Realization UI Rendering fluency is improved on average 50%

.

This time, Flutter During reconstruction , Super complex business scenario verification Flutter The logical cross end feasibility of patterns , Performance superiority , And the reusability of people .

4.2 

Flutter In the technological evolution of digital life

• [email protected] Tianyi digital life

• It has become one of the preferred technology stacks for new businesses

• The direction of construction covers the engine 、 Application framework 、 Basic services

• Business practice

• Cover more business scenarios , Improve service reuse rate

• Support more terminal devices

• Realization “
  unified
  ”, Go across iOS、Android、Web、Windows、macOS and Linux Six platforms

• adapter Flutter 3.0, To the desktop PC、 Big screen terminal TV and Mac End evolution

4.3 

Future outlook

Up to now , Tianyi digital life has been realized Flutter All products are fully implemented , Completed

5 paragraph

Native APP Of Flutter reform （

Sky wing cloud disk

、

Tianyi enterprise cloud disk

、

189 mailbox

、

Tianyi caretaker industry Edition

and

Sky wing cloud eye

）, And in the development mode 、 There are obvious improvements and breakthroughs in product operation and ecological cooperation .

“ The big one ”, It concerns the happiness of the people , It's about national rejuvenation

. In the days to come , Tianyi digital life will

Continuous release Flutter Related knowledge article , Including but not limited to framework technology 、 Case practice and open source components

, advance Flutter  Technology stack update , complete Flutter Integration efficiency 、 Optimization of code simplification and personnel reuse , Give play to the advantages of cloud network convergence , Increase investment in scientific and technological innovation , Give better play to the role of the main force in the construction of Digital China , Continue to add color to the people's good life , Continue to promote the high-quality development of the digital economy ,

We should contribute our own scientific and technological strength on the road of building a powerful modern socialist country

.

If you want to know more  Flutter knowledge , Please continue to pay attention to Tianyi digital life ！