By Ezarel, aN iOS engineer
The background,
At present, mobile development technology is mainly divided into native development and cross-platform development. Native applications refer to applications developed on a specific mobile platform by using the development tools and languages supported by the platform and directly calling the API provided by the system. The main advantages of native development are as follows: 1. Quick access to all functions of the platform, such as camera and GPS; 2. 2. Native applications have high speed, high performance, and can achieve complex animation and drawing effects, with good user experience. The disadvantages of native development are also obvious, mainly reflected in the following aspects: 1. High development cost, different platforms must maintain different code, labor cost will increase; 2. 2. If a new function needs to be updated, you can only upgrade the version. With the rapid development of mobile Internet, in many business scenarios, traditional pure native development has been unable to meet the growing business needs, mainly in the following two aspects: 1. The need for dynamic applications is increasing. When requirements change or new features need to be added, traditional pure native app development can only update the content through version upgrades, but it takes a certain amount of time for the application to be released and approved. Therefore, developers are eager to update the application content without updating the version to improve work efficiency. 2. Business needs change rapidly and development costs become high. Native development generally requires technical teams to maintain both iOS and Android development platforms. The cost of development and testing increases as the release is updated iteratively. In response to these two problems, cross-platform frameworks have emerged.
Ii. Introduction to cross-platform technology
There are a number of cross-platform frameworks for native development, which fall into three categories: 1.H5+ Native (Cordova, Ionic, micro app); 2. 2.JavaScript development + Native rendering (React Native, Weex, fast application); 3. Create your OWN UI+ Native Flutter. In this article, we will compare React Native, Weex and Flutter.
1.React Native
React Native is a cross-platform mobile application development framework opened by Facebook in April 2015. It is a derivative of Facebook’s Open source JS framework React on the Native mobile application platform. React Native uses the React design model, but its UI rendering, animation effects, and network requests are all implemented Native. Developers write JS code, convert it to Native controls through the React Native middle layer, and manipulate it. That is to say through THE JS code to call the native components, so as to achieve the corresponding functions. React Native implements cross-platform functions, mainly consisting of Java, C++, and Javascript. Among them, the dynamic link library (.so) implemented by C++, as the bridge of the intermediate adaptation layer, realizes the two-way communication interaction between the JS end and the native end. React Native compiles application JS code into a JS file. The purpose of the React Native framework is to interpret and run this JS script file. If it is a JS extension API, call Native directly through the Bridge. If it is a UI interface, it will be mapped to the virtual DOM, a virtual JS data structure, and transmitted to native through bridge. Then, corresponding real Native views will be set according to the data.
2.Weex
Weex was designed to work on all three devices (iOS, Android and H5). The top DSL, which Ali calls Weex files (.we), is transformed into jS-bundles and then deployed to the server, where the server is complete. On the client side, the first layer is jS-Framework and the last is RenderRengine.
On the surface, Weex is a client-side technology, but in reality, it connects the entire link from local development to cloud deployment to distribution. Developers can write an APP interface locally, just as they write a Web page, and then compile it into a piece of JavaScript code using a command line tool to generate a Weex JS bundle. At the same time, developers can deploy the generated JS bundle to the cloud, and then load it to the user’s mobile application client through network request or pre-delivery. On the mobile application client, the Weex SDK will prepare a JavaScript execution environment. When the user opens a Weex page, the corresponding JS bundle will be executed in this environment, and various commands generated during the execution will be sent to the native terminal. Interface rendering, data storage, network communication, device invocation and user interaction response. If the user wants to use a browser to access the interface, he can open an identical Web page in the browser, which uses the same page source code as the mobile application, but is compiled into a Web-ready JS Bundle that runs through the browser’s javaScript engine and Weex SDK.
3.Flutter
Flutter is a cross-platform, high-fidelity, high-performance mobile application development framework launched by Google and open source. Dart allows developers to develop their apps in the Dart language, building both Android and iOS apps with just one set of code and delivering the same performance as native apps. Flutter also provides a rich set of components and interfaces for developers to efficiently add native extensions to Flutter. Additionally, Flutter uses a Native engine to render views, providing a good user experience. Flutter differs from most other frameworks for building mobile applications because Flutter uses neither a WebView nor native controls of the operating system. Instead, Flutter uses its own high-performance rendering engine to draw widgets. This ensures UI consistency across Android and iOS, and avoids the limitations and high maintenance costs associated with native controls. Flutter also uses Skia as a 2D engine for rendering. Skia is a Google library of 2D graphics processing functions that provides efficient and concise performance in font types, coordinate transformations, and bitmaps. Skia is cross-platform and provides a very friendly API. Android has built-in Skia, so Flutter does not need to package Skia into APK. IOS does not have built-in Skia, so Skia must be packaged with Flutter when building the API.
3. High-performance Flutter
Currently, Flutter programs run in two main ways: statically compiled and dynamically interpreted. Statically compiled programs are fully translated into machine code before execution. This type is often referred to as AOT, or “pre-compiled.” Interpretation execution is executed sentence by sentence, often referred to as JIT, or “just-in-time compilation.” AOT programs typically are applications developed in C/C++ that must be compiled into machine code before execution. JIT is represented by many things, such as JavaScript, Python, etc. Virtually all scripting languages support JIT mode. But it is important to note that the JIT and AOT refers to the process operation, and programming languages is not strongly associated, some languages can be run in JIT way, can also be run in AOT way, such as Java, Python, they can be in the middle of the first executables compiled into byte code, and then, later in the execution of the direct execution bytecode. The high performance of Flutter is mainly guaranteed by two points. First, Flutter APP is developed in Dart language. When Dart is in JIT mode, it runs roughly as fast as JavaScript. Dart also supports AOT, and when executed in AOT mode, Dart runs much faster than JavaScript. The speed increase is helpful for view data calculation at high frame rates. Second, Flutter uses its own rendering engine to draw the UI. Layout data is directly controlled by the Dart language, so it does not need to communicate between JavaScript and Native as RN does during the layout process, which has obvious advantages in some sliding and dragging scenarios. Since sliding and dragging often cause layout changes, JavaScript needs to constantly synchronize layout information with Native, which is the same problem as frequent DOM manipulation by JavaScript in the browser, which will bring considerable performance overhead.
Why does Flutter choose Dart language?
1. High development efficiency.
The Dart runtime and compiler support a combination of two key features of Flutter: rapid JIT based development cycles and AOT-BASED distribution packages. Rapid JIT based development cycle: Flutter is in JIT mode during development, which greatly saves development time by eliminating the need to compile every change. Based on the AOT distribution, Flutter can generate efficient ARM code with AOT when it is released to ensure application performance. JavaScript does not have this capability. 2. High-performance.
To achieve a smooth, high-fidelity UI experience, Flutter must run a lot of code in every animation frame. This means a language that supports both high performance and periodic pauses without losing frames, and Dart supports AOT, which gives it an advantage over JavaScript. 3. Quickly allocate memory.
The Flutter framework uses functional streams, which makes it heavily dependent on the underlying memory allocator.
4. Type safety.
Because Dart is a type-safe language that supports static type detection, some type errors can be found and potential problems eliminated before compilation. This is more attractive to front-end developers. JavaScript is a weakly typed language, which is why there are so many extension languages and tools for adding static typing to JavaScript code in the front-end community.
5. Frame structure of Flutter
The Rendering layer is an abstract layout layer that relies on the DART UI layer. The Rendering layer builds a UI tree, and when the UI tree changes, it calculates the changed parts, updates the UI tree, and draws the UI tree on the screen. This process is similar to the virtual DOM in React. The Rendering layer is the core part of the Flutter UI framework. In addition to determining the location and size of each UI element, the Rendering layer also performs coordinate transformation and Rendering (calling the underlying DART: UI).
3. The Widgets layer is the base library provided by Flutter. On top of the base library, Flutter also provides libraries with Material and Cupertino visual styles.
The Flutter Engine is an SDK implemented entirely by C++ that includes the Skia Engine, Dart runtime, text typeset Engine, and more. When code calls the DART: UI library, the call eventually makes its way to the Engine layer, where the actual drawing logic is implemented. The comparison results of React Native, Weex and Flutter are as follows:
Six, summarized
The whole architecture of Flutter is revolutionary from the point of view of its design. Compared with other architectures, Flutter is truly cross-platform. It makes the experience consistent across platforms and makes the user experience even better. Flutter’s UI libraries and components are growing, and its ecosystem and community are improving, making Flutter more and more adaptable to new operating systems. It is believed that Flutter will mature into a mainstream development language in the near future.