After the mobile operating system experienced the melee of the gods, early mobile operating systems such as BlackBerry OS, Symbian OS, and Windows Phone gradually withdrew due to loss of competitiveness. At present, there are only two camps of Android and iOS left in the market, making iOS and Android engineers a sought-after resource. However, due to the difference between the two systems, it takes twice as much work to develop the same application, which not only increases the labor cost, but also faces problems in detail implementation and application consistency due to the development of different teams.
Therefore, there is an urgent need for a technical solution that can be developed once and run on two platforms. As an application that can run both in a native application environment and in a web browser, a Hybrid App was born out of necessity. Today I will introduce 5 mainstream hybrid frames for your reference.
Let me briefly talk about the following mainstream hybrid app frameworks:
React Native: Developed by Facebook, uses JavaScript and React to build native mobile applications. It allows developers to use the same codebase to develop iOS and Android apps while providing an experience with near-native performance.
Flutter: Developed by Google, using the Dart language. Flutter uses its own rendering engine to create high-performance, beautiful cross-platform applications with natural animations.
FinClip: Developed by a domestic technical team, it mainly provides small program container technology and a supporting small program application management platform. The APP embedded in this component can obtain small program operation and shelf management capabilities. It is also one of the few small program containers that can be used commercially. To realize the development plan of Hybrid+ applet.
Ionic: Based on web technologies (HTML, CSS and JavaScript), using the Angular framework. Ionic provides a set of UI components and tools that enable developers to build cross-platform mobile applications.
Xamarin: Launched by Microsoft, using the C# language. Xamarin allows developers to use a shared C# code base to develop iOS and Android applications and provide similar performance to native applications.
PhoneGap/Cordova: Apache project sponsored by Adobe, uses HTML, CSS and JavaScript. PhoneGap is the commercial version of Cordova. Both frameworks use web technology to build cross-platform applications and encapsulate web applications as native applications through WebView.
Various frameworks have their own advantages and disadvantages, and the applicable solutions are also different. The following are the five mainstream Hybrid solutions:
Native + webview solution
This is one of the most common Hybrid scenarios. The main framework of the application is built by native code, and the WebView component is embedded in some parts of the application for displaying web pages or loading web applications. Web pages run through WebViews and can communicate with native code. In this way, developers can use web technologies (such as HTML, CSS, JavaScript) to build part of the application, while using native code to handle the application's core functionality and performance requirements.
But webview also has its disadvantages. The experience of web applications cannot reach that of native applications. However, its development efficiency is high, and it is used by many apps to do some non-core business pages.
Pure webview solution
In this scenario, the application is built almost entirely with web technologies, without much native code. The whole application is basically a web application embedded in a WebView. The advantage of this solution is that it can use Web technology to quickly develop cross-platform applications, but the disadvantage is that it may be limited by the performance and functions of WebView, and cannot fully utilize the advantages of native applications.
Common frameworks, such as the earliest phonegap, are mainly web development, and provide native functions through native plug-ins, such as camera, address book, geolocation, storage and other functions. Now commonly used is the ionic framework, which supports angular, react, and vue frameworks for development.
Native + applet solution
The mini program solution should be the first released by WeChat and used on a large scale. This solution combines native apps and applets (WeChat applets, Alipay applets, etc.). An applet is a lightweight application based on web technology that can run on a specific platform. In the native application, the interface of the applet can be embedded, and the interaction between the native and the applet can be realized through the communication bridge. This allows developers to take full advantage of the development speed of applets and the functionality and performance of native applications.
With the gradual maturity of the WeChat mini-program solution, the apps of major domestic manufacturers are also applying this solution: Alipay mini-program, Baidu mini-program, Toutiao mini-program and so on. However, at present, the small program containers of major manufacturers are all self-developed, and are not open to external use. The FinClip mentioned above is one of the few containers that can be used commercially.
Web technology conversion native components
In this scenario, developers use web technologies (such as React Native, NativeScript) to build native components that can be used in native applications. This way, developers can leverage familiar web technologies to build interfaces and certain functionality, and then convert them into native components for better performance and experience.
React Native can be developed mixed with native applications, or developed only with React Native. Now many apps will also adopt the RN hybrid solution, with only a small number of webview pages.
Flutter self-painting engine
React native is not a perfect solution, because it uses js to write the ui interface, and converts js to native ui when rendering, so when performing complex calculations, large data volumes, or animations, certain Performance problems, increased power consumption of the application or page freezes and other issues.
The emergence of flutter subverts all this. Instead of using js to convert native components, it uses google's dart language and its own skia rendering engine to develop the ui interface. This is equivalent to developing a browser, and also stipulates the language (dart) and API for developing ui components, all of which are their own, so high performance has become its biggest advantage, and it can be almost the same as the native development experience.
At the beginning, flutter only supported two platforms, Android and iOS. Now it not only adds web platform, desktop Windows, macOS and Linux applications, but also embedded applications such as smart devices, wearable devices and vehicle-mounted devices. There is quite a pattern of dominating the world, and I am afraid that only Google can make this kind of product.