Write once, run anywhere.

The introduction

“Write once, run anywhere” is SUN’s slogan used to show the cross-platform nature of the Java language. It means That Java can be developed on any platform and compiled to run on any device with the Java Virtual Machine (JVM) installed.

The fly in the ointment is that the Java Virtual Machine runs on various operating systems (Windows, Linux, macOS,…) There are many different implementations on the Java application, resulting in subtle differences in the execution of a Java application on different virtual machines and operating systems, so it may need to be adequately tested on many platforms to ensure correctness and stability, leading to a joke: “Write Once, Debug Everywhere” — wikipedia

In recent two years, a variety of cross-platform development schemes have sprung up like bamboo shoots after a spring spring. On the one hand, with the popularization and rapid development of mobile Internet, the hardware and software, operating system, development tool chain and technical community of mobile terminal equipment have become increasingly mature and perfect. On the other hand, in recent years, the traditional PC terminal technology and resources have gradually migrated to the mobile terminal, everyone wants to build wheels, and then “dominate the world”.

“Cross-platform” is every new technology developer’s dream, but it’s also the old guard’s nightmare, because they all want to kill off native Android and iOS development.

With 2018 in mind, this article discusses some of the most popular cross-platform development solutions.

Web front end/HTML 5

As we know, Web front-end Web page programming is a combination of HTML + CSS + JS, where HTML is used to define the structure of the page, CSS is used to describe the appearance of the page, AND JS is usually used to deal with the page logic and user interaction.

With the release of THE HTML 5 standard in 2014, the development of the front-end field has been extremely hot in recent years. JQuery + Bootstrap, which people still talked about in the Web 2.0 era, has long been unable to meet the increasingly complex development needs. Angular, Vue, React, and other development models are constantly being created and updated.

A lot of people think that cross-platform is crazy, but the Web is the most successful example of cross-platform development in history, and it’s so successful that people are so used to it that they forget there was a B/S vs. C/S debate a decade ago.

Hybrid App

We can call Web pages developed by pure front-end technology Web App, and applications developed by pure Native technology Native App, both of which have advantages and disadvantages: The iteration of pure Native is too slow to dynamically update and cannot be cross-platform, while many functions of pure Web cannot be realized. Although its animation effect experience is not satisfactory, it still lags behind that of Native.

Hybrid App refers to the App between the two, which combines “advantages of good user interaction experience of Native App” and “advantages of cross-platform development of Web App”.

The essence of Hybrid technology is to establish JS Bridge with Native clients on the basis of WebView, so as to achieve the purpose of JS calling Native API and Native executing JS methods.

At present, most of the apps of big factories in China have a set of their own interactive scheme between H5 and Native, and the implementation is much the same. Some of the basic functional modules and complex UI interaction layouts in these apps are often developed native, while some of the active pages or regulated, volatile business modules are developed in H5.

In addition, React Native, Weex, PhoneGap/Cordova, AppCan and other development solutions described below also fall under the category of Hybrid apps.

React Native

Build native mobile apps using JavaScript and React

React Native (RN) is an open source cross-platform mobile application development framework launched by Facebook in April 2015. It is a derivative of Facebook’s earlier open source UI framework React on the Native mobile application platform. It currently supports both iOS and Android platforms. It uses the JavaScript language, along with HTML-like JSX and CSS, to develop mobile applications, so technicians familiar with Web front-end development can get started quickly with minimal learning.

React Native has matured after more than 3 years of development. Although no version 1.0 has been released so far, the React Native community is very active and has contributed a lot of open source code to React Native.

Many domestic companies have also done a lot of research on React Native and produced corresponding outputs, such as some cross-three-terminal (Android/iOS/Web) technologies developed based on React Native.

  • React Native: Facebook github. IO/React-nativ…
  • React Native Chinese website: reactnative.cn/
  • There is an open source library on GitHub, awesome- React-Native, which collects a lot of react Native development resources. It is worth watching: github.com/jondot/awes…

Weex

A framework for building Mobile cross-platform UIs

On April 21, 2016, Alibaba released Weex, a cross-platform mobile development tool, at THE Qcon conference. On December 15, 2016, Alibaba announced that Weex, a mobile open source project, was donated to The Apache Foundation for incubation.

Weex is dedicated to enabling developers to build Android, iOS and Web applications using the same set of code, based on modern advanced Web development technologies. Specifically, with WeexSDK integrated, you can develop mobile applications using JavaScript and popular front-end frameworks such as vue.js and Rax.

Another major goal of Weex is to keep up with contemporary advanced Web development and native development technologies to enable productivity and performance to coexist. Weex pages are developed just like ordinary web pages; Render Weex pages as if they were native pages.

