Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what are the cross-platform solutions for the web front end?". In the operation of actual cases, many people will encounter such a dilemma. Next, let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

H5 + native mixed development

This model, also known as Hybrid development, is now used in many App development, such as Wechat, Taobao, Meituan, iqiyi and other well-known mobile applications. There are also many domestic companies that use the Hybrid model to develop platforms for developers, such as Dcloud, AppCan, Inoic and so on, basically referring to the hybrid development framework derived from Cordova.

The main principle of this kind of framework is that part of the content that needs to be dynamically changed in APP is realized through H5 and loaded through the native web page loading control WebView (Android) or WKWebView (ios). The H5 part can be changed at any time without publishing, which solves the dynamic demand. At the same time, because H6 code only needs to be developed once, it can run on both Android and iOS platforms, which can also reduce the development cost. We call this native development model of h6 + mixed development.

The advantage of hybrid application is that the dynamic content is H5, can be developed using web technology stack, the community and resources are rich, the disadvantage is poor performance, for complex user interface or animation, webview can not bear the task.

JavaScript development + native rendering

The representatives of this kind of open source framework are mainly Facebook's React Native, Ali's Weex, of course, there are also non-open source Meituan's Picasso, and the latest fast application.

The main advantages of JavaScript development + native rendering are as follows: using Web development technology stack, the community is large, the start-up is fast, and the development cost is relatively low; native rendering, performance is much better than H5; dynamic, support hot update.

Of course, there are also disadvantages as follows: communication between JavaScript and native is required when rendering, and frequent communication may lead to stutters in some scenarios such as dragging; JavaScript is a scripting language and requires JIT for execution, so there is still a gap between execution efficiency and AOT code; because rendering depends on native controls, controls on different platforms need to be maintained separately, and community controls may lag when the system is updated In addition, its control system is also limited by the native UI system. For example, in Android, the disambiguation rules of gesture conflicts are fixed, which makes the problem of gesture conflicts very difficult when nesting controls written by different people.

React Native

React Native (referred to as RN) is a cross-platform mobile application development framework opened by Facebook in April 2015. it is a derivative of Facebook's earlier open source JS framework React in the native mobile application platform. It currently supports iOS and Android platforms. RN uses javascript language, similar to HTML's JSX, and CSS to develop mobile applications, so technicians who are familiar with Web front-end development can enter the mobile application development field with little learning.

Weex

Weex is a cross-platform mobile development framework released by Alibaba in 2016. Its ideas and principles are similar to React Native, except at the syntax level. React Native uses React.js as the development framework, while Weex uses Vue.js as the development framework. Vue and React can be called the hottest JavaScript framework in the front-end domain, their ease of use and functionality are very powerful, and Weex is also widely used on Taobao.

Fast application

Fast application is a lightweight application standard jointly developed by Huawei, Xiaomi, OPPO, Meizu and other nine major domestic mobile phone manufacturers, targeting WeChat Mini Programs. It is also developed in JavaScript language and rendered with native controls.

Self-drawn UI+ native

Through the implementation of a unified interface rendering engine in different platforms to draw UI, without relying on the system native controls, so we can achieve the consistency of different platforms UI. Note that the self-drawing engine solves the cross-platform problem of UI, and native development is still involved if other system capability calls are involved. The advantages of this platform technology are: high performance, performance close to native controls; flexibility, easy maintenance of component library, high fidelity and consistency of UI appearance; disadvantages: lack of dynamic.

Flutter

Flutter is a mobile application development framework launched and open source by Google, which focuses on cross-platform, high fidelity and high performance. Developers can use the Dart language to develop App, a set of code running on both iOS and Android platforms. Flutter provides a wealth of components and interfaces, and developers can quickly add native extensions to Flutter.

Flutter uses neither WebView nor the native controls of the operating system. Instead, Flutter uses its own high-performance rendering engine to draw widget. This not only ensures the consistency of UI on Android and iOS, but also avoids the limitations and high maintenance costs of relying on native controls. However, Flutter also has some shortcomings, which do not support dynamic code distribution and hot updates.

This is the end of the content of "what are the cross-platform solutions for the front end of web?" thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.