Click the above "Developer Technical frontline", select the "star"
13:21 look at love
Author: Jingdong Mall Share Technology | Source: Jingdong Mall technical team
Editor: Cocoa
Foreword
JDFlutter Mall is shared and Technology - multi-terminal fusion technology department launched a new generation of cross-platform development framework that can be quickly integrated into existing Android / iOS project, developers can make use of JDFlutter platform quickly Flutter business development. JDFlutter platform provides most of Jingdong style UI component library and a wealth of native API, can meet the complex business needs. JDFlutter and JDReact future will together form a twin-engine Jingdong ARES cross-end application development platform!
Flutter Profile
Flutter is the first open source cross-platform software development kit (SDK) Google company February 27, 2018 release, support for Android, iOS two platforms, enabling high-performance, high-fidelity application development. With Flutter development platform developers can easily implement their own applications, which support the development framework default Material (Google-like style) and Cupertion (similar iOS style) two styles, and in terms of style UI, the user experience is very close native application. After nearly seven months of optimization to improve the September 19, 2018 in Shanghai, the company Google officially released very close to the official 1.0 version of Flutter Release Preview 2, based on its superior performance Flutter is expected to become a mainstream tool for future application development.
Flutter similar and better than Html, React Native, Weex and other cross-platform solution. The JSX ReactNative eventually rendering the generated code into native components, JS communicate data with native JSBridge. The Flutter is a completely different design, the bottom is an independent rendering engine -Skia, all components are also independent of the Widget components of the platform, we can ensure the consistency of cross-platform experience to the maximum extent.
Jingdong there are already very mature cross-platform solution JDReact, how to choose the right development program in JDReact and Flutter in? We believe that if it is required for online business package upgrades, hot fixes and other dynamic situation update, preferences JDReact; no dynamic update requirements can choose Flutter.
Currently busy fish APP US APP group have tried to access the page Flutter in part, based on publicly available information we compared the three Flutter program:
Integration and debugging
1Flutter integrated package
To this stage of the development of a new App, Flutter is a good choice, as a new generation cross-platform solution, using the official Flutter create scripts to create tools to develop complete. However, in most cases, we are faced with the existing APP has been online for a long time, the transformation of a new page or section of the page need to try to use Flutter development, in this case, we need to create a Flutter module for complete Flutter page development, reliance on Flutter and add modules as the host for the existing APP projects.
Flutter is no need to take into account the development environment of colleagues, we compile the script has been modified:
▲ compiler development environment configuration
Flutter developers need to configure a complete development SDK locally and increase jdFlutter.debug mark, if developers do not develop Flutter would not have this flag is set, if it is to develop R & D Flutter this flag need to configure the local code development. In this way, developers can do Flutter does not affect the compilation of existing projects. Flutter business code using git submodule approach to code management, Android, ios project can only rely on the set of Flutter.
▲ git repository management
2JDFlutter design framework
▲ JDFlutter Chart
The bottom provides gray, demotion disaster recovery, statistics and other functions, these functions are unified access back office systems.
The middle layer of the core development kit: JDFlutter-core-widgets as JDFlutter UI component library, style and so Jingdong meet the design specification, now supports a Button, CheckBox, Dialog, mage, Loading, NavgationBar, Text, PullToRefresh and so on. Flutter integrated within the framework of the two styles of UI component libraries: one is Google Material design style, the other is Apple Cupertion design. Both design can well meet the needs of developers of style, no different from the native page. However, when integrated into Jingdong client, these styles can not meet the demand, so we provide a suitable mobile phone Jingdong (Jingdong APP) UI component library (continuous improvement).
JDFlutter-core-lib as a bridge for communication between the native and Dart, we provide native interfaces, such as: network requests JDNetwork, device-related JDDevice, page jump JDJumping, Buried JDMta, share JDShare, exception reporting JDReporter like.
Access to the uppermost layer, comprising the development of integrated service, Android / iOS client integration ends.
Component library and API demo ▲ JDFlutter provided
3 open JDReact Native API
Before Flutter, Jingdong has been a very mature and stable cross-platform development solution JDReact. In JDReact frame, a lot of already packaged Native API, data between the native and JS transmitted through JSBridge.
To Flutter with many Jingdong App Native API access capability, have the following way:
According to official channels Platform ( https://Flutter.io/platform-channels/) writing, packaging Flutter Api;
Plugin accordance manner, each written in a Native API plugin;
All JDReact reuse existing Native API.
Native JDReact currently provide an API there are hundreds, and have undergone rigorous testing. If you follow the first two methods, you want to gradually benchmarking JDReact native capacity, the workload will become large, and requires a lot of testing. So we took the last option, all the reuse of existing JDReact Native API: by defining a unified interface to the way the original JDReact framework was modified following picture shows the transformation framework architecture diagram:
▲ JDFlutter multiplexing JDReact API framework
Adapter layer React Native Native Code were achieved with the corresponding interface Flutter, JDReact by JSBridge exposed to the Native API JS, JDFlutter by MethodChannel exposed to the Native API Dart. In order to facilitate the subsequent development, we were in a second package and JS Dart side, to ensure that the service can be developed smoothly without having its native implementation.
4 Business Integration
Flutter currently does not support integrated service package similar JDReact split package - different playing their own business, do not play the same part lib into the mechanism of subcontracting, the solution is that all businesses are packaged together to resolve native transfer routing and jump parameter information determined by the internal route navigation logic.
▲ traffic routing and parameter passing
main.dart main inlet, accept the change of the protocol of the original transmission, for parameter analysis and determine traffic routing, route distribution, while the jump parameter params is transmitted to each service entry.
▲ integrated business directory
In order to achieve integration of online service package, all service codes are located under lib. While ensuring independently of each other between different developers, each business will be managed separately in the lib directory, the corresponding image associated with its business resources are managed independently. assets in folders are public resources, different services can be directly referenced resources located in that directory.
5 Commissioning
Many developers JDReact little friends are front-end development for Android / iOS native APP may not be familiar with. In order to facilitate the development and debugging of us in the background adds JDFlutter MarsWorks debugging function, as shown below:
▲ development and debugging IDE
Flutter business development just need to install the apk installation package we offer on the phone, the phone connected to the computer, click on the "Start Debug Flutter" bound phone, change the code after clicking "Reload" button to achieve Flutter heat load.
The future we will add support for ios simulator, click the "Start Debug Flutter" to start the emulator jump directly to the corresponding page.
6Demo demo
This is the phone Jingdong use JDFlutter transformation of attendance rankings page, the page previously used JDReact achieve. After transformation, the page operation is very smooth, the overall user experience very close to the original, it was hard to distinguish is implemented in native or Flutter. Then gradually there will be more pages, scene to try to use JDFlutter.
▲ JDFlutter attendance rankings
Statistics
JDFlutter of online statistical data including business data and abnormal data, no matter which side of the abnormal data occurs, should take timely measures.
1 Business Statistics
Basic data DAU, UV, PV, and other services mainly includes data services, the following scheme may Statistics:
▲ statistics
Scenario 1: The original entrance to the jump point increase buried.
Scheme 2: Buried in increasing page Flutter inlet main route.
Scenario 3: Buried increase in Flutter business page.
The above three methods can statistics page data, one can count the entrance program data, scheme 2 can count the traffic data other than degradation, Scheme 3 can be statistically more accurate traffic data, and can provide more detailed other fields the data sent from the background, such as entering the next page.
JDFlutter framework tacitly supported Option 1 and Option 2 two kinds of data statistics, to analyze these two data can be seen not only downgrade rate, you can also see the start page JDFlutter case; the data needs of the three ways to access business needed to complete the addition.
2 abnormal data monitoring
On-line business will encounter a variety of problems, the abnormal collection and analysis is particularly important. We collect the following exceptions to an abnormality of analysis:
▲ Exception Monitoring
Background collected exception in order to better analyze what a business code problems, we joined the business in the name of abnormal data, and parameter information when the jump can be done in a targeted anomalies of the dart code analysis, if an abnormal amount of traffic surge, we will be downgraded.
Downgrade disaster recovery
▲ JDFlutter service degradation disaster recovery map
Wherein the degraded data delivered by the disaster pool background, each comprising a degraded condition online business, which includes: JDFlutter service name, the name of the corresponding service JDReact, and the JDReact h5 url degraded service. Degradation process: remove the corresponding service name from the degraded disaster JDReact pool, it can determine whether to downgrade the service Flutter JDReact service.
If JDReact service is available, downgraded to JDReact business
If the service is not available and there is JDReact h5 downgraded page, then downgraded to h5 page
If the service is not available and no JDReact h5 downgraded page, JDFlutter unified error page
If there is no JDReact business may have to downgrade and demote pages h5, h5 relegated to page
Other cases, the unified unified error page is displayed JDFlutter
Above relegation disaster recovery graph contains all possible exceptions. It is worth mentioning is why we first downgrade to JDReact: Due to multiple service access of our current JDReact than 140, may try to use JDFlutter priority for these services section, in order to avoid the problems encountered online, we first, it is downgraded to the original JDReact page only can guarantee the normal operation of the service, the user experience can be guaranteed.
Prospective to the future
Currently JDReact multiport integration platform is still the main Jingdong APP cross-platform development programs, internal access JDReact Jingdong's App dozen, more than 140 access JDReact business, there will be more JDReact service access. JDFlutter as our cross-platform access to a second engine, the future will continue to have access to new services, there will be more new scenes using JDFlutter achieve.
In the future we will continue to improve JDFlutter this new generation of cross-platform development program, the multi-terminal fusion platform to fight with a platform ReactNative and Flutter twin-engine development.
references:
Glossary
JSX: The syntax is react native format
JSBridge: jsbridge by passing data between the native and js
Skia: Flutter rendering engine
Widget: a Flutter components
Bridge: is the communication bridge between the native and Flutter
Subcontracting mechanism: that the different business destroyed itself, the same does not play into the lib part
Native Api capacity: Flutter can call Jingdong App is a native method of capacity
Plugin: is a way to communicate with native FLutter dart, there is a methodchannel
END
Developer Technical frontline, bringing together technology industry trends and concerns of front-line newsletter, dry goods manufacturers, is an excellent guide developers experience and growth.
Reading history
Tencent News front-end performance monitoring practice
know almost real Hybrid debugging cross-platform client
history of the demise of the empire movement, which has experienced a decade of technology storm
Good text on the point of a good-looking bar