We can find that Weex largely borrows from the ideas and methods of React Native 😷, aiming to render Native pages through JS syntax. However, due to its late start, the community is less active than React Native, and there are relatively few materials and open source projects.

  • Weex website: weex.incubator.apache.org/
  • Weex Chinese: weex.incubator.apache.org/cn/
  • Weex resources on GitHub awesome- Weex: github.com/joggerplus/…

Flutter

Build beautiful native apps in record time

The Flutter is a mobile UI development framework launched by Google at Google I/O in 2017 that allows you to quickly build high quality native user interfaces on iOS and Android. It will also be the main tool for developing applications under Google’s new system, Fuchsia.

Google released the first Beta version of The Flutter open source on GitHub at the end of February 2018 and Beta 3 at Google I/O 2018 in May. Our official website posted an article earlier about the New Features of Flutter Beta 3.

It is important to note that The Flutter is different from React Native/Weex in that it does not use a WebView, JavaScript interpreter, or platform Native controls. It has its own set of widgets. Dart is used for interface development, and the underlying rendering is self-drawn using its own high-performance C/C++ engine.

By the Way, about the comparison of Flutter and React Native, we also posted an article on our public account the other day “Flutter KO React Native? Let time decide…”

  • Website: Flutter. IO /
  • Flutter Chinese website: FlutterChina. Club /
  • Awesome – Flutter on GitHub is a collection of many flutter resources: github.com/Solido/awes…
  • In addition, the Knowledge Collection team has started a Repo on GitHub to collect the resources related to the development of Flutter in the country. Please follow and improve with us: github.com/awesome-tip…

PWA

A new way to deliver amazing user experiences on the web.

Progressive Web App, or PWA, is a new way to improve the Web App experience by bringing native App experience to users.

PWA can achieve Native application experience not by a specific technology, but by applying a series of new technologies to improve, in three aspects of security, performance and experience are greatly improved, PWA is essentially a Web App, and has some features and advantages of Native App, mainly including the following three points:

  • Reliable – load and display instantly, even in unstable network environments
  • Experience – Quickly responsive, with smooth animations that respond to user actions
  • Stickiness – Like native apps on the device, with an immersive user experience that users can add to the desktop

Android and major browsers have long supported the PWA standard, and finally iOS 11.3 and macOS 10.13.4, apple’s Safari also supports PWA. I think this will usher in a PWA outbreak…

The next Generation Web Application Model — Progressive Web App is worth reading.

  • PWA website: developers.google.com/web/progres…
  • Awesome pwa on GitHub: github.com/hemanth/awe…
  • Also, we have a Repo on GitHub to collect development resources related to PWA. Please follow and improve with us: github.com/awesome-tip…

Small program

A super App like wechat, with more than 1 billion monthly users, is enough to compete with the operating system. We can call it “wechat system” too. If they can provide their own services in the wechat ecosystem, developing apps for the “wechat system” may be the aspiration of many developers.

Wechat mini program, is a kind of application that can be used without downloading and installing. It realizes the dream of application “at your fingertips”. Users can scan or search in wechat to open the application. On January 9, 2017, Zhang Xiaolong officially released the mini program on the 2017 wechat open class Pro, and launched the mini game at the end of 2017.

Small program development is essentially a set of front-end HTML + CSS + JS logic, it is based on WebView and wechat itself defined a set of JS/WXML/WXSS/JSON to develop and render pages. As mentioned in the official wechat document, the small program runs on three sides: iOS, Android and developer tools for debugging. The script execution environment and the environment for rendering non-native components are different on the three sides:

  • On iOS, the JavaScript code of the small program is run in the JavaScriptCore, is rendered by WKWebView, the environment has iOS 8+;
  • On Android, the JavaScript code for the applet is parsedby X5 JSCore, which is rendered by X5 based on the Mobile Chrome 53/57 kernel.
  • On the development tool, the JavaScript code for the applet runs in NWJS and is rendered by the Chrome Webview.

For more details, please refer to the official website of wechat Applet:

  • mp.weixin.qq.com/cgi-bin/wx

Alipay later launched its own mini program platform:

  • Open.alipay.com/channel/min…

Since wechat or Alipay can run on Both Android and iOS, we can also understand small programs as a kind of cross-platform development in a sense.

Fast application

On March 20, 2018, xiaomi, ZTE, Huawei, Gionee, Lenovo, Meizu, Nubia, OPPO, Vivo, OnePlus, a total of ten mobile phone manufacturers jointly held the launch conference of fast application standard in Beijing, based on the new application ecology jointly launched by the hardware platform. Here’s the official description:

Fast apps are developed using a front-end technology stack, native rendering, and have the dual benefits of both HTML 5 pages and native apps. Users do not need to download and install the application, and enjoy the performance experience of the native application. The fast application framework is deeply integrated into the mobile phone systems of various manufacturers, enabling seamless connection between user requirements and application services at the operating system level, improving user experience and application service conversion efficiency, and supporting retention capabilities such as desktop icon generation.

We can see that it is similar to small programs, using the same front-end technology stack combined with native, both can be “point-and-use”.

PS: Fast application should not be called a cross-platform development scheme, it is only the domestic mobile phone manufacturers jointly led by the Android system level to provide fast services, aimed at competing with small programs; I have not been involved in fast app development, please refer to the fast app website for more details:

  • www.quickapp.cn/

PhoneGap

Build amazing mobile apps powered by open web tech.

PhoneGap is a rapid development solution for creating mobile cross-platform applications using HTML, CSS and JavaScript technologies. Originally developed by Nitobi and now owned by Adobe, it dates back to 2009, as long as mobile native development has been around.

It allows developers to invoke the core features of iOS, Android, Windows Phone, Blackberry, Plam and other smartphones — including geolocation, accelerators, contacts, voice and vibration — from the web, and PhoneGap has a rich array of add-ons to call it.

Many major mobile development frameworks are based on PhoneGap, including Worklight, appMobi, WeX5, etc. They are highly optimized to provide similar performance to Native apps and ease of development.

  • PhoneGap website: Phonegap.com/
  • PhoneGap Chinese website: www.phonegap100.com/

Cordova

PhoneGap, Cordova is a different name for the same thing.

As mentioned above, PhoneGap was originally developed by Nitobi, which was acquired by Adobe on October 4, 2011. The PhoneGap code is contributed to the Apache Software Foundation, but the PhoneGap trademark is retained and is named Apache Callback. After the 1.4 release, the name of Apache Callback was changed to Apache Cordova. — From Wikipedia

I haven’t done any research on PhoneGap/Cordova, please check out their website for more details.

  • Cardova website: cordova.apache.org/
  • Cardova: Cordova.axuer.com/

AppCan

Domestic Hybrid Hybrid application development, mobile platform, mobile cloud platform leader

I understand it to be the Chinese version of PhoneGap 😷, no research, no right to speak, please check the website for more details:

  • www.appcan.cn/

Xamarin

Xamarin is a cross-platform development tool provided by a Microsoft subsidiary. Using a shared code base at C#/.NET, Xamarin enables developers to write native Android, iOS, and Windows applications using a native user interface. And share code across multiple platforms, including Windows and macOS.

Applications generated using Xamarin look and feel like native because they are native.

The Xamarin website and development tool links are as follows:

  • www.xamarin.com/
  • www.visualstudio.com/zh-hans/xam…

More…

The article, “Talking about the various technologies of mobile cross-platform development,” divides cross-platform development technologies into four major genres:

  • Web Flow: Also known as Hybrid technology, it implements interfaces and functions based on Web-related technologies
  • Transcoding flow: Convert a language to Objective-C, Java, or C#, and then develop using official tools for different platforms
  • Compile stream: Compile a language into binaries, generate dynamic libraries or package them into APK/IPA/XAP files
  • Virtual machine flow: By porting virtual machines of a certain language to run on different platforms

This article provides a technical analysis of these solutions and is worth reading.

  • Fex.baidu.com/blog/2015/0…

What other cross-platform solutions did you learn about that weren’t covered in this article? Leave a comment to discuss…

conclusion

This article briefly introduces several popular cross-platform development solutions in mobile. It is a good introduction. Learning is not an overnight process, and readers need to spend time on each technology.

As for which development approach will become mainstream, none of us know. Only time will tell.

However, we need not be anxious about the new technologies coming one after another. “We need to be hard to make iron”. Only by constantly improving our soft and hard power can we not be abandoned in the rapid wave of technological updates and iterations. Go for it!

Refer to the connection

  • Note 1: Some of the images in this article are from Google Image Search

  • Note 2: Some of the descriptions and definitions in this article are taken from relevant official documents, wikipedia or Baidu Baike, and are not listed in detail

  • Talk about various technologies for mobile cross-platform development

  • 2018 Mixed Development

  • Top 10 cross-platform tools for mobile developers to focus on

  • Progressive Web App, the next generation Web application model

  • What is the PWA

  • IOS Hybrid Framework — PhoneGap

  • Nine major mobile phone manufacturers jointly promote fast application standards to create a new application ecosystem

Knowledge Collection is an official account of the team, mainly in the field of mobile development, sharing mobile development technology, including iOS, Android, mini program, mobile front end, React Native, WEEx, etc. Every week there will be original articles to share, our articles will be in the public number first. Stay tuned for more content.