Introduction to the

Flutter, Google’s recently launched cross-platform development framework, has attracted a lot of attention since its launch. As far as Flutter is concerned, it is a cross-platform development framework. However, it does not stop there. For example, Fuchsia and Dart need to be understood.

Fuchsia

When it comes to Flutter, there’s no getting around Fuchsia, Google’s new operating system, GitHub address and Google Source home page. The Fuchsia Kernel is Magenta Kernel, a project based on LittleKernel. Compared with Android, the system has significantly reduced hardware requirements such as memory or memory, so it is inferred that it is a system oriented to the Internet of things. I haven’t found out what Google is doing with this OS. If you know, please let me know.

As many bloggers have said, simply replacing Android is a bad idea. Any technology to promote, have to rely on the business behind the drive, especially this kind of technology involving the interests of mobile phone manufacturers.

Flutter

Flutter is Fuchsia’s development framework. It is a mobile UI framework that can quickly build high-quality native user interfaces on iOS, Android, and Fuchsia. Flutter is currently completely free, open source, GitHub address. Dart, the official programming language, is also a brand new language. So the cost of getting started was high, the language and framework were new to mobile developers, and the entire stack had to be built from scratch.

Check out the official features:

  • Rapid development: The thermal overload of Flutter allows you to quickly test, build UI, add features, and fix bugs faster.
  • Expressive and beautiful user interface: Material Design and Cupertino (iOS style) widgets, rich Motion API, smooth and natural sliding effects.
  • Responsive Framework: Easily build your user interface using Flutter’s modern, responsive framework and a series of basic widgets.
  • Access to native features and SDKS: Flutter can reuse existing Java, Swift or ObjC code to access native system features and system SDKS on iOS and Android.
  • Unified app development experience: Flutter has a wealth of tools and libraries that help developers easily implement ideas and ideas on both iOS and Android systems.
  • Native performance: Flutter contains many core widgets, such as scrolling, navigation, ICONS and fonts, that can perform as well as native apps on iOS and Android.

In fact, the only thing that is mildly attractive from an official feature point of view is a unified app development experience. One set of code runs on multiple platforms, making it truly cross-platform. Like hot loading, currently Android development itself supports responsive frameworks and access to Native features and SDKS, which is not attractive to Native. As for the beautiful user interface, which domestic commercial project will be designed according to Material Design?

Cross-platform itself often means that performance is impaired, and problems that cannot be solved by generality have to be implemented back to Native. Therefore, these factors are also one of the reasons why cross-platform has not been well solved since the birth of mobile. I don’t know how far Google can go, or what expectations developers should hold. Maybe It’s a solution to a problem that’s been around for years, or maybe it’s just another project that Google has abandoned. Aside from business level, for technical personnel, we more should pay attention to the thought of it, Google is how to solve the actual problems existing for a long time, as for the development of the technology itself, this is a personal developers can’t go around, the change of technology, maintain a state of learning, and then try to exercise the body, can not be eliminated.

Dart

Dart is a Computer programming language developed by Google. It was released in October 2011 and can be used for web, server, mobile and Internet of Things development. Dart is adopted by Flutter for a number of reasons, from a purely technical point of view, aside from commercial Java copyright issues:

  • Dart is compiled Ahead Of Time (AOT) into fast and predictable native code, enabling Flutter to be written almost entirely using Dart.
  • Dart can also be compiled Just In Time (JIT) with a fast development cycle.
  • Dart makes it easier to create smooth animations and transitions that run at 60fps;
  • Dart eliminates the need for a separate declarative layout language for Flutter;
  • Dart is easy to learn and has features familiar to users of both static and dynamic languages.

Dart was originally designed to replace JavaScript as the language of choice for Web development, and as you can imagine, the shift in positioning can be seen with the release of Dart 2, which focuses on improving the experience of building client applications. Dart can be quickly picked up by people who have used Java or Kotlin.

The success or failure of a language, regardless of the commercial push behind it, I think is very important in terms of its ecology, the quality of the ecology, including the number of developers and third-party libraries, and Dart’s ecology is still pretty poor. For individual developers, it’s a matter of mood, but for business applications, there are more complex criteria. Dart has Google behind it, but how far it can go depends on its commercial capabilities.

configuration

This part is for the installation and configuration of Mac platform, Windows platform and Linux platform. Since I mainly develop Flutter on mobile devices, if I want to use Flutter to develop all platforms of iOS and Android, THE environment is also recommended to be Mac. After all, iOS can only be simulated and debugged on Mac.

Install the Flutter

Git clone - b beta https://github.com/flutter/flutter.git export PUB_HOSTED_URL = HTTP: / / https://pub.flutter-io.cn / / domestic users need to set up Export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn // You need to set export PATH= 'PWD' /flutter/bin:$PATHCopy the code

IOS Settings

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
Copy the code

The Android Settings

Download Android Studio and install the Flutter plugin. The Dart plugin will also be installed.

Experience the Flutter

The IDE recommended choice of Android Studio, after installing the Flutter plugin, Flutter development is similar to Android

Development is similar, with three template engineering, breakpoint debugging, etc.

Create a Flutter Application project in Android Studio, select the emulator or run it directly on the real machine, and you can see a simple Flutter Application. You can see the differences between Android and iOS platforms.

Flutter architecture

Flutter is a mobile app SDK, a single piece of code that generates high performance, high fidelity applications for both iOS and Android.

