Flutter a different cross-platform solution

This article mainly introduces flutter related things, including fuchsia, Dart, flutter features, installation, and overall architecture.

1. Introduction

Flutter, as Google's recently launched cross-platform development framework, attracted a lot of attention once it was launched. Regarding flutter, atrial flutter we now know that it is a cross-platform development framework. But it does not stop there, such as fuchsia, dart, and so on, which we all need to understand.

1.1 Fuchsia

Speaking of flutter, absolutely no fuchsia, this is Google developed a new operating system, GitHub address and Google Source home page. The fuchsia kernel is magenta Kernel, a Littlekernel-based project. Compared to Android, the system has a significant reduction in hardware requirements such as memory and memory, and external inference is a system for the internet of things. The author did not find out the purpose of Google to develop this operating system, heart flutter if there is known, also please inform.

As many bloggers say, it's a bad idea to just replace Android. The drive for any technology is driven by the business behind it,flutter kicks  especially when it comes to the interests of handset makers.

1.2 Flutter

Flutter is the Fuchsia development framework and is a mobile UI framework that quickly builds high-quality native user interfaces on iOS, Android, a flutter and Fuchsia. Currently flutter is completely free, open source, GitHub address. Its official programming language is dart and is a completely new language. So, the cost of getting started is high, for mobile developers, languages and frameworks are completely new, the entire technology stack accumulation has to start from scratch.

You can look at the features of the official presentation:

• Rapid development: Flutter's hot reload allows you to quickly test, build a UI, add functionality, and fix errors faster.
• Expressive and beautiful user interface: comes with material design and Cupertino (iOS style) widgets, rich motion API, smooth and natural sliding effects.
• Responsive framework: Easily build your user interface with Flutter's modern, responsive framework, and a range of base widgets.
• Access local features and sdk: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 to help developers easily implement ideas and ideas in both iOS and Android systems.
• Native performance: Flutter contains a number of core widgets such as scrolling, navigation, icons and fonts, all of which can be used on iOS and Android to achieve the same performance as native apps.

In fact, the only thing that's interesting in terms of official features is a unified application development experience. A set of code runs on multiple platforms to achieve true cross-platform. Like Gegas, the current Android development natively supports, responsive frameworks and access to local features and SDKs, which are not very appealing to native itself. As for the beautiful user interface, the domestic commercial project, which one will go according to material design to go.

Cross-platform itself, often means that the performance is impaired, universality can not solve the problem, but also back to native to achieve. So these factors are also the cross-platform from the beginning of the birth of the beginning to mention, and now has not been a good solution to a reason. As to what Google can do, or what the developers should expect, I think it's hard to say that maybe Google has solved a difficult problem for years, or like other projects that Google has given up. Aside from the commercial level, for technical personnel, we should pay more attention to its thinking, Google is how to solve these practical problems for a long time, as for the development of technology itself, this is a personal developer can not go around, technology change, maintain a learning state, and then try to exercise the body, can be guaranteed not to be eliminated.

1.3 Dart

Dart, a computer programming language developed by Google, was released in October 2011 and can be used in the development of Web, server, mobile and Internet of things. Flutter uses dart for a number of reasons, leaving aside the commercial-level Java copyright issue, purely from the technical level:

• Dart is the AOT (Ahead of Time) compiled, compiled into fast, predictable native code, so that flutter can almost be written using Dart;
• Dart can also be JIT (Just in time) compiled, fast development cycle;
• Dart makes it easier to create smooth animations and transitions that run in 60fps;
• Dart makes flutter not require a separate declarative layout language;
• Dart is easy to learn, with 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 final result is that, with the release of Dart 2, focusing on improving the experience of building client applications, you can see the shift in positioning. People who have used Java and Kotlin can quickly get started with dart.

The success or failure of a language, aside from the commercial impetus behind, I think it is important that the ecological, ecological quality, mainly including the number of developers and third-party libraries, at present, the Dart's ecology is still relatively poor. For individual developers, you can choose according to your mood, but there are more complex considerations for business applications. Dart has a Google push behind, to what extent, but also to see its commercial operation ability.

2. Configuration

This section is for the Mac platform, the installation configuration of the Windows platform, and the installation configuration of the Linux platform. As the author mainly do mobile development, if you want to use Flutter for iOS and Android full platform development, the environment is also recommended Mac platform, after all, iOS can only be simulated debugging under the Mac.

2.1 Installing Flutter

git clone -b beta https://github.com/flutter/flutter.gitexport PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置export PATH=`pwd`/flutter/bin:$PATH

2.2 iOS Settings

brew updatebrew install --HEAD libimobiledevicebrew install ideviceinstaller ios-deploy cocoapodspod setup

2.3 Android Settings

Download Android Studio, install the flutter plugin, and install the Dart plugin together.

2.4 Experience Flutter

IDE recommends choosing Android Studio, after installing the flutter plugin, flutter development with Android
Similar development, with three kinds of template engineering, breakpoint debugging and so on.

Create a new Flutter application project in Android Studio, select the simulator or run directly to the real machine, and you'll see a simple flutter app that lets you see the difference between Android and iOS on different platforms.

3. Flutter architecture

Flutter is a mobile application SDK that can generate two high-performance, high-fidelity applications for both iOS and Android.

Flutter for mobile developers, the most tempting ability is its complete cross-platform feature, unlike RN, which is written everywhere, it is a write-out run, but what is the difference between him and the other cross-platform?

3.1 Cross-platform Solutions

Cross-platform solutions on the market can be roughly summed up in two categories:

• Use platform-supported Web technologies: These solutions basically load the mobile browser in the application and execute all the logic in that browser, such as PhoneGap.
• 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, and so on.

Do these solutions really solve cross-platform problems? From the present situation, it is clear that there is no, because they are always not open performance, packet size, fluency, memory, platform features and other issues.

RN separately twist out to say, is because they are not the pursuit of a write everywhere, FB oneself also know unrealistic, so the slogan changed into a study everywhere to write, to consider the characteristics of the platform, to consider the cross-platform program often overlooked problems. But RN has not been widely accepted, from Ali began to use to give up, inside a lot of pits are not around. It's tempting to write once and everywhere, and from an enterprise point of view, it can save a lot of manpower, but it ignores a very basic question, whether or not the platform wants to be so, whether Apple will be willing to break its own ecology, whether the characteristics of different platforms should be classified as consistent.

3.2 Flutter's cross-platform solutions

The above is simply a traditional cross-platform solution, and we look back at Flutter's solution, flutter the most central part of the cross-platform, is its high-performance rendering engine (flutter engines). Flutter does not use browser technology, nor does it use the native control of native, which uses its own rendering engine to draw widgets.

When it comes to widgets, say a flutter一切皆为widgetidea. Widgets are the basic building blocks of the Flutter application user interface. Each widget is an immutable statement 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 the Android platform, the flutter-C + + code for the engine is compiled by the NDK, and on the iOS platform, it is compiled by LLVM, and the DART code for two platforms is AOT-compiled into native code, flutter applications run using native instruction sets.

Flutter is exactly what it is by using the same renderer, framework, and a set of widgets to build both iOS and Android apps without having to maintain two separate sets of code libraries.

Flutter moves UI components and renderers from the platform to the application, making them customizable and extensible. Flutter only requires that the system provide a canvas so that a custom UI component can appear on the device's screen.

3.3 Flutter Frame

The flutter framework is a hierarchical structure in which each layer is built on top of the previous layer.

Frame nothing to introduce (mainly in detail I also did not find what information, capital embarrassment), looked very simple, is divided into two parts, the framework and engine parts, which the framework provides a variety of basic components library, engine parts rendering various widgets, Both of them work together to make the operation performance stable and efficient.

4. Flutter Research 4.1 ecology

In Flutter official pub platform, pure flutter package about more than 2000, basically common libraries are still there, such as the network, pictures, audio and video playback and so on. But for the current Android and iOS ecosystem, is still far from enough, for some complex UI or some not particularly common features, you have to implement.

4.2 Package Size

According to the official website, a minimal Android version of the Flutter app. Release version size about 6.7MB, where the core engine about 3.3MB, frame + The application code is approximately 1.25mb,license file (contained in APP.FLX) is 55k, the required Java code. DEX is 40k and has about 2.1MB of ICU data. Considering the current network environment, the size of the packet increases, but also in an acceptable range.

4.3 Crash

iOS run the official example, will sometimes crash off, so we will be an open source flutter application, added bugly escalation, on the Android platform for the audience.

Participants about 150 people, the number of start about 500 times, there is no crash data reported, because the app is very simple, and can not explain a lot of problems, but the user feedback about 12 information, 1 of which is similar to the ANR, unable to operate, the rest of the section is the feedback related to the lag.

4.4 Fluency

Send the official example to the test classmates and let the iOS and Android platforms run on different machines. Basically smooth running on iOS, there is no lag phenomenon, on Android part of the device, there is a lag phenomenon.

Because there is no complicated example, in fact, this fluency test, the meaning is not particularly large, the official simple control display demo program, itself is very simple, but on Android still appeared a lot of problems, can only explain the overall also has a very big optimization space.

4.5 Writing complexity

Try to follow a simple layout of the design of the code work, the initial contact is still relatively complex, especially the terrorist nesting level, for code maintenance is absolutely a problem, and because of the flutter widget mechanism, many components only support the most basic operations, such as some extended properties, All have to be implemented on their own, and now the component library is not very rich. The amount of code is also more, the entire code is about 500 rows or so, or just do not involve some interaction and data binding.

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

4.6 Conclusion

If it is an individual, I feel can be assured to learn to try, if you develop the app, you can write a set of code, run on multiple platforms to publish.

If it is a business team, this is the choice, at present, flutter ecological is still very imperfect, the relevant information is very small. At present in the Beta 3 phase, how long to release, whether to release, is an unknown, and, with flutter, the biggest risk is the whole project can not be controlled, once there are some pits, if you can fill it out, that is OK, if it involves the problem can not be solved, you can only give up. Therefore, it is appropriate to look at your team's manpower and time reasonable arrangement. At present Ali's Salted fish team is studying flutter.

If only from the flutter itself can solve the problem of the aspect, the use of flutter really can generate a certain income, save development costs, if the current pit more than the situation, plus the time of the pit, may not be able to assess.

Overall, flutter really is a good thing, if Google can make it more perfect, for individuals and small teams, it is indeed a gospel.

5. Something

The author has built a flutter study related projects, GitHub address, which contains the author of the Flutter study related to some of the articles, will be updated regularly, will also upload some learning demo, welcome attention.

6. Reference

1. Flutter Chinese web
2. Google quietly developed a new operating system fuchsia was found!
3. Why would flutter choose Dart?
4. Flutter Tutorial (ii) Understanding the Dart language
5. Why is mobile cross-platform development unreliable?
6. Why is it that flutter is revolutionary?

Flutter a different cross-platform solution