This article covers everything about the Flutter, including the Fuchsia, Dart, Flutter characteristics, installation, and overall architecture.

Introduction to the

The Flutter has attracted a lot of attention since its launch as Google’s latest cross-platform development framework. What we know about Flutter is that it is a cross-platform development framework. But there’s more to it than that. Fuchsia, Dart, etc., we need to learn about.

Fuchsia

When it comes to Flutter, you can’t get around Fuchsia, a new operating system developed by Google, the GitHub address and the Google Source home page. Fuchsia Kernel is Magenta Kernel, a project based on LittleKernel. Compared with Android, the system has much lower hardware requirements, such as memory and memory, and the external reasoning is that it is a system for the Internet of things. I did not find out the purpose of Google’s development of this operating system, if you know, please let me know.

As many bloggers have pointed out, it’s a bad idea to just replace Android. Any technology has to be driven by the business behind it, especially when it comes to the interests of handset manufacturers.

Flutter

The Flutter is Fuchsia’s development framework, a mobile UI framework that allows you to quickly build high quality native user interfaces on iOS, Android, and Fuchsia. Flutter is currently completely free, open source, and GitHub. Its official programming language is Dart, which is also a brand new language. So, it’s expensive to get started, the language and frameworks are new for mobile developers, and the entire technology stack has to be built from scratch.

Check out the official features:

  • Fast development: The hot overload of Flutter allows you to test quickly, build uIs, add functionality, and fix bugs faster.
  • Expressive, beautiful user interface: Built-in Material Design and Cupertino (iOS style) widgets, rich Motion API, smooth and natural sliding effects.
  • Responsive Framework: Build your user interface easily with Flutter’s modern, responsive framework, and a set of basic widgets.
  • Access 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 application development experience: Flutter has a wealth of tools and libraries that help developers easily implement ideas and creativity on both iOS and Android.
  • Native performance: Flutter contains a number of core widgets such as scrolling, navigation, ICONS, and fonts that can achieve the same performance as native apps on iOS and Android.

In fact, from the official feature point of view, the only thing that has any traction is the unified application development experience. One set of code runs on multiple platforms, making it truly cross-platform. Like hot loading, which is currently supported by Android development itself, responsive frameworks and access to Native functionality and SDKS are not inherently attractive to Native developers. As for the beautiful user interface, which domestic commercial project will Design according to Material Design?

Cross-platform itself, often means performance damage, universality can not solve the problem, and then back to Native implementation. So these are the reasons why cross-platform has been mentioned since the beginning of mobile and has not been well addressed. It’s hard to say how far Google can go, or what expectations developers should maintain. Maybe Google has solved a long-standing problem, or maybe it’s just like any other project 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 applications. Flutter uses Dart for a number of reasons, but beyond the commercial Java copyright issues, it’s purely technical:

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

Dart was originally designed to replace JavaScript as the language of choice for Web development, and the result can be seen as a shift in positioning with the release of Dart 2, which focuses on improving the experience of building client-side applications. If you’ve used Java or Kotlin, you’ll be able to pick up Dart quickly.

I think one of the most important aspects of a language’s success or failure, regardless of the business drive behind it, is the ecosystem, the ecosystem, the number of developers, the number of third-party libraries, and Dart’s ecosystem is pretty poor right now. For individual developers, you can choose based on mood, but for business applications, there are more complex considerations. Dart is being pushed by Google, and how far it goes depends on its commercial capabilities.

configuration

This part is for the Mac platform, Windows platform installation and configuration, Linux platform installation and configuration. Since I mainly work on mobile, if I want to use the Flutter for iOS and Android development, I also recommend the Mac platform. After all, iOS can only simulate debugging on Mac.

Install the Flutter

git clone -b beta https://github.com/flutter/flutter.git
exportPUB_HOSTED_URL=https://pub.flutter-io.cn // Domestic users need to setexportFLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn // Domestic users need to set this parameterexport PATH=`pwd`/flutter/bin:$PATH
Copy 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, which will install the Dart plugin as well.

Experience the Flutter

The IDE recommends that you choose Android Studio. With the Flutter plugin installed, the development of Flutter is similar to Android development, with three templates, breakpoint debugging, and more.

Create a new project with the Flutter Application in Android Studio, select the emulator or run it directly on a real machine, and you will see a simple Flutter Application that can be used on both Android and iOS.

Flutter architecture

The Flutter is a mobile application SDK, a single piece of code that can generate high performance, high fidelity applications for both iOS and Android.

The most appealing aspect of Flutter for mobile developers is its completely cross-platform nature. Unlike RN, which is a place to write around, it is a place to write and run, but how is it different from other cross-platform platforms?

Cross-platform solution

