Hybrid app (i) App development selection

1. Overview of several app development models

Native App

that is, traditional native App development mode, Android based on the Java language, the underlying call to Google's Api;ios based on the OC or Swift language, the underlying call app API provided by the official. Experience the best.

Web App

that is, the mobile web site , the page is deployed on the server, and then the user access to the major browsers. General refers to the website developed by the SPA (single Page application) mode. Experience the worst.

Hybrid App

that is, the hybrid development , by native through Jsbridge and other methods to provide a unified API, and then use Html5+js to write the actual logic, invoke the API, this mode, because the Android,ios API is generally consistent, And the final page is also displayed in WebView, all with cross-platform effects

React Native App

Facebook launched an open source, new app development program that uses js+ partial native syntax to implement functionality. The initial learning cost is higher, but after getting started, a good package can achieve most of the cross-platform. And the experience is very good.

2. advantages and disadvantages of app development model

Native App

That is, the native development model , developed by the native program, on different platforms, Android and iOS development methods are different, developed a separate app, can publish the App Store, has the following advantages and disadvantages

Advantages

directly rely on the operating system , the most interactive, the best performance

The native app experience is optimal compared to other modes of interaction

The most powerful , especially in interacting with the system, almost all functions can be realized

thanks to the native is directly based on system , so you can directly invoke the official API, the most comprehensive functions (such as local resource operations, notifications, animations, etc.)

Disadvantages

High development costs , no cross-platform, independent development on Android and iOS on different platforms

Based on Java development on Android, iOS based on OC or Swift development, independent of each other, must have their own developers

higher threshold , the original staff have a certain threshold for entry, compared to the majority of front-end personnel, less

a big feature of native is independence , so it's not easy to get started, not as wide as the Web front end, and Android,ios need to learn independently

slow updates , especially after you publish the store, you need to wait until the audit cycle

Native app update is a big problem , Android can also download the entire package apk for updates, but iOS, if it is released AppStore, must be updated through the AppStore address, and each update needs to be audited, so it is not up to date

High Maintenance costs

As with development , after the project is on line, maintenance is also very troublesome.

Web App

that is, the mobile web site , the page is deployed on the server, and then the user to use the major browser access, not a standalone app, unable to install and publish

Web sites are generally divided into two types, MPA (multi-page application) and Spa (Single-page application). The web app generally refers to the following spa forms developed by the website (because can imitate some of the features of the app), there are some advantages and disadvantages

Advantages

Low development cost , cross-platform, easy to debug

Web apps typically require a single front-end person to develop a set of code that can then be applied to major mainstream browsers (which can be code-compatible), without new learning costs, and be debugged directly in the browser

Low maintenance costs

ditto , if the code is reasonable, you need only one front-end to maintain multiple web apps

The most rapid update

because the Web App resources are deployed directly on the server side, only the server-side files need to be replaced, and the user access is updated (some caching issues, of course)

No installation required Apps that don't occupy your phone's memory

accessible through a browser , without installation, users will be more willing to use

Disadvantages

low performance and poor user experience

because it is accessed directly through the browser , it is not possible to use the native API and the operation experience is not good

relies on the network , the page access speed is slow, consumes the traffic

Web app every access needs to go to the server load resource access, so must rely on the network, and slow speed of access is not ideal, especially on the mobile side, if the site optimization is not good will consume a lot of traffic

Limited functionality , large number of functions cannot be achieved

can only use HTML5 some of the special APIs, cannot invoke the native API, so many functions are unable to achieve the situation

temporary access , low user retention rate

This is both its advantages and disadvantages, the advantage is that there is no need to install, determined that it is sometimes difficult to find after use, or it is difficult to specifically for a web app to retain a portal, which makes it difficult for users to use again

Hybrid App

that is, hybrid development , that is, semi-native semi-web development model, has a cross-platform effect, of course, the actual final release is still a separate native app (various platforms have a variety of SDKs), has the following advantages and disadvantages

Advantages

Low development cost , cross-platform, easy to debug

Hybrid mode, from the native to provide a unified API to JS call, the actual main logic has HTML and JS to complete, and because the final is placed in the WebView display, so only need to write a set of code, to achieve cross-platform effect, in addition can also be directly in the browser debugging, very convenient

The most important thing is just a front-end person to learn a little JS API calls, no two independent native personnel

General Cross-platform in hybrid can have a minimum of three platforms: Android App,ios App, normal WebKit browser

Low maintenance costs and reusable functionality

ditto , if the code is reasonable, only need a front-end to maintain multiple apps, and very versatile can also be reused

More Free Updates

Although there is no web App update so fast, but the hybrid can also be provided through the native API, active resources download, to update only the resource files, not update apk (IPA) effect

Low learning costs for novice-friendly

In This development mode , only the front-end staff to focus on some of the native API, the implementation of the need not care, no new learning content, only the front-end personnel can develop

Improved functionality , performance and experience are much better than web apps

because the native API can be called , so many features can be implemented as long as the native provides, but also the performance is relatively close to the original

Some of the performance requirements of the page can be natively implemented

This is supposed to be Hybrid mode is one of the most advantageous, because this mode is a native hybrid web, so we can fully interactive, high performance requirements of the page with native write, and then some other pages with JS write, embedded in WebView, to achieve the best experience

Disadvantages

compared to native , the performance still has a large loss

This mode is limited by the performance of the WebView, a lot of loss compared to the native, experience can not compare with the original

not suitable for apps with strong interactivity

The main applications of this model are : Some news reading class, information display class app, but not for some interactive or high performance requirements of the app (such as more animation is not suitable)

React Native App

Facebook launched a new set of open-source app development programs, Facebook in the initial research hybrid development, feel that the model has congenital defects, so decisively abandoned, instead of self-study, and then launched their own "React Native" solution, unlike H5, is also different from the original, more like the use of JS to write native applications, has the following advantages and disadvantages

In fact, many big companies have turned React native developed, already very mature.

Advantages

Although the development cost is greater than Hybrid mode, but less than native mode, most code can be reused

compared to the native mode , this mode is unified with JS write code, so often only one member to learn, you can complete the development of cross-platform app, and subsequent code encapsulation good, many functions can be reused

performance experience is higher than Hybrid, not inferior to the native

this model and Hybrid is not the same, the view layer in hybrid is actually DOM, but the view layer of this mode is virtual DOM, so performance is higher than hybrid, the distance from the primary gap is small

This pattern can be thought of as JS write the original, that is, the page with JS write, and then native through the bridge technology Analysis JS, JS content separately rendered into the native Android and iOS, so that is why performance is not inferior to the native

Developer Single technology stack , one-time learning, cross-platform development

This pattern is unified by JS writing, has a unique syntax, so only need to learn once, you can simultaneously develop Android and iOS

Community Prosperity , difficult to solve problems

This is supposed to be React native is a big advantage, unlike the hybrid model and the native model as each battalion, this model is launched by Facebook Unified, so there is a unified community, there are a lot of resources and active personnel, friendly to the developer

Disadvantages

Although it can be partially cross-platform , but not hybrid in one write, two times run that kind of, but different platform code differences

this pattern is actually still JS to write native, so the native code in Android and iOS will be different, if you need cross-platform, for developers have a certain requirements

of course , if the development of a certain time, the component library is rich enough, then in fact, the impact is not much, even faster than the hybrid

Developer Learning at a certain cost

Although the community is already relatively mature , but a new ordinary front end learning still have a certain learning cost, not as smooth as the hybrid model

3. app development model for

	Native App	Web App	Hybrid App	React Native App
Native feature Experience	Excellent	Poor	Good	Close to good
Rendering performance	Very fast	Slow	Close to fast	Fast
Support for device bottom-level access	Support	Not supported	Support	Support
Network requirements	Support offline	Dependent Network	Offline support (Resource storage local condition)	Support offline
Update complexity	High (almost always updated via the store)	Low (server-side direct update)	Low (can be updated with resource bundles)	Low (can be updated with resource bundles)
Programming languages	Android (Java), IOS (Oc/swift)	Js+html+css3	Js+html+css3	Mainly use JS to write, grammar rules JSX
Community Resources	Rich (Android,ios alone learning)	Rich (lots of front-end resources)	have limitations (different hybrid are independent of each other)	Rich (Unified and active community)
Difficulty in Getting Started	Difficult (different platforms need to learn separately)	Simple (write once, support different platform access)	Simple (write once, run any platform)	Medium (Learn once, write any platform)
Development cycle	Long	Short	relatively short	Medium
Development cost	Expensive	Cheap	More inexpensive	Medium
Cross-platform	Non-cross platform	All H5 Browsers	Android,ios,h5 Browser	Android,ios
App Release	APP Store	Web server	APP Store	APP Store

4. Selection of app development mode Choose the pure Native app mode case

High performance requirements , very good experience, not the pursuit of development efficiency

generally belong to the level of fastidious , because normally if the requirements are not particularly high, there will be hybrid

Choose the Web app mode scenario

no pursuit of user experience and performance , no requirement for offline access

normally , if you're looking for performance and experience, you won't be using web apps

no extra features , only some information to show

because of the limitations of the web, many features cannot be implemented, so there are only a few additional features that can be deprecated.

Select the Hybrid app mode

Most of the cases This mode is recommended by the app

This model can be used to achieve high-demand interface , for some of the more general-purpose, display-type pages can be implemented with the web, to achieve cross-platform effect, improve efficiency

Of course , generally a better hybrid solution, will put resources in the local, can reduce network traffic consumption

Select React Native app mode

The pursuit of performance , experience, while the pursuit of development efficiency, but also have a certain technical capital, willing to invest in the early

React Native This mode learning cost is higher, so need to invest a lot of time to achieve a better level, but with a certain level, developed its advantages embodied, performance is not inferior to the original, and the development speed is very fast

Hybrid app (i) App development selection