1. Evolution process of mobile terminal development

1.1 Native Development

Native apps refer to apps specific to a mobile platform (such as iOS or Android) that use development tools and languages supported by the corresponding platform and directly call the system SDK API.

  • Android native apps: Apps developed using Java or Kotlin directly calling the Android SDK;

  • Native iOS apps: Apps developed by directly calling the iOS SDK through Objective-C or Swift.

Main advantages:

  • Direct and barrier-free access to all functions of the platform;

  • Fast speed, high performance, can achieve complex animation and drawing, the overall user experience is good;

Main disadvantages:

  • High development cost; Different platforms must maintain different codes, resulting in large labor costs and testing costs.

  • Content is fixed, dynamic weak, in most cases, there are new functions update can only be issued, but the application shelf, review is needed cycle, which is difficult to accept for the high-speed change of the Internet era;

Several cross-platform dynamic frameworks have been developed to address both dynamic and development costs. 👇 👇 👇 👇 👇 👇

1.2 Introduction to Cross-platform Technologies

By cross-platform, I mean Android and iOS. According to its principles, it can be divided into three categories:

  • H5+ Native (Cordova, Ionic, micro app) => Hybrid/ Hybrid development

  • Principle: APP needs to dynamically change the content through H5 to achieve, further through the native web loading control WebView (Android) or WKWebView (iOS) to load.

  • WebView is essentially a browser kernel, and its JavaScript still runs in a restricted sandbox, so it has no access to most system capabilities, such as file system access, bluetooth access, etc. Therefore, for the functions that H5 cannot achieve, we need to do them native.

  • Core: The hybrid framework will pre-implement some apis in the native code to access the system’s capabilities, exposing the WebView for JavaScript to call, making the WebView a bridge between JavaScript and the native API. JsBridge (WebView JavaScript Bridge) JsBridge (WebView JavaScript Bridge)

  • React Native (Weex, Fast Apps)

React Native features are introduced here

  • React supports responsive programming, allowing developers to focus only on state transitions rather than UI drawing.

  • The main difference between React and React Native is what the virtual DOM maps to:

  • The React virtual DOM eventually maps to the browser DOM tree;

  • The virtual DOM in RN is mapped to the native control tree via JavaScriptCore. (2)

  • Step 1: Layout messaging; Pass virtual DOM layout information to native;

  • Step 2: Native render the control tree through the corresponding native control according to the layout information;

  • Advantages:

  • Using Web development stack, the community is large, fast and the development cost is relatively low.

  • Native rendering, performance is much better than H5.

  • Dynamic is good, support hot update.

  • Inadequate:

  • Communication between JavaScript and native is required during rendering. In some scenes, such as dragging, communication may be too frequent to cause lag.

  • JavaScript is a scripting language, which requires JIT(Just In Time) for execution, and there is still a gap between execution efficiency and AOT(Ahead Of Time) code.

  • Because rendering relies on native controls, controls for different platforms need to be maintained separately.

(An RN architecture upgrade, in progress, addresses frequent and native communication bottlenecks.)

  • UI+ native (QT for Mobile, Flutter)

  • QT for Mobile (the pioneer and martyr of cross-platform paint engine development on mobile)

  • Flutter 👇 👇 👇 👇 👇 👇

2. The Flutter is introduced

Flutter is a cross-platform, high-fidelity, high-performance mobile application framework launched by Google and opened source.

2.1 Cross-platform self-drawing engine

Flutter differs from other frameworks for building applications because Flutter uses neither WebView nor native controls of the operating system. Instead, Flutter implements its own drawing engine. In this way, not only can a set of code run on IOS and Android platforms, but also ensure the consistency of UI on Android and IOS, but also can avoid the restrictions and high cost of maintenance brought by the reliance on native controls, and do not have to do too much communication with native layer, which greatly improves performance.

Flutter uses Skia as its 2D rendering engine. Skia is a Google 2D graphics processing function that provides efficient and brief performance of characters, coordinate transformations, and bitmaps. Skia is cross-platform and provides a very friendly API. Google Chrome and Android both use Skia as their drawing engine.

Flutter currently supports Android, IOS, Fuchsia and Hongmun mobile platforms by default. Flutter also supports Web development, PC and apts.

2.2 Use the Dart language

This is an interesting and controversial question. Why does Flutter choose the Dart language?

â‘  High development efficiency. The Dart runtime and compiler support a combination of two key features of Flutter:

JIT based fast reading development cycle: Flutter adopts JIT mode during development. This saves development time by eliminating the need to compile every change; It can also be hot-reloaded in milliseconds on iOS and Android emulators or real phones without losing state.

Aot-based distribution: Flutter generates efficient ARM code via AOT at release time to ensure application performance. JavaScript does not have this capability (although it can be done with a packaging tool).