There are two types of cross-platform solutions on the market:

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

Do these solutions really solve the cross-platform problem? In the current state of things, obviously not, because they’re all tied up in performance, package size, smoothness, memory, platform features, and so on.

RN singled them out, because they are not the pursuit of “write once and run everywhere”. FB also knows that this is not realistic, so the slogan is changed to “write everywhere” to consider the characteristics of the platform and the problem that is often ignored by cross-platform solutions. However, RN has not been widely accepted. From the beginning of Use to the abandonment of Ali, there are many holes in RN that can not be overcome. It’s tempting to write about going around once, which saves a lot of labor from an enterprise perspective, but it ignores the very basic question of whether different platforms want this, whether Apple would like its ecosystem to be broken, and whether different platform features should be grouped together.

Cross platform solution for Flutter

After a brief overview of traditional cross-platform solutions, let’s take a look at the Solution to The Flutter. The core part of the Flutter cross-platform is its high-performance rendering Engine (Flutter Engine). Flutter does not use browser technology or Native controls. It uses its own rendering engine to draw widgets.

Speaking of widgets, the whole idea of Flutter is a widget. Widgets are the basic building blocks of the User interface for the Flutter application. Each widget is an immutable declaration of a part of the user interface. Unlike other frameworks that separate view, controller, layout, 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 of the Flutter engine is compiled by the NDK, and for iOS, by LLVM. The Dart code for both platforms is AOT compiled to native code, and the Flutter application runs using the native instruction set.

By using the same renderer, framework, and set of widgets, Flutter allows you to build iOS and Android apps simultaneously, without having to maintain two separate code bases.

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

Flutter framework

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

The Framework provides the basic component libraries, and the Engine section renders widgets. The Engine and the Framework work together. The operation performance is efficient and stable.

Flutter research

ecological

On the official Pub platform, there are about 2,000 pure Flutter packages, and there are almost all the common libraries, such as Internet, pictures, audio and video playback, etc. However, for the current Ecosystem of Android and iOS, it is still far from enough. For some complex UI or some functions that are not particularly common, you have to implement it yourself.

Packet size

According to the website, the smallest version of the Android app Flutter. The release version size is about 6.7MB, of which the core engine is about 3.3MB, the framework + application code is about 1.25MB, the LICENSE file (included in app.flx) is 55K, the required Java code, the dex is 40K, and there is about 2.1MB OF ICU data. Considering the current network environment, the increase in packet size is still acceptable.

Crash

The official example of iOS running the Flutter occasionally crashes, so we put the open-source Flutter app, Bugly report, into crowdtesting on Android.

There were about 150 participants and about 500 startup times, but no Crash data was reported. Because the app was very simple, it could not explain many problems. However, the users of the mass test reported about 12 pieces of information, among which one piece was similar to ANR and could not be operated, and the rest were feedback related to lag.

fluency

I sent the official example to the test students and ran it on different machines on iOS and Android platforms. On iOS, it basically runs smoothly without any lag, while on Some Android devices, there is a lag.

Because there is no complex example, in fact, the fluency of the test, meaning is not particularly big, the official simple control demo program, itself is very simple, but there are still many problems on Android, only to show that the overall there is a very large space 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 component libraries are not very rich yet. There’s a lot of code, about 500 lines of code, but it doesn’t involve interaction, data binding, etc.

From the running effect, or a good comparison, both restore the effect is very good.

conclusion

As an individual, I think I can be confident and bold to learn and try. I can independently develop apps and write a set of code to run and publish on multiple platforms.

If you are a business team, you have to decide on this. At present, the Flutter ecology is very imperfect and there is very little information about it. It is currently in beta stage 3, and it is unknown how long it will take to get to the release or whether it will get to the release. Moreover, the biggest risk with Flutter is that the overall project cannot be controlled. Once there are some pits, if they can be filled, it is ok; if there are problems that cannot be solved, we can only give up. Therefore, it is more appropriate to see their own team manpower and reasonable arrangement of time. Now ali’s salt-fish team is working on the Flutter.

In terms of the problems that Flutter can solve, the use of Flutter does generate a certain amount of revenue and cost savings, which may not be evaluated given the current high number of pits and the time spent on the pits.

Overall, the Flutter is really a good thing, and if Google can develop it well, it will be a good thing for individuals and small teams.

The latter

I have a new project, Github, which contains my articles on flutter learning. I will also upload some learning demo to github.

reference

  1. Because Chinese website
  2. Google’s new operating system Fuchsia has been discovered!
  3. Why did Flutter choose Dart?
  4. Learn the Dart language
  5. Why mobile cross-platform development doesn’t work
  6. Why was Flutter revolutionary?