Hybrid App Basics (i) what is the Hybrid app

Description

Hybrid app is a widely popular application development mode, this article makes a brief introduction to it

Directory

• Objective
  • Reference sources
  • Wedge
• Hybrid Hair History
  • A sudden H5 of prosperity
  • H5 the way of the big line
  • H5 Infiltration App Development
  • The prosperity of hybrid
• Hybrid overview
  • Hybrid definition
  • Hybrid App Type Division
• Hybrid architecture
  • Basic principle
  • Internal implementation Principle Flow
• The future of hybrid
  • Current multi-app development model and analysis comparison
  • The challenges facing hybrid

Preface reference Source

Walnuts, background shade, this article references the following sources

• HTML5 APP----2014 H5 No fire, why? 2016 H5 can fire, why?
• Talking about the design and realization of hybrid technology
• Hybridapp Solution _no1_ Hybrid mode (Hybrid) app development overview
• Do you really know the hybrid app?
• 2016 Latest Android version distribution
• Hybrid app

Wedge

Now the concept of the app was born after Google launched Android,apple launched iOS, from this point on, there is an application development engineer this position, such as Android engineers, iOS engineers (of course, some of the history of the obsolete, such as Symbian,win Phone will not be counted in.)

The most open app development is only the concept of native development, but since H5 widespread popularity, a more efficient development model hybrid came into being, it is "hybrid mode", this article for this model to do a brief introduction

The H5 of the sudden flourishing of hybrid's family history

HTML5 was officially released in September 2014, this time the release made one of the biggest changes is-"from the previous XML subset upgrade to a separate set", that is, HTML5 and the previous HTML is very different, this time he is no longer a certain faction disciple descendants, It became the Huang that opened the could.

Sub-HTML5 release began, slowly began to set off a H5 frenzy, such as "Friends Circle Games", "surround the nerve cat" and the like, but the real HTML5 fire, should be considered 2015 after, why, First, let's look at Google's release of the February 2015 version of the Android system.

From which we can see that the market share of Android4.0 is close to 90%, especially more than 4.4 of the proportion has more than 40%, that is to say, we have almost no consideration of the development of the system under 4.0, and more than 4.0 H5 support is much higher than 4.0 below. So it's time to use H5 technology.

H5 the way of the big line

Let's take a look at Google's April 2016 release of Android system share

We can see that almost all of the equipment is more than 4.0, and more than 4.4 has been more than 70%, especially more than 5.0 have been more than 40%, and Android 4.4 above the H5 support is already very good, so we almost and can be unscrupulous use of H5

H5 Infiltration App Development

As we all know, there is a webview component in the Native app development (Android is webview,ios7 below uiwebview,7 with Wkwebview), this component can load HTML file.

Before the HTML5, loaded HTML often can only be used to do some simple static resource display, but H5 big line, HTML5 has a lot of new features, cool effect, especially in iOS H5 support has been very good, Android 4.4 or more support is enough, So this time found that some of the main logic can be written in the H5 page, and then native directly with the WebView load display, which greatly improves the development efficiency, and the experience is very good

The prosperity of hybrid

The so-called hybrid, that is, mixed development, meaning semi-native semi-web, in fact, before the H5 flourished, hybrid mode is already relatively mature, but has not get mad bland not fire (because of the system's current and the limitations of the HTML function)

But since the H5 flourished, we found that many of the original functions can be implemented with the Web, and then native as a container display, so in order to improve development efficiency, more and more people use hybrid model for development, more and more hybrid development framework, more and more front-end full-time to become hybrid development , which means that hybrid also flourished.

Hybrid Overview Hybrid definition

What is the definition of the hybrid model mentioned earlier? What kind of development model is hybrid mode?

• Hybrid is a semi-native semi-web development model

  In hybrid mode, the underlying functionality API is provided by the native container in some way, then the business logic is done by the H5 page, and the final native container loads the H5 page, completing the entire app

• Mature hybrid mode means that business logic is implemented by H5

  A mature hybrid framework, meaning that all types of APIs are perfect, then almost all business-related logic is placed on the H5 page, native only as a container exists

• Mature hybrid mode is highly reusable and can be developed across platforms

  Mature hybrid framework, then the native will only provide the underlying API, that is, all the business is H5 complete, no matter what the project, the business is only implemented by H5, this time can be found that the business code can be cross-platform, that is, development once, can be combined with their native containers, Two kinds of native installation packages, achieving cross-platform development results

Hybrid App Type Division

The definition of hybrid is mentioned above, but in fact, depending on the degree of native and web blending, hybrid can be subdivided into multiple types again (refer to the encyclopedia)

• Multi-View Hybrid

  The main feature of this model is the WebView as a view component in the native, when needed to run the display independently, that is, the subject is Native,web technology just up some complementary role

  This model is almost native development, without reducing any difficulty, by the year 16 almost no one has used

• Single-View hybrid

  This pattern is within the same view, including native view and WebView (a cascade relationship with each other), such as some applications will use H5 to load Baidu map as the main content of the entire page, and then WebView overlay some of the original view, such as search for something

  This mode of development after the completion of the experience is better, but the development cost is large, generally suitable for some native people to use

• Web Principal type

  This model is the traditional sense of hybrid development, many hybrid framework is based on this model, such as phonegap,appcan,html5+, etc.

  One of the biggest features of this model is that the hybrid framework has provided a variety of APIs, packaging tools, debugging tools, and then actual development will not be used to any native technology, actually only use H5 and JS to write, and then JS can invoke the native provided API to implement some of the expansion features. Often the program from the portal page, to each function is H5 and JS completed

  Theoretically, this pattern should be the best of a pattern (because with H5 and JS writing the fastest, can invoke the native API, work can be improved), but due to some webview own limitations, resulting in this mode in the performance of the loss of a small, including some memory control deficiencies, So the experience is inferior to the native many

  Of course, this model should be optimal if you can solve the problem of poor experience (for example, iOS has a good experience with H5 support)

• Multi-agent co-existence (flexible type)

  The existence of this mode is to solve the problem of Web principal type, one of the most important features of this model is that the native development and H5 development coexist, that is, for some high performance requirements of the page module, with the original was born, for some general-purpose modules, with H5 and JS to complete

  This model has a cross-platform feature, and user experience number, high performance, not inferior with the original, but there is a big limitation is that the use of this model requires a certain technical premise

  In other words, this mode is different from the Web principal type can be directly with the third-party framework, this mode is usually implemented by some technical support companies themselves, including H5 and native communication, the native API provides, some of the container processing by the native personnel to complete, so say, The premise of using this technology is to have a professional native person (including Android,ios) and business Developer (native developer responsible for function, front end to solve simple general H5 function)

  Of course, if there is no technical problem, the app experience developed with this scheme is very good, and the performance is not inferior to the original, so it is an excellent solution

Hybrid Architecture Fundamentals

For example, pain over Jsbridge,h5 page can call native api,native can also call H5 page method or notify H5 page callback

Internal implementation Principle Flow

Knowing the fundamentals of hybrid, how is the hybrid model implemented inside? H5 and native direct communication is how to achieve it?

Please refer to the following series of articles

Hybrid the future of the current multi-app development model and analysis and comparison

Now the development of the app, in addition to hybrid, there are native, pure web,react native and other solutions, the following describes the various scenarios of analysis and comparison

Reference Native, Hybrid, React Native, Web app scenarios analysis and comparison

The challenges facing hybrid

For example, Facebook launched the React native program, which is Facebook in the abandonment of H5 after the introduction of an ' anti-H5 solution ', a sentence summed up is: Inside can use JS to write a full native application

such as the introduction of the small program (September 16), which is also a leading ' anti-H5 program ', one sentence summary is: Inside can be with js+ homemade UI scheme to write a similar to the native application, but this app is not published in the App Store, but published to the

Like the above technologies are constantly in the impact of hybrid mode (of course, native will also have an impact), but are highly respected JS (say a lot of front-end ape always hope JS eminence)

So far, the 2016 is almost over, the new technology is constantly gushing, all kinds of new technologies are constantly pounding the status of hybrid mode, as a word "wave before the Yangtze River, before the waves," any technology will be the time of ruthless screening, please don't be surprised, maybe some day later, You will suddenly find that the hybrid pattern is completely outdated.

Hybrid App Basics (i) what is the Hybrid app