At present, there are two main ways to run a program: static compilation and dynamic interpretation. Static compilation: all translated into machine code 👉 AOT (Ahead of time) before execution; AOT programs typically are applications developed in C/C++ that must be compiled into machine code before execution; Dynamic interpretation (interpretation execution) is translated sentence by sentence while running 👉 just-in-time (just-in-time) compilation. There are many examples of JIT, such as JavaScript, Python, etc. Virtually all scripting languages support JIT mode. However, it is important to note that JIT and AOT refer to the way a program is run and are not strongly related to the compiled language. Some languages can be both JIT and AOT, such as Java and Python, which can be compiled into intermediate bytecode at the first execution and then directly execute bytecode at the later execution. Bytecode among some might say, is not the machine code, the program execution time still needs to be dynamic transform bytecode into machine code, yes, this is not wrong, but usually we distinguish whether as AOT standard is to see if that need to compile the code before implementation, as long as it needs to be compiled, regardless of its compilation product is bytecode or machine code, belong to AOT (don’t have to struggle with concepts, Concepts are invented to convey the spirit, just understand the principle).

â‘¡ High performance. Flutter provides a smooth, high-fidelity UI experience, and in order to achieve this, Flutter needs to be able to run a lot of code in every animation frame. This means a language that can provide high performance without periodic pauses for lost frames, and Dart support for AOT can do this better than JavaScript.

Type safety. Because Dart is a type-safe language that supports static type checking, some type errors can be found and potential problems eliminated before compilation. This is particularly attractive to front-end developers. To address the weak typing of JavaScript, the front-end community has developed a number of extension languages and tools that add static typing to JavaScript code, such as Microsoft’S TypeScript and Facebook’s Flow. Dart itself supports static typing, which is an important advantage.

â‘£ Fast memory allocation. The Flutter framework uses functional streams, which makes it heavily dependent on the underlying memory allocator. Therefore, it is important to have a memory allocator that can efficiently handle trivial tasks. Dart doesn’t actually outperform JavaScript in memory allocation, it just needs Flutter, which Dart does.

The Dart team is around Flutter. The Dart language was also introduced by Google. Thanks to the active input of the Dart team, the Flutter team has more and easier support.

For example: Dart didn’t initially provide a toolchain for native binaries (which is great for achieving predictable performance), but now it does, because the Dart team built it specifically for Flutter. The Dart VM had previously been optimized for throughput, but the team is now busy optimizing VM latency, which is more important for the Flutter workload.

2.3 the high performance

Flutter performance is mainly guaranteed by the two points just described above:

â‘  Use Dart language for development. Dart is almost as fast as JavaScript in JUST-in-time (JIT) mode, but Dart supports AOT, and when run in AOT mode, JavaScript can’t catch up. The speed increase is helpful for data calculation at high frame rates.

(2) Use your own rendering engine to draw UI, and the layout data is directly controlled by Dart language. During the layout process, there is no need to communicate between JavaScript and Native like RN, which has obvious advantages in some sliding and dragging scenarios. Because layout changes are often caused in the process of sliding and dragging, JavaScript needs to constantly synchronize layout information between Native, which is the same problem as frequent DOM manipulation by JavaScript in the browser, which will bring relatively large performance overhead.

2.4 Responsive framework

Learn from React responsive UI framework design ideas. The central idea is to build your UI with widgets. Widgets describe what their view should look like given its current configuration and state. When the widget’s state changes, the widget will rebuild the UI, and Flutter will compare the changes to determine the minimum changes required to transition the underlying render tree from one state to the next (similar to the diff algorithm for the virtual DOM in React/Vue).

2.5 Multi-terminal Compilation

2.5.1 mobile terminal

  • Pack Up Android and launch the mobile store 👉 VSCode

  • Packaging orders

    flutter build apk

  • Release:

  • Register a developer account for each major app market

  • Create app information to publish

  • Upload according to process

  • Pack IOS and publish Apple Store 👉 XCode

  • Packaging orders

    flutter build ios

  • Release:

  • Register as an Apple Developer

  • Create app information to publish

  • Configuration key chain

  • Configure the Apple Stoer certificate and bundle ID in Xcode

  • xcode>Product>Archive>Distribute App

2.5.2 Web side

  • Flutter 2.x

  • Check whether web development $flutter Devices is supported

  • Packaging orders

    Create a flutter build web that is compatible with a flutter build web and a flutter renderer Canvaskit # slowest opening speed, good compatibility

  • Deployment: Deploy it on the server

3. Frame structure of Flutter

3.1 Mobile Architecture

3.1.1 Framework Framework layer

The framework layer. This is a reactive framework for a pure DART implementation that implements a base set of libraries.

  • The bottom two layers (Foundation, Animation, Painting, and Gestures) are merged into a Dart UI layer in some Google videos, corresponding to the Dart: UI package in Flutter, which is the underlying UI library exposed by the Flutter engine. Provides animation, gesture and drawing capabilities.

  • The Rendering layer is an abstraction layer that relies on the Dart UI and builds a UI tree. When the UI changes, it calculates what changes are made, updates the UI tree, and draws the UI tree onto the screen. The Rendering layer is similar to the Virtual DOM in React. The Rendering layer is the core of the Flutter UI framework. In addition to determining the location and size of each UI element, the Rendering layer also calls the underlying DART: UI for coordinate changes and Rendering.

  • The Widgets layer is the basic set of components that Flutter provides

  • Material and Cupertino are libraries of components that Flutter provides in two visual styles. Material Android style and Cupertino IOS style.

In the real world, most of the development work is done with the top Widgets and Material/Cupertino layers.

3.1.2 Engine Engine layer

The SDK, a pure C++ implementation, provides the underlying implementation of the Flutter core API for the Flutter core. These include the Dart runtime, the Skia engine, the typography engine, and more, as Bridges between the framework and the system (Android/IOS). When code calls the DART: UI library, the call eventually makes its way to the Engine layer, where the actual drawing logic is implemented.

3.1.3 Embedder Layer

The embedding layer is basically implemented by the language corresponding to the platform. For example, on Android, it is implemented by Java and C++, and on IOS it is implemented by object-C and object-C ++.

The embedded layer provides an entry point for the Flutter system to access services provided by the underlying system, such as input methods and drawing surfaces.

3.2 Web Architecture

3.3 Comparison of mobile terminal development mode architecture

4. Comparison of mobile terminal development

4.1 Comparison of Schemes

4.2 Performance Comparison

Here is a detailed performance comparison, not to repeat.

5. Around Flutter — Debug tools

Flutter log and print(); It is a common debugging method for checking data, but does not support checking graphical interfaces and layouts. 👇 👇 👇 👇 👇 👇

5.1 the inspector plug-in

Tools to visualize and browse the Flutter Widget tree. View the render tree for layout information.

5.2 Dev Tools

5.3 UME

Byte Open source in-app debugging tool from The Flutter Infra team.

Pub.dev pub.flutter-io.cn/packages/fl… GitHub github.com/bytedance/f…

Function => UI check, code view, log view, performance tools…

Serve => designers, product managers, R&D engineers or quality engineers…

  • UI inspection plug-in package. The ability to click a widget to get basic information about the widget, the directory where the code is located, the widget hierarchy, the build chain of the RenderObject and its description, and the ability to pick up colors and align rulers provide powerful help during visual acceptance.

  • Code view plug-in. Allows users to enter keywords, perform fuzzy matching, and view arbitrary code content.

  • View logs. Log information can be filtered and exported on the unified panel.

  • Performance check package. Provides information such as the number of current VM object instances and memory usage.

6. Around Flutter — the learning route

6.1 Learning Community

  • Flutter Chinese website 👉 to get started

  • Get started with Flutter Chinese community 👉

  • The architecture of the Saltwater Flutter 👉 can be referenced

  • Dig the professional blog Flutter 👉

  • StackOverflow 👉 q&A community has the most reliable answers to my flutter questions

  • 👉 🙋♂ 100 🙋♂ 100 🙋♂ 100 🙋♂ 100 ancestor ♂ 100

6.2 Learning Route

1. Preparation period

  • Goal:

  1. Learn the basic usage of Dart in Flutter by learning the basic syntax of Dart.

  2. Learn the basic layout and content components that Flutter provides to complete the basic page display.

  • Technical points:

  • The Dart grammar

    • The Dart’s official website
      • Dart online editor
    • Dart Packages

  • Flutter foundation assembly

  • Material Design

  • Cupertino

    • Summary of Flutter Widget

    • Flutter Layout Widget

    • Flutter Layout Tutorial

    • Material Design

  • Flutter Event Handling

    • Flutter add interaction
      • Flutter StatelessWidget and StatefulWidget

  • Flutter page jump

    • Flutter routing and navigation

2. Introductory period

  • Goals: learn about Flutter box models, gestures, animations, etc

  • Learning Materials:

  • Flutter box constraints

  • Flutter animation

  • Flutter gestures

3. Advanced stage

  • Objective: To master Stream in Dart and develop Flutter state management using Stream or other responsive programming ideas

  • Technical points:

  • The Dart asynchronous

  • Generator

  • Stream

  • The Flutter StreamBuilder

  • Bloc

  • Provider

  • Learning Materials:

  • Dart Stream

  • Dart generator

  • Bloc

  • FLutter Bloc

  • Flutter’s own son Provider

6.3 Learn about open source projects

UI Component set project FlutterUnit

7. Surrounding the Flutter — JS2Flutter

JS to Dart => JS2Flutter