One sentence summary

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

Brief introduction of common development mode of App

App here is an application, not a mobile phone App as we usually say.

Several APP development mode – brain figure: http://naotu.baidu.com/file/6af15fcbb72f89926043779811b1ea44?token=df0378691ecdcef2

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: High development and release costs.

For example: netease Butler App (https://id.163.com/gj/)

Application technology: 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 websites developed in Single Page Application (SPA) mode, corresponding to 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 (https://id.163.com/gj/)

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: learning range is wide, need to cooperate with the original.

For example: FanReact, I Love my Family App, China Eastern Airlines App, Fuguo Fund – Fuguo Wallet App

Application technology: PhoneGap, AppCan, Wex5, APICloud, 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 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

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: Single page development mode is highly efficient, hot update package size is small, and more cross-platform.

Disadvantages: Just starting, lack of documentation; The community is not active in RN and its functions are not yet sound, so Weex is not suitable for App development.

For example: Taobao, Tmall, Aliyun, Youku, Xianyu, Ele. me, etc.

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 refers to third-party applications 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

  • Compared with other modes, it provides the best user experience, the best user interface and the most gorgeous interaction

  • Provide different experiences for different platforms

  • It can save bandwidth cost and open faster

  • Most powerful, especially in the interaction with the system, almost all functions can be achieved

disadvantage

  • Barriers are high, native development talent is scarce, at least less than on the front end and back end, and development environments are expensive

  • Can not be cross-platform, the cost of development is relatively large, each system developed independently

  • Release cost is high, need to pass the review of store or market, resulting in slow update

  • The cost of maintaining multiple versions and systems is high, and compatibility must be done

  • The application market is gradually saturated. How to seize users’ time requires 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

  • Can be cross-platform, easy debugging

  • No installation, no memory usage, and the fastest update

  • There is no multi-version problem and low maintenance cost

  • Temporary entrance, can be inserted at will

disadvantage

  • Depending on the network, the first visit to the page is slow and consumes traffic

  • The user experience is the worst compared to other modes due to mobile and browser performance limitations

  • Limited functions, a large number of mobile terminal functions cannot be implemented

  • Portals are heavily dependent on third-party browsers and can only exist as URLS, leading to low retention (pros and cons)

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 at http://blog.csdn.net/xiangzhihong8/article/details/66970600

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

Please move driving: 【 notes 】 the React Native quickstart notes (https://segmentfault.com/a/1190000010989345).

Weex App

Please move the driving: netease an App Weex development (https://segmentfault.com/a/1190000011027225).

Source: Zwwill_ Muyu