Native App

React Native (RN), launched in 2015, also uses JavaScript for cross-platform APP development. Unlike the H5 development, it uses JS bridging technology to compile at run time into Native code for each platform using Facebook’s Flux technology.

Its characteristics are:

  • Using the JavaScript language, RN is also easy to accept because JS is widely used.

  • RN relies on the JS runtime environment, which is JS bridging technology. It uses Facebook’s Flux architecture.

  • RN only provides APIS for UI rendering and device access, and much of the functionality must rely on third-party libraries to make use of native components.

  • Ecology is now more perfect, the use of the company is also more, especially familiar with JS students easy to use.

  • Supports hot deployment, which can save a lot of time during development.

But it’s not perfect:

  • It still calls native controls from each platform, sometimes with different optimizations for different platforms.

  • Compared with H5, its performance has been greatly improved, but the problem of blank screen and frame loss still exists.

The traditional native APP development mode, IOS and AOS two major systems, need to develop their own apps in their own languages.

React Native is also being used across many platforms. It is also the main object of contrast to Flutter.

Advantages: Its advantage is that the current ecology is relatively mature

Cons: High development and release costs

  • For example: netease Butler APP (Tab1, Tab2)
  • Application technology: Swift, OC, JAVA

WebApp

The oft-mentioned H5 technology is essentially web +JavaScript. For example, some popular JS frameworks such as Vue, React, AngularJS, etc. are designed to build web pages. Web pages built for mobile terminals can achieve cross-platform functions, but its disadvantages are also obvious:

  • Inefficient rendering and poor user experience. Many h5s work fine on iOS, but on Android, especially on low-end phones, they’re really disappointing.

  • It is difficult for web pages to call device hardware-related apis and support few functions. Realizing such requirements is the shortcoming of H5.

  • Mobile web sites, often referred to as H5 apps, are specifically web applications that run on mobile browsers. Generally refers to SPA(Single Page

  • The website developed in Application mode corresponds to the MULTI-Page Application (MPA).

Advantages: Lowest development and release costs

Disadvantages: The performance and experience are not the worst, but also limited by the processing capacity of the browser, multiple downloads will also occupy a certain amount of user traffic

  • For example: netease Butler APP (Tab3)
  • Application technology: ReactJS, RegularJS, etc

Hybrid App

  • Mixed-mode mobile applications are apps between Web-APP and Native App, which have both “advantages of good interactive experience of Native App” and “Cross-platform Web App”
  • Advantages of development “(Baidu.com explains)
  • The main principle is that Native provides unified API through JSBridge and other methods. Then, HTML+CSS is used to realize the interface, JS is used to write logic, API is called and the final page is created

The ** surface is displayed in the WebView. In this mode, the API of Android and iOS are generally consistent, while Hybrid App has cross-platform effect. 支那

Advantages: It is convenient to develop and release, and the efficiency is between Native App and Web App

Disadvantages: learning range is wide, need to cooperate with the original

  • For example: netease Cloud Music, I love my Home App

Application technologies: ** PhoneGap, AppCan, Wex5

React Native App

Facebook found a lot of flaws in Hybrid apps and launched a new open source solution, RN App. Write native interfaces in JSX,

Js invokes native APIS through JSBridge to render UI interaction communication.

Advantages: The efficiency experience is close to Native App, and the cost of release and development is lower than Native App

Disadvantages: learning has a certain cost, and less documentation, inevitably step pit

For example: Facebook, YouTube, Discord, QQ, Baidu, etc

WEEX App

  • Alibaba development team redesigned a set of development mode in RN’s successful case, standing on the shoulders of giants and feeding taobao team project, which has been widely concerned.

In April 2016, Vue. Js was officially open source and supported in V2.0 version, competing with RN.

Pros: Similar to RN in development efficiency and experience, and more cross-platform

Cons: Start-up, less active community than RN

  • For example: Taobao, Tmall, Ele. me, etc

  • The Flutter salted fish is being used, and they also recommend everyone to try the new technology from Google, but it seems that there are few jobs in China, someone said that they can go abroad after 35 years old. (I’m skeptical.)

Flutter is introduced

Flutter is an open source mobile application development framework from Google. Developers can develop a set of code to run on both iOS and Android.

It is developed using the Dart language and eventually compiled into Native code for each platform, which ensures both development efficiency and operation efficiency of each platform. This is the equivalent of rewriting a UI framework from start to finish, independent of platform-specific components. All of its components are “widgets”. The rendering engine relies on the efficient rendering library Skia.

Flutter also saw that the current cross-platform solution wasn’t perfect, so it borrowed some ideas from React Native and made major optimizations. It compiles code to native code and renders directly on each platform using its efficient rendering engine, Skia, without bridging and without calling platform-specific controls.

This design philosophy perfectly solves the performance problems of different platforms.

Thanks to its design ideas, we can actually implement a set of code that runs on different platforms. After its launch, the number of developers following it and related tutorials grew much faster than React Native.

Its features include:

  • Use Google’s own Dart language. The Dart language is strongly typed, supports object orientation well, and is easy to learn and use.
  • Use Google’s own Skia rendering engine, which comes with Android and is packaged into the APP with Flutter on iOS for efficient rendering.
  • There is a very rich list of view components, including the Material Design UI style commonly used on Android and Cupertino for iOS. Because rendering does not depend on platform-specific components, it is consistent across platforms.
  • Also support hot deployment, development can be as real-time as web development to see the results.

Some of its current problems are:

  • Domestic learning resources are not abundant at present, and there are few companies using Flutter.
  • The related ecology is not as rich as React Native, but its development speed is much faster than React Native.

conclusion

There are many languages that can be used for cross-platform development, such as PWA, Uni App, etc. Personally, Flutter is one of the most promising. Although Flutter is not currently very popular, I believe it is the future of cross-platform solutions. If Google’s new system, Fuchsia OS, becomes anything like today’s Android, or even replaces it, Flutter’s development could peak.

If you want to make a business card or something to let more people know about your product, maybe a website is enough. But if the core features of your product are only available through native apps, or if you want to ensure a better user experience and stronger engagement, you may need to make native apps.

To read more

A wave of Flutter cool effects hits

Gold three silver four, 2019 latest interview actual combat summary

Never bother with algorithms, bubble sort optimization, okay?

Animation: Learn TCP three-way handshake and four-way wave in one move

For Gradle, Groovy closures are enough

Believe in yourself, there is nothing impossible, only unexpected

It’s not just technology that’s gained here!

Finally, if you are interested in technology, please pay attention to my wechat official account: Terminal R&D Department, ID: codeGooger, and advance technology together