One sentence summary

Similarities and differences between Native, Web App, Hybrid, React Native (RN for short), Weex, late synchronization applets and PWA

Common development Modes of App [Introduction]

App here refers to application, rather than the commonly used mobile App development modes — brain map

Native App

The traditional native App development mode, iOS and aOS two major systems, need to develop their own apps in their own languages.

Pros: Performance and experience are the best Cons: development and release costs hold high chestnut: netease Butler App (Tab1, Tab2) Application technologies: Swift, OC, Java

WebApp

Mobile web sites, often referred to as H5 apps, are specifically web applications that run on mobile browsers. It generally refers to the website developed by SPA(Single Page Application) mode, corresponding to MPA (Multi-Page Application, introduced later).

Advantages: Lowest development and release cost Disadvantages: the performance and experience can not be said to be 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, VueJS and so on

Hybrid App

Mixed-mode mobile application, an App development technology between Web App and Native App, has both “advantages of good interactive experience of Native App” and “advantages of cross-platform development of Web App” (Baidu Encyclopedia)

The main principle is that Native provides unified API through JSBridge and other methods, and then realizes the interface with Html+Css, writes logic with JS, calls API, and finally displays the page in Webview. In this mode, Android and iOS apis are generally consistent. Hybrid App is cross-platform.

Advantages: it is convenient to develop and release, and the efficiency is between Native App and Web App. Disadvantages: A wide range of learning, requiring Native cooperation. For example, FanReact, I Love my Family App, China Eastern Airlines App, Fuguo Fund – Fuguo Wallet App PhoneGap, AppCan, Wex5, etc

React Native App

Facebook found a lot of flaws in Hybrid apps and launched a new open source App development solution RN. Using JSX language to write native interface, JS through JSBridge call native API rendering UI interaction communication.

Advantages: The efficiency experience is similar to Native App, and the cost to publish and develop is lower than Native App. Disadvantages: There is a certain cost to learn, and there is less documentation, so there is a lot of trouble

Weex App

In the successful case of RN, alibaba development team redesigned a set of development mode, standing on the shoulders of giants and supported by taobao team project, which attracted wide attention. In April 2016, it was officially open source and officially supported VUe. js in V2.0 version, competing with RN.

Advantages: High efficiency of single-page development mode, small volume of hot update package, and more cross-platform disadvantages: just started, lack of documentation; Community is not active RN, the function is not perfect, not suitable for the use of Weex App development, for example: Taobao, Tmall, Aliyun, Youku, Xianyu, Ele. me, etc

Continue to analyze the

Native App

Native App is a third-party application written and run by Native programs based on the local operating systems of smart phones, such as iOS, Android and WP. It is also called local App. The commonly used development languages are Java, C++, and Objective-C.

Since the release of iOS and Android, two mobile operating systems, there has been a new term in the Internet community: App means a third-party application running on intelligent mobile terminal devices.

Native App, because it is located above the platform layer, has better ability of downward access and compatibility. It can support online or offline, message push or access to local resources, and access to camera dialing functions. However, due to the fragmentation of devices, the development cost of App is much higher, and it is troublesome to maintain the update and upgrade of multiple versions, and the installation threshold of users is also high. However, it is more optimistic that AppStore has cultivated a good user payment model, so in Apple’s ecosystem, the profit model of developers is a clear state, and other markets are drawing closer to this road.

advantage

1, compared with other modes, provide the best user experience, the best user interface, the most gorgeous interaction 2, for different platforms to provide different experience 3, can save bandwidth costs, open faster 4, the most powerful, especially in the system interaction, almost all functions can be realized

disadvantage

1, high threshold, the development of native talent scarcity, at least less than front-end and back-end, expensive 2, cannot cross-platform development environment, development cost is larger, the system developed independently 3, distribution cost is high, the need to store or market audit, slow update 4, to maintain multiple versions, multiple system cost is higher, 5, the application market is gradually saturated, how to seize the time of users need to invest a lot of time and money, which also leads to the increase of “zombie” apps

WebApp

When it comes to WebApp, many people will think of WAP, or some people think that WAP is WebApp, but in fact it is not.

The most direct difference between WebApp and WAP is the functional level. WAP focuses more on the use of web technology in mobile display, including text, media files and so on. However, Web App focuses more on “functions” and is realized by using Web technology. In general, Web App is an application that runs on the network and standard browser and is developed based on Web technology to achieve specific functions.

Most of the responsive technologies are designed to enable WebApp to accommodate multiple types of clients.

Web sites are generally divided into two types: MPA(Multi-Page Application) and SPA(Single-Page Application). And WebApp generally refers to the website developed in the form of SPA. It’s more like an App.

advantage

1, cross-platform, easy debugging 2, no installation, will not occupy the memory of the phone, and the fastest update 3, there is no multi-version problem, low maintenance cost 4, temporary entrance, can be embedded at will

disadvantage

1, relies on the network, the first visit page speed slow, cost flow 2, limited to mobile phones and the browser performance, user experience compared to other models the worst 3, functional limitations, a large number of mobile terminal function cannot be achieved 4, entrance to rely on third-party browser, and only exists in the form of URL, resulting in low user retention (advantages or disadvantages)

Hybird App

Mixed development, that is, half native and half Web development mode, by native to provide a unified API to JS call, the actual main logic has Html and JS to complete, is finally displayed in the WebView, so only need to write a set of code can achieve cross-platform effect, in addition, can also be directly in the browser debugging, very convenient. The most important thing is that it only takes a front-end person to learn a little bit about JS API calls.

An early adopter of Hybird apps was PhoneGap, which has since blossomed into projects such as Titanium, Salama, WeX5, Kerkee, and Domestic AppCan. Projects have their own implementation methods, and the principle is basically the same. I was fortunate to participate in the study and research in AppCan Shanghai headquarters for a period of time. The following is a brief introduction:

AppCan is Hybird cross-platform mobile application development tool based on HTML5 technology. Developers use Html5+Css3+JavaScript technology, AppCan IDE integrated development system, cloud packer, etc., to rapidly develop mobile applications on Android, iOS and WP platforms.

AppCan platform composition

In actual APP development, AppCan can do most of the work, as shown in the figure below:

AppCan encapsulates the complex native functions at the bottom of App in the engine and plug-in. Developers only need to call the interface, package and compile to obtain the native functions. Flexible plug-in extension mechanism.

Developers can develop visual UI and most interaction of app just as they develop WebApp. When Native functions (such as camera and gyroscope) are needed, Native effects can be easily realized by calling official API. As for communication between JS and Native, URL monitoring and JSBridge communication used by most Hybrid manufacturers are commonly used, and the principles of the two are similar.

On the principle of JsBridge explanation, visible blog.csdn.net/xiangzhihon…

When the concept of Hybird was popular, various domestic and foreign companies also participated in the exploration, such as Facebook, Google, Amazon, Tencent, Alibaba, netease and so on. Gradually, they found that Hybird was seriously limited by the efficiency of WebView parsing and rendering. So Facebook began its exploration of quasi-native research.

React Native App

React Native Quick Start Notes

Weex App

Please move to netease Yan Xuan App to experience Weex development