preface
Overview of Flutter development in comparison to other hybrid developments
Why use Flutter?
- Introduction to Cross-platform Technology
- Introduction to Hybrid Technology
- Introduction of QT
- Introduction of Flutter
Why use Flutter?
What are the advantages of Flutter? It can help you: 1. Improve development efficiency
2. Same code for iOS and Android
3. Do more with less code
Iterate easily
5. Change the code and reload it while the application is running (via hot reloading)
Fix the crash and continue debugging from where the application left off
7. Create beautiful, highly customized user experiences
9. Benefit from the rich Material Design and Cupertino (ios-style) widgets provided by the Flutter framework
10, to achieve customized, beautiful, brand-driven design, without the limitation of native controls
Introduction to Cross-platform Technology
People have been trying to find a good solution to the problem of native development, and there are many cross-platform frameworks (note that the term “cross-platform” in this book refers to Android and iOS unless otherwise stated), which fall into three main categories: 1. H5+ Native (Cordova, Ionic, wechat app) 2. JavaScript + Native rendering (React Native, Weex, Quick App) 3. 4. In the following chapters, we will look at the principles, strengths and weaknesses of each of the three frameworks.
Introduction to Hybrid Technology
H5+ native hybrid development
The main principle of this kind of framework is to realize part of the content that needs to be dynamically changed through H5, and load it through the native web page loading control WebView (Android) or WKWebView (ios) (unless otherwise specified later, We use WebView to refer uniformly to web page loading controls in Android and ios. In this way, the H5 part can be changed at any time without issuing a version, dynamic needs can be met; Also, h5 code can be developed once and run on both Android and iOS platforms, which can reduce development costs. In other words, the more features h5 has, the less development costs will be. We call this h5+ native development mode Hybrid development. The APP developed in the Hybrid mode is called Hybrid application or Hybrid APP. If most of the functions of an application are realized by H5, we call it Web APP.
Some of the best examples of hybrid frameworks are Cordova, Ionic, and wechat applets. It’s worth noting that wechat applets are currently rendered in WebView rather than native rendering, but native rendering is possible in the future.
Mix development technology points
As mentioned earlier, native development has access to all platform functionality, while hybrid development has h5 code running in a WebView, which is essentially a browser kernel. Its JavaScript still runs in a restricted sandbox, so it has no access to most system capabilities. For example, the file system cannot be accessed or bluetooth cannot be used. Therefore, for the functions that H5 cannot achieve, we need to do them native. Hybrid frameworks typically pre-implement apis in native code to access system capabilities, and then expose the WebView for JavaScript to call. In this way, the WebView becomes a communication bridge between JavaScript and native apis. Responsible for passing call messages between JavaScript and native language, which must follow a standard protocol that defines the format and meaning of the message. We call the webView-dependent tool for communicating between JavaScript and native and implementing a messaging protocol WebView JavaScript Bridge, or JsBridge for short, the core of the hybrid development framework.
React Native
React Native is a derivative of React on the Native mobile app platform. What are the main differences? In fact, the main difference is what is the object of the virtual DOM map? The React virtual DOM will eventually map to the browser DOM tree, while the RN virtual DOM will map to the native control tree via JavaScript Core. React Native JavaScript Core is a JavaScript interpreter that has two main functions: it provides a runtime environment for JavaScript. JsBridge is a bridge between JavaScript and native apps. It acts like JsBridge, and in fact many implementations of JsBridge in iOS are based on JavaScript Core.
RN maps the virtual DOM to a native control in two steps:
1. Layout messaging; Pass virtual DOM layout information to native;
2, native according to the layout information through the corresponding native control rendering control tree; React Native is now cross-platform. Compared with hybrid applications, React Native renders Native controls, so its performance is much better than H5 in hybrid applications. Meanwhile, React Native is a Web development technology stack, which requires only one piece of code to be maintained. It is also a cross-platform framework.
Weex
Weex is a cross-platform mobile terminal development framework released by Alibaba in 2016. The idea and principle are similar to React Native, but the biggest difference is syntax. Weex supports Vue syntax and Rax syntax. Unlike React, JSX is mandatory in Rax, which does not support component creation by other means, so learning JSX is a necessary foundation for using Rax. React Native only supports the JSX syntax.
Fast application
Fast application is a lightweight application standard jointly developed by huawei, Xiaomi, OPPO, Meizu and other 9 mainstream mobile phone manufacturers in China, targeting wechat mini programs. It is also developed in JavaScript and renders with Native controls. There are two main differences between React Native and Weex:
The app itself does not support Vue or React syntax. It adopts native JavaScript development, and its development framework is similar to wechat applet. It is worth mentioning that applet can use Vue syntax development (MPVUE) at present.
React Native and Weex’s rendering/typography engines are integrated into the framework, which requires a large installation package for each APP. The quick application rendering/layout engine is integrated into ROM, no packaging is required, and the installation package is small, so fast applications can be distributed quickly while maintaining performance.
conclusion
The main advantages of JavaScript development + native rendering are as follows:
Using Web development stack, the community is large, fast and the development cost is relatively low. Native rendering, performance is much better than H5. Dynamic is good, support hot update.
Inadequate:
Communication between JavaScript and native is required for rendering, and in some scenarios such as drags, communication can get stuck.
JavaScript is a scripting language, and JIT is required for execution. There is still a gap between the execution efficiency and AOT code. Because rendering relies on native controls, controls for different platforms need to be maintained separately, and community controls may lag when systems are updated; In addition, the control system is also limited by the native UI system. For example, in Android, the rules for gesture collision disambiguation are fixed, which can be tricky when nested with controls written by different people.
QT Moblie and Flutter
In this article, we’ll take a look at the final cross-platform technology: self-painted UI+ native. The idea is that the UI can be rendered consistently across platforms by a rendering engine that implements a unified interface across platforms, rather than relying on system native controls. Note that the draw engine addresses the cross-platform issue of the UI, and if other system capabilities are involved, native development is still involved. The advantages of this platform technology are as follows:
High performance; Since the draw engine calls the system API directly to draw the UI, performance is similar to native controls. Flexible, easy to maintain component library, high fidelity and consistency of UI appearance; Because UI rendering does not rely on native controls, there is no need to maintain a separate set of component libraries for different platform controls, so the code is easy to maintain. Because the component library is the same set of code, the same rendering engine, so in different platforms, the component display appearance can achieve high fidelity and high consistency; In addition, by not relying on native controls, you are not limited by the native layout system, which makes the layout system very flexible.
Inadequate:
Lack of dynamic; In order to ensure the performance of UI drawing, self-drawing UI systems generally compile their distribution packages in AOT mode, so when an application is published, it cannot dynamically deliver code like Hybrid and RN frameworks that use JavaScript (JIT) as a development language. You might have guessed that Flutter is one of these cross-platform technologies. Yes, Flutter implements a self-drawing engine and has its own UI layout system. However, the idea of a self-drawing engine is not a new one. Flutter is not the first attempt to do this.
Introduction of QT
Qt is a cross-platform C++ graphical user interface application development framework developed by the Qt Company in 1991. In 2008, Qt Company technology was acquired by Nokia, and Qt became a programming language tool under Nokia. Qt was acquired by Digia in 2012. In April 2014, Qt Creator 3.1.0, a cross-platform integrated development environment, was officially released, realizing full support for iOS. Plug-ins such as WinRT and Beautifier were added, GDB debugging support without Python interface was abandoned, and C/C++ code modules based on Clang were integrated. Android support has been tweaked to fully support iOS, Android, and WP, which gives app developers all the functionality they need to build graphical user interfaces. However, although QT in the PC was a brilliant success, and by the community, but its in the mobile terminal is poor performance, in recent years, although sometimes can hear the sound of the QT, but has been very weak, whatever how QT itself technology, design idea, but in fact is lost after all, the reason is that the author thinks that there are four main:
First: QT mobile development community is too small, insufficient learning materials, ecology is not good.
Second: the official promotion is unfavorable, support is not enough.
Third: Mobile came late and the market has been dominated by other dynamic frameworks (Hybrid and RN).
Fourth: in mobile development, C++ development and Web development stack has an inherent disadvantage, the direct result is QT development efficiency is low.
Based on these four points, QT has become a martyr despite being a pioneer in developing cross-platform paint engines on mobile.
Introduction of Flutter
“Thousands of calls to come out”, paving the way for so long, now finally wait for the protagonist of the book!
Flutter is a framework released by Google for creating cross-platform, high-performance mobile applications. Flutter, like QT Mobile, does not use native controls. Instead, Flutter implements a self-drawing engine that uses its own layout and drawing system. The question is, will QT Mobile face the same problem that Flutter faces? Will Flutter go the way of QT Mobile and become another martyr? To return to this question, let’s take a look at the birth of Flutter:
At Google I/O 2017, Google premiered Flutter, a new framework for creating cross-platform, high-performance mobile applications. In February 2018, Flutter released its first Beta. In May 2018, Flutter was updated to Beta 3 at Google I/O 2018. In June 2018, The first preview version of Flutter was released, which meant that Flutter entered its final phase before the official release of Flutter (1.0).
In May 2018, Flutter entered the Top 100 of GitHub Stars with 27K stars. Today (August 16, 2018), there are 35K stars. The rapid growth of Flutter ecosystem in just over a year shows that Flutter is very popular among its developers and its future development is worth looking forward to.
Now, let’s do a comparison with QT Mobile:
Ecological; According to Github, active Flutter users are growing rapidly. Judging from Stackoverflow questions, the Flutter community is now huge. Flutter is also increasingly well-documented and well-resoursed, and many of the problems encountered during Flutter development can be answered in Stackoverflow or its Github issue.
Technical support; Now Google is promoting Flutter, many of the writers of Flutter are from the Chromium team, and it’s very active on Github. On the other hand, the number of Flutter releases in the first half of this year suggests that Google has invested considerable resources into Flutter, so don’t worry about official technical support.
Development efficiency; The thermal reloading of Flutter helps developers quickly test, build UI, add features, and fix bugs faster. Hot reloading can be done on iOS and Android emulators or real phones at the millisecond level without loss of state. This is great, and trust me, if you are a native developer and experience the Flutter development stream, you probably won’t want to go back to native because there are few people who don’t make fun of the build speed of native development.
Learn more about Flutter: Android Learning PDF+ Architecture video + interview documentation + Source notes