Android in one life and one life

The Android system

Android system as the world’s largest system, based on Java development of mobile terminal has many performance advantages. The performance bottleneck of pre-2018 H5 and a series of shortcomings of React-Native (animation performance, third-party dependencies, extra overhead on logic, difficulties in debugging, not being able to completely block native platforms, etc.) led to a loss of confidence in cross-platform development. It wasn’t until October 2018 that Google launched its first cross-platform solution, The Flutter, which broke the whole mobile development paradigm.

Why does the Flutter become an Android directional marker

  1. Cross-platform: The rendering of Flutter is based on the image rendering engine. The rendering effect is absolutely consistent across different platforms. It is truly cross-platform
  2. Performance: Unlike H5, which uses DOM rendering and RN mapping components, Flutter is drawn directly on native. Performance completely exceeds native
  3. Hot reloading: Android native development encounters a compile-package-install trilogy. Development efficiency has been slow to improve. Hot overload technology is perfectly embodied in the Flutter

Introduction to Flutter

  1. Dart syntax compilation: Dart is a strongly typed, cross-platform client-side development language. A style optimized for the client, high productivity, fast and efficient, portable and easy to learn. Dart is primarily developed and maintained by Google
  2. The Dart language that Flutter uses does not directly call the Java interface provided by The Android system, so a plug-in is needed to relay the Flutter. Flutter officially offers a rich native interface package

Flutter system structure

Skia image processing engine

  1. The Skia image processing engine was launched in 2005 to showcase Chrome, Firefox and other Google products.
  2. When the first Android was released in 2007, Google developers ported Skia to Android.
  3. Skia is a 2D graphics system, including drawing, rendering, and displaying pictures.

Will native developers touch SKia?

Skia engine in detail

  • Question: is it true? I’ve only been exposed to bitmaps, and it turns out there are a lot of secrets underneath bitmaps

What does the Skia engine have to do with the Flutter?

  • Is there any other way to define the layout in XML or to extend the View to the Android screen?

Why does Flutter achieve the three features

cross-platform

performance

Rendering process

React rendering is similar to the Flutter rendering

React and Flutter renderings differ

  1. Drawing trees: ReactNative’s chain structure based on ReactShadow creates a virtual Dom tree in memory. Flutter is a rendering method of different layers through the engine.
  2. The mechanism is different: ReactNative is ultimately reflected as a native control, whereas Flutter is underlying rendering directly through the engine, with no mapping.

Flutter rendering

The rendering process of the Flutter interface is divided into three stages: layout, drawing, and composition. The layout and composition are done by the engine within the Flutter framework.

Flutter advantage

  • Flutter was born! In the responsive framework of Flutter, controls in the control tree are drawn directly through a portable graphic-accelerated rendering engine, high-performance native ARM code, and no intermediate objects such as virtual DOM or virtual controls, real DOM or platform controls are required to be drawn. The Responsive framework utilizes all the capabilities of the hardware directly in a “no middleman” way, so as mentioned above, the Performance of the Flutter App is much better than that of the native App.

Personal opinion

  • Personally, I’m very optimistic about Flutter compared to the major cross-platform frameworks. After all, Google’s own son, you can write your own Flutter APP. Run around on different devices and see for yourself.

plan

I will follow up with a series of articles on developing a complete Flutter project from scratch, and write myself down.

Flutter Series

  • Overview of the Dart Language (Variables, built-in types, functions, Operators, flow control statements)
  • Overview of Dart Language Basics (Exceptions, Classes, Mixins, Generics, Libraries)
  • Overview of Dart Language Basics (Asynchronous, Generator, Isolation, Metadata, Annotation)
  • Basic Widgets and Material Components Widgets are introduced comprehensively

Thank you

  • Because Chinese website