This article was first published on wechat official account “Liu Wangshu”

preface

This article was supposed to cover how to build a Flutter development environment, but I thought that before learning about Flutter, it would be helpful to understand the evolution of cross-platform technology, and to understand the advantages and nature of Flutter. Another goal of this article is that we should be people who play technology, not people who are played by technology, and make our own judgments about different technologies.

1. The birth of cross-platform technology

I started Android development in 2010. At that time, Android and iOS development was rare and not popular. Everyone was “feeling the river”. With the development of mobile development, Internet companies also emerge in an endless stream. Some companies, forced by competition, want to develop more quickly and cost less, so they no longer meet the requirements of a set of code for Android and a set of code for iOS. At the same time, other technology fields and companies are trying to get their hands on the pie, and cross-platform technologies are starting to take root. The Android and iOS ecosystems are so large that we can compare them to the first-level ecosystem. Attempts to subvert these two systems have appeared before, but both failed. Therefore, establishing a secondary ecosystem is the safest strategy. For example, build your own ecosystem on top of Android, or launch various cross-platform technologies to build your ecosystem. There are so many frameworks that come out of cross-platform technology, many of which fall by the wayside before we can learn to understand them, becoming over-products of cross-platform technology. I think by the end of this article you’ll have an understanding of whether cross-platform technology is a fad or a trend. There is no standard answer for the classification of cross-platform technologies. Here, they are classified into five categories, namely Web App, Hybrid App, language compilation and transformation, native rendering, and self-drawn UI. Here are some of them.

2. Web App

A Web App is a web-based application that runs on the Internet and standard browsers, equivalent to a Web page and an App shell. In 2014, the STANDARD specification of HTML5 was completed. In the online public opinion, Web App has a great momentum to replace Native App. However, Web App has the following disadvantages, making it always “the heart of the protagonist and the life of the supporting actor” :

  • Low performance and poor operation experience
  • You can’t call native apis, you can’t do a lot of things,
  • Depending on the network, the experience is poor when the network speed is slow, and there is no offline function. If the optimization is not good, it will consume traffic
  • As a temporary entry point, user retention is low

On top of Web Apps, there have been several evolutions, mainly PWA.

2.1 PWA

PWA (Progressive Web App) stands for Progressive enhancement of Web applications. It is not a technology, but a concept that uses a variety of technologies to enhance the functionality of Web apps:

  • A series of Web technologies such as Service Worker + HTTPS +Cache Api + indexedDB are used to realize offline loading and caching
  • Push and notification are implemented
  • It can be added directly to the desktop of the phone
  • Background synchronization can be done using the Service Worker

To sum up, the main capabilities of PWA are offline, push and desktop access. It can be said that PWA endows Web App with native experience. However, the main reasons for PWA’s lukewarm performance are as follows:

  • The technology support for PWA is not comprehensive enough, not every tourist can support PWA 100%
  • Some domestic mobile phone manufacturers on Android system all kinds of magic changes, the compatibility of PWA is not good, even do not support PWA
  • Platform competition, iOS support for PWA is much lower than Android, so the experience of PWA on iOS is reduced. PWA has no advantage in the competition with similar micro programs and fast applications of wechat.

3. Hybrid App

In addition to using native and Web development apps, HTML5+ native can also be used for mixed development, which is Hybrid. There is a short story about the birth of Hybrid. The App of a second-tier Internet company was mainly native, but HTML5 development was not in progress. As the application became more and more complex, one day it was found that there was a limit on the maximum number of native methods, and some pages needed to embed HTML5 pages. The native and HTML5 teams worked together on the first Hybrid project. The code was tri-compatible and efficient, so Hybrid apps became mainstream for the company and the rest of the industry followed suit.

The architecture diagram of the native App is shown below.

Through apis provided by the native SDK, apps can communicate with the underlying system to create UI components or access system services. These components are rendered to the phone screen, and events generated by the screen are passed back to the component. Because the system components of each platform are different, you need to develop a separate App for each platform, but Hybrid App does not need to do so. The native UI components of Hybrid App are used to display the interface with complex interaction and high rendering requirements, while the rest can be presented by HTML5. Although the development efficiency of Hybrid App is high and it can be cross-platform, the experience of Hybrid App is not as good as the original one. For teams that need quick trial and error and quick market occupation, Hybrid App is a good choice. After the team is stabilized in the later stage, It’s better to make a native APP with a better experience or use another cross-platform technology with a better experience.

There are many Hybrid technologies, such as PhoneGap, Cordova, Ionic, VasSonic, and so on.

3.1 Cordova

Cordova is not without its predecessor, PhoneGap. PhoneGap was designed for Web developers to build cross-platform apps using HTML, CSS, and Javascript. In 2011, Apache acquired Nitobi Software and its PhoneGap product and opened source PhoneGap. In version 2.0 of PhoneGap, the product was renamed Apache Cordova. Cordova supports Android, iOS, Windows, Mac OS X, and Electron. The architecture diagram of Cordova is as follows.

Cordova also uses WebView to display interfaces. Plugins are an integral part of Cordova. Apache Cordova maintains Core Plugins, which provide App access to device functions such as batteries, cameras, and contacts. In addition to the core plugins, there are third-party plugins available, or you can develop your own.

3.2 Ionic

Ionic Framework is an open source UI toolkit originally aimed at developing mobile applications using Web technologies such as HTML, CSS, and JavaScript. Because of this foundation of Web technology, Ionic can run anywhere the Web runs, such as iOS, Android, browsers, Electron, PWA, and more. Ionic Framework is now officially integrated with Angular, but support for Vue and React is in development.

3.3 VasSonic

VasSonic is a lightweight high-performance hybrid framework developed by Tencent VAS team to speed up the H5 first screen running on Android and iOS platforms. VasSonic not only supports static or dynamic Web sites rendered by servers, but is also perfectly compatible with Web offline resources. VasSonic requests indexed HTML using custom URL connections rather than raw network connections, so it can request resources ahead of time or in parallel to avoid waiting for views to initialize. In this parallel scenario, VasSonic can read and render portions of the data through the WebKit or Blink kernel without spending much time waiting for the data stream to end.

3.4 wechat applets

The main development language of wechat small program is JavaScript, and the development of small program is very similar to the common web development. The running environment of the small program is divided into the rendering layer and the logic layer, which are respectively managed by two threads. The interface of the rendering layer uses WebView to render, and the logic layer uses JsCore thread to run JS scripts. The communication between the two threads will be mediated by JSBridage in wechat Native. The network request sent by the logical layer is also forwarded by Native. The communication model of the applet is shown in the following figure.

Where WXML templates and WXSS styles work in the rendering layer, JS scripts work in the logic layer. Both wechat applet and PWA are based on Web technology. The difference in principle is that applet is similar to Hybrid architecture. WebView renders basic webpage content, and components requiring high rendering performance are realized by native components, such as camera, video, map, etc. In addition, local capabilities that cannot be accessed by traditional Web. It needs to be realized through JS SDK, while PWA uses a variety of technologies to enhance Web capabilities, so as to achieve close to Native application experience.

Wechat small program itself and App is not a competitive relationship, more is a promotion channel, it is more like a poster, used for rapid promotion of reverse, and App is to promote the object. The disadvantages of wechat small programs are obvious. They cannot be compared with App in experience. Their functions rely on and are limited by wechat, so they cannot be expanded. It can be said that wechat mini program is to establish a secondary ecosystem, in which wechat is in charge, the development of other competitors will be limited.

4. Language compilation and conversion

Language compilation conversion refers to the direct compilation of a language into a platform binary. The better known framework is Xamarin. Although it is implemented on the Android platform with the embedded Mono virtual machine, it is compiled into binary files in the mode of AOT on the iOS platform, so it is classified as the language compiler conversion type.

4.1 Xamarin

Xamarin was founded in 2011 and acquired by Microsoft in 2016. Xamarin is an offshoot of the Mono project based on. NET cross-platform implementation of an open source project. Unlike frameworks such as PhoneGap, Xamarin can call the API as soon as iOS and Android introduce new features, while PhoneGap waits for new features to be wrapped by PhoneGap before calling the API. The implementation principle of Xamarin’s Android is shown in the following figure.

5. Native rendering

Native rendering in this article refers to JavaScript developed and rendered by Native controls, including React Native, Weex, and Fast applications.

5.1 the React Native

Facebook was struggling on mobile. They thought they could implement Facebook mobile apps without any Native development means, so they chose HTML5 in the early stage. Later, they found that HTML5 was not as efficient as Native, so they launched React Native in 2015. React Native is a derivative of Facebook’s early open source Web UI framework React on the Native mobile application platform. The underlying layer encapsulates the Native code of Android and iOS platforms and can be written using JavaScript.

5.2 Weex

Weex is a cross-platform mobile development tool of Ali open source. It can give perfect consideration to performance and dynamic, allowing mobile developers to write native level performance experience through simple front-end syntax, and support iOS, Android, YunOS and Web multi-terminal deployment. Weex supports Vue and Rax, while React Native supports only JSX.

Weex will first write Weex source code, through Transformer into JS Bundle. Then deploy the JS Bundle on the server. When receiving the JS Bundle request from the terminal (Android, Web, iOS), send the JS Bundle to the terminal. In the terminal, JS Framework of Weex receives and executes JS Bundle code, performs data binding, template compilation and other operations, and outputs Virtual DOM in JSON format. JS Framework sends rendering instructions to Native. Provides callNative and callJS interfaces to facilitate communication between JS Framework and Native.

5.3 quick application

In March 2018, 10 domestic mainstream manufacturers including Xiaomi, OPPO, VIVO and Huawei established the Fast Application Alliance. Fast application is between mobile web page and native application. Third-party application is developed in the form of mobile web page, and finally gets the effect experience of native rendering. Fast application framework deep integration into the mobile phone operating system of each handset vendors can be formed in the operating system level user needs and application service seamless connection, many in native applications can use function, in applications can easily realize the fast, enjoy the native application experience, don’t worry about the problem such as distribution of retained at the same time, less resource consumption also. For each mobile device, applications can reference user experience products from multiple systems. There are two main differences between React Native and Weex:

  • The Quick app itself does not support Vue or React syntax and is developed using JavaScript.
  • React Native and Weex’s rendering engines are integrated into the framework, and each APP needs to be packaged with a large installation package. Fast application rendering engines are integrated into ROM, so there is no need to package applications, and the installation package is small.

Similar to wechat mini program, fast application is also to establish a secondary ecology in essence. The structure of fast application is shown in the figure below.

Fast application implementation is divided into compile-time, run-time two aspects, UX page source code compiled to get JS, and then through the run-time interface UI. Each page is composed of HTML+CSS+JS, and the DOM tree in memory is obtained after compilation and running. Multiple pages form a project, which is compiled into an RPK file, and finally rendered as an application at runtime.

Fast application launched 1 years later is still tepid, in the face of wechat small program, fast application in the flow and entrance and other key data are unable to match the small program, the future development of worry.

6. Since the UI

Self-drawing UI refers to drawing the UI through a rendering engine that implements a unified interface on different platforms, without relying on native controls of the system platform, so that the UI of different platforms can be consistent. Unlike React Native, developers need to deal with the differences between different platforms as the versions of different platforms change. Some features can only be implemented on a single platform, which cannot guarantee the consistency of UI between different platforms. Examples of self-drawn UI frameworks are Qt and Flutter.

6.1 Qt

Qt has a long history. The first version of Qt was released by Trolltech in 1991. Later, in 2008, Nokia bought TrollTech for $150 million to use Qt for Symbian application development. On 9 August 2012, Nokia sold Qt to Digia for eur 4 million. In 2016, Qt Group Plc was spun out from Digia. In 2014, Qt began to support Android, iOS and Wp platforms on mobile terminals. While Qt is doing well on the PC, it is not doing well on mobile, and few people are talking about or using Qt for mobile.

6.2 Flutter

Flutter is Google’s mobile UI framework for quickly building high-quality native user interfaces on Android and iOS. It is the predecessor of Google’s pilot project Sky. Futter proposed the concept of everything as a Widget. In addition to basic text, images, cards, input fields, layouts and animations are also made up of widgets. By using different types of widgets, you can achieve a complex interface.

The Flutter framework uses a layered design. Its goal is to help developers get more done with less code. For example, the Material layer is made up of normal widgets from the Widgets layer, while the Widgets layer itself is built from low-level objects from the rendering layer. The fact that frameworks based on Flutter have started to emerge is proof that the industry is beginning to embrace Flutter and experiment with it.

conclusion

There is no standard answer to the classification of cross-platform technologies, and this is only a rough classification and an introduction to the mainstream frameworks of each category. In fact, there are many frameworks that are not mentioned, either dying out, having obvious shortcomings that are difficult to use, or being the product of kpIs of large companies. The evolution of cross-platform technology is like the contention of a hundred schools of thought, which greatly promotes the development of cross-platform technology. In my opinion, it’s hard to judge the advantages and disadvantages of these cross-platform technologies from the point of view that they allow programmers from different technical branches to participate and enjoy mobile development. I’d rather have a framework to unify the entire cross-platform technology. Would that be Flutter? Or the next unknown framework? Which cross-platform technology do you prefer?

Thank visualstudio.microsoft.com/xamarin/ phonegap.com/ cordova.apache.org/ github.com/Tencent/Vas… Book. Flutterchina. Club/chapter1 / mo… Developers.weixin.qq.com/miniprogram… Docs.microsoft.com/zh-cn/xamar… Blog.csdn.net/baidu_brows… Fex.baidu.com/blog/2015/0… www.cnblogs.com/yexiaochai/… www.infoq.cn/article/why… Blog.csdn.net/MeituanTech… www.uml.org.cn/AJAX/201812… Blog.csdn.net/powertoolst… www.jianshu.com/p/32285c709… www.jianshu.com/p/098af61bb… Segmentfault.com/a/119000001… www.uisdc.com/web-hybrid-… www.jianshu.com/p/7e0bd4708…

Share big front-end, Android, Java and other technologies to help 50,000 programmers grow and advance.