Mainstream cross-end solutions, one is to use JavaScriptCore engine as a virtual machine solution, representing the framework React Native; The other option is to use a non-javascriptcore virtual machine, representing the framework that is Flutter.

How to choose cross-end solution

From a programming language perspective

  • JavaScript is far older and more popular than Dart, and the ecosystem is much better, with far more developers than Dart programmers. So even though Dart is easy to get started with from a programming language perspective, React Native is a better choice in the long run.

From a page frame perspective

  • React Native is also ahead of Flutter from a page framework and automation tool perspective. This is mainly due to the accumulation of Web technology for so many years, and its tool chain is very perfect. Front-end developers can easily learn React Native and develop mobile apps

Performance and so on

  • Compared with the React Native framework, The advantages of Flutter are mainly reflected in performance, development efficiency and experience.
  • The Flutter was different. It was written in the new Dart language and supports both AOT and JT compilation methods. Instead of using the HTML/csS/ JavaScript combination, it is significantly more efficient than JavaScriptCore.
  • In addition to the programming language of the VIRTUAL machine, the advantage of Flutter is the implementation of the Ul framework. It rewrites the Ul framework, from Ul controls to rendering, all re-implemented, relying on the Skia graphics library and system graphics rendering interface, to ensure the same experience on different platforms.

choose

  • Once using Flutter development became a mandatory option for the team, the other technology stacks had no reason to exist.
  • I divided the cross-platform solutions into two types: one is the solution that uses JavaScriptcore engine as a virtual machine, representing the framework React Native; The other is to use a script of a non-javascriptcore virtual machine, which represents the frame that is Flutter.
  • In my opinion, you can choose Flutter as a cross-platform development solution in the long run. But the ultimate success of Flutter will depend on the success of Google’s new system, Fuchsia.

native

  • Native apps refer to apps specific to a mobile platform (such as iOS or Android), which use development tools and languages supported by the corresponding platform and directly invoke SDK apis provided by the system. For example, an Android native app is an application developed in Java or Kotlin directly using the Android SDK. An iOS native app is an application developed directly from the iOS SDK in Objective-C or Swift.

Main advantages:

  • Access to all functions of the platform (GPS, camera);
  • Fast speed, high performance, can achieve complex animation and drawing, the overall user experience is good;

Main disadvantages:

  • Platform-specific, high development cost; Different platforms must maintain different code, which increases the human cost;

  • Content fixed, dynamic weak, in most cases, there is a new function update can only send version;

  • In the early stage of mobile Internet development, business scenarios were not complicated, and native development could also cope with product demand iteration. However, in recent years, with the advent of the Internet of Things era, mobile Internet advances rapidly with each passing day, in many business scenarios, the traditional pure native development has been unable to meet the growing business needs. The main performance is:

  • The demand for dynamic content increases; When the demand changes, the pure native application needs to update the content through version upgrade, but the application shelf and review need cycle, which is difficult to accept in the Internet era of rapid change, so the demand for dynamic application (can also update the application content without issuing a version) becomes imminent.

  • Business needs change rapidly, development costs become larger; Since native development usually has to maintain both Android and iOS development teams, both labor costs and testing costs will increase during version iterations.

  • To sum up, pure native development faces two main issues: dynamics and development cost, and several cross-platform dynamics frameworks have emerged to address these two issues.

Hybrid plan 1: native +H5

  1. Cordova
  2. Ionic
  3. Wechat applets
  • 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.

Main advantages:

  • The advantages of hybrid applications are dynamic content is H5, web technology stack, community and resource rich.

Main disadvantages:

  • The downside is that it doesn’t perform well, and for complex user interfaces or animations, the WebView can’t do much.
  • 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.

Hybrid solution 2: native +JavaScript

  1. React Native facebook
  2. Weex alibaba
  3. Fast application

Main advantages:

  • 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.

Major deficiencies:

  • 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, which requires JIT(Just In Time) during execution, and there is still a gap between the execution efficiency and AOT(Ahead Of Time) 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.

React Native

  • React Native (RN for short) is a cross-platform mobile application development framework launched by Facebook in April 2015. It is a derivative of Facebook’s early open source JS framework React on the Native mobile application platform. It currently supports both iOS and Android platforms. RN uses the Javascript language, HTML-like JSX, and CSS to develop mobile applications, so technicians familiar with Web front-end development can enter mobile application development with minimal learning.
  • Since RN and React work in the same way, and Flutter is inspired by React, many ideas are also in common. Great oaks grow from little acorns, so we need to learn more about the React principle. React is a responsive Web framework. Let’s take a look at two important concepts: DOM trees and responsive programming.
  • 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 is eventually mapped to the browser DOM tree, while the RN virtual DOM is mapped to the native control tree via JavaScriptCore.
  • JavaScriptCore is a JavaScript interpreter that has two main functions in React Native:
  • Provides a runtime environment for JavaScript.
  • JsBridge is a bridge between JavaScript and native applications. It acts like JsBridge. In fact, many implementations of JsBridge in iOS are based on JavaScriptCore.
  • RN maps the virtual DOM to a native control in two steps:
  • Layout messaging; Pass virtual DOM layout information to native;
  • Native renders the control tree through the corresponding native control according to the layout information;
  • 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. Rax’s Domain Specific Language (DSL) syntax is based on the React JSX 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.

Hybrid scheme 3: original + self – drawing

  1. QT for mobile
  2. Flutter is made by Google
  • 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.

Main advantages:

  • 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.

Major deficiencies:

  • 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.

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 (May 29, 2019), there is already a 65K Star. The rapid growth of Flutter ecosystem in just over 2 years shows that Flutter is very popular among 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.
  • Based on the above three points, I believe that readers, like the author, have their own opinions about the future of Flutter. Now that we have a thorough understanding of mobile development technology, it’s time to get to the subject of this book. Are you ready?

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.

Refer to the link