img

Flutter different platform performance

The most attractive feature of Flutter for mobile developers is that it is completely cross-platform. Unlike RN, which writes everywhere, Flutter writes and runs everywhere. But how is Flutter different from other cross-platforms?

Cross-platform solutions

Cross-platform solutions on the market can be roughly divided into two categories:

  • Use platform-supported Web technologies: These solutions basically load the mobile browser in the application and perform all the logic, such as PhoneGap, in that browser.
  • Native cross-platform: Code written by programmers is automatically converted to Native code, which has the advantage of near-native performance, such as RN, Weex, Xamarin, etc.

Do these solutions really solve the cross-platform problem? At this point, it’s pretty clear that there aren’t any, as they all have problems with performance, package size, fluency, memory, platform features, etc.

img

August 2017 cross-platform performance test

RN put it out separately, because they are not the pursuit of writing everywhere at once, and FB himself knows that it is not realistic, so he changed the slogan into learning to write everywhere at once, to consider the characteristics of the platform, and to consider this problem that is often ignored by cross-platform schemes. However, RN has not been widely accepted, and there are many problems in it from ali’s use to his abandonment. It’s tempting to write one run at a time and save a lot of people from an enterprise perspective, but it ignores the fundamental question of whether different platforms want this, whether Apple is willing to break its ecosystem, and whether different platform characteristics should be categorized as consistent.

Flutter’s cross-platform solution

The core of Flutter’s cross-platform solution is its high-performance Flutter Engine. Flutter does not use browser technology or Native controls. It uses its own rendering engine to draw widgets.

Speaking of widgets, everything about Flutter is the concept of widgets. Widgets are the basic building blocks of the USER interface of the Flutter application. Each widget is an immutable declaration that is part of the user interface. Unlike other frameworks that separate views, controllers, layouts, and other properties, Flutter has a consistent unified object model: widgets. The framework can be more efficient when updating widgets.

For Android, the C/C++ code for the Flutter engine is compiled by NDK, and for iOS, it is compiled by LLVM. The Dart code for both platforms is AOT compiled to native code, and the Flutter application runs using the native instruction set.

Flutter builds iOS and Android apps simultaneously by using the same renderer, framework and set of widgets, without having to maintain two separate code libraries.

img

Flutter

Flutter moves UI components and renderers from the platform to the application, which makes them customizable and extensible. The only thing Flutter requires is a canvas so that custom UI components can appear on the device’s screen.

Flutter framework

A Flutter framework is a layered structure, with each layer built on top of the previous one.

img

Flutter framework

The Framework doesn’t have much to say about it, but it’s pretty simple. It’s divided into two parts, Framework and Engine. The Framework provides the basic component libraries, and Engine renders widgets. Makes the operation performance efficient and stable.

Flutter research

ecological

On the official Flutter Pub platform, there are more than two thousand pure Flutter packages. There are almost all the common Flutter libraries, such as websites, images, audio and video playback, etc. However, for the current Android and iOS ecosystem, it is far from enough. For some complex UI or some functions that are not particularly common, you have to implement them by yourself.

Packet size

According to the website, a minimal Android version of Flutter application. The release size is about 6.7MB, with the core engine around 3.3MB, framework + application code around 1.25MB, LICENSE file (included in app.flx) 55K, required Java code. Dex is 40K, and about 2.1MB of ICU data. Considering the current network environment, the increase in package size is also acceptable.

Crash

The official iOS application sometimes crashed, so we added Bugly to an open source Flutter application to report it and conducted a mass test on Android platform.

img

The number of testing platforms and startup times

The number of participants is about 150, and the startup times are about 500 times, without a single Crash data report. Because the APP is very simple, it cannot explain many problems, but about 12 pieces of information have been fed back by the users in the mass test, among which 1 piece is similar to ANR and cannot be operated, and the rest are feedbacks related to lag.

fluency

I sent the official example to test students and ran it on different machines on iOS and Android platforms. It basically runs smoothly on iOS, and there is no lag phenomenon. On some Android devices, there is a lag phenomenon.

img

Android Fluency evaluation

img

IOS Fluency evaluation

Because there is no complex example, in fact, this fluency test, meaning is not particularly big, the official simple control demo program, itself is very simple, but there are still many problems on Android, can only show that the overall has very large room for optimization.

Writing complexity

Try to follow a design draft simple pure layout code, a first-time or more complicated to use, especially the nested levels of terror, and is a problem for code maintenance, and because the widget mechanism of Flutter, many components support only the most basic operations, such as some extension attributes, all get oneself to realize, And the component library is not very rich yet. It’s also a lot of code, about 500 lines of code, but it doesn’t involve interaction or data binding.

img

IOS and Android performance comparison

From the running effect, or relatively good, both of the reduction effect is very good.

conclusion

As an individual, I think I can be assured to learn and try boldly. If I develop an APP by myself, I can write a set of code to run and release it on multiple platforms.

If it is a commercial team, it is up to them to decide. Currently, the Flutter ecology is still very incomplete and there is very little information on it. Ali’s salty Fish team is currently working on Flutter.

If only from the perspective of the problems that Flutter itself can solve, the use of Flutter can indeed generate certain benefits and save development costs. Considering the current situation of many potholes and the time spent treading potholes, it may not be possible to evaluate.

Overall, Flutter is a good thing, and if Google can develop it properly, it could be a boon for individuals and small teams.