Don’t break into the Misunderstanding of Hybrid APP

[Introduction]Hybrid App, a development model that takes into account the Web And a development model of Native. Some people say it kills Web App in the cradle, and some people say it leads Native App to a new stage. I said, it is a double-edged sword, don’t break into its misunderstanding. This article is some experience and lessons that the author summed up in the process of practicing the Hybrid App development model for readers’ reference. Although Hybrid App is good, you can never choose it hastily and use it blindly.

Smart phones are becoming more and more popular, mobile Internet chaos is becoming increasingly fierce, developing an application has long been a hot topic in the technology circle, on iOS and Android The App has become the standard configuration of every Internet product. “Only fast but not broken” is also regarded as the iron law by the mobile Internet people. Rapid iteration, efficient development, and low-cost launch are the goals pursued by every App development team. At the same time, with the continuous heating up of HTML 5 and the improvement of smartphone hardware performance, the concept of Hybrid App came into being. This Hybrid App development model of “Native builds the stage and HTML 5 sings a show” was sought after by various development teams for a while, quickly entered a large number of development teams, and became the mainstream development model.

Hybrid App has many advantages, web front-end engineers have zero cost intervention, does not rely on real-time updates of versions, quickly realizes cross-platform requirements, and so on. On the other hand, in 2012, Facebook, a practitioner of Hybrid App, decided to abandon a large number of HTML pages in the App and switch to a more native solution. Facebook’s move also sounded the alarm for the Hybrid App solution, which does not seem to be a perfect solution.

This article mainly shares with you my team and individual The problems encountered in the practice of Hybrid App remind everyone not to break into the misunderstanding of Hybrid App.

Misunderstanding 1: ForHTML 5andHybrid App.

HTML 5 is the most frequently mentioned concept in Hybrid App mode. HTML 5 is an upgraded version of HTML 4.0.1 and XHTML 1.0. Based on the old version, it has more powerful performance functions and added technologies such as Local Storage. It does provide more imagination and more possibilities for Web pages. . However, HTML 5 is in the current stage of development, and is affected by browser compatibility and mobile phone hardware performance. There is still a big gap between the functions it can provide and Native.

Therefore, I think that as an engineer, we need to be clear about the root cause of an App adopting the Hybrid App model. As an App, its most fundamental function is to meet the needs of users, not to serve a new technology. Therefore, when deciding to use Hybrid App to build an application, it should be considered from the functional characteristics of the application itself and the development resources of the entire team, whether it is necessary and the ability to control a “Native platform, HTML singing” at the same time. Hybrid App. Similar to “the era of HTML 5 has arrived, if we don’t do this, we will become a turtle. If we miss this tide of technological innovation, we will eventually be eliminated by this era.” It is really not a sound that a responsible engineer should make.

Misunderstanding 2: Ignore key factors < /h2>

When talking about Hybrid App, we mentioned more that it has many advantages, how to build a Hybrid App, how to make Web and Native Harmonious coexistence, but some factors that will be ignored in Web development are rarely mentioned. These factors are often the decisive factors for whether a Web page can run normally in an App.

Web development is a PC-based development model. Developers use PC browsers to simulate the Web View in the App for debugging. The difference between PC browser and mobile phone Web View is huge, the CPU resources that can be controlled, the largest memory, the running network environment, the difference between mouse operation and touch operation, the browser’s analysis of CSS/JS and event processing ,and many more.

App engineers, whether it is iOS or Android, the most sensitive issue is memory management, and in Web development, this problem has not been experienced. Watch out. This often leads to the native implementation of the same functional interface through some technical means to control the memory capacity within the range allowed by the operating system to ensure the normal operation of the App. If there is no clear standard and strict acceptance mechanism for web access to the App page, the corresponding web implementation will not consider this issue too much, and the browser does not provide enough Api support for front-end engineers to process memory The problem causes the App to fail to run normally or even crash under certain conditions.

The same problem will appear in the network environment. Although wifi coverage is getting wider and 3G networks are becoming more and more popular, but the App is running There is still a huge gap between the network environment and the PC. Many factors such as the handover of wifi and cellular networks, changes in base stations and other factors will cause intermittent network disconnection. Web development always has a stable network environment by default, so it is also lacking in dealing with unstable network environment problems. There is no clear handling of low-speed or unstable network access, and in many cases these pages will be very shabby.

Misunderstanding 3: Rich interaction leads to poor experience

The so-called experience problem here is divided into two: one is the experience that is inconsistent with the default interaction habits of the mobile phone platform, and the other is the experience gap with the native interface of the same function.

Whether on Android or iOS platforms, each has its own set of interaction habits, including visual style, interface switching, operating habits, etc. Web habits are completely different. If you use the Web method to develop rich interactive pages, or multi-page functions, such problems will arise.

Take the iOS interface switch as an example. The system style is that the new interface is pushed in from right to left, and the interface is pushed out from left to right when backing. The old interface remains in state. The default habit of web development is to refresh the page, regardless of whether the page is newly loaded or backed up, the page will be refreshed. Therefore, the use of Web mode to develop multi-interface functions faces such differences in interaction habits, resulting in loss of experience. Of course, the Web method can also simulate the Native interactive method, but this kind of simulation first increases the development cost, which is contrary to the original high efficiency principle, and from the effect point of view, it is difficult to achieve the fluency of Native.

Another aspect, also mentioned above, compared with Native, the same function has a huge gap in performance. The operation of JS on HTML Node on the web interface requires a lot of CPU resources. The performance of mobile phone CPU is not as good as that of PC. Even among smart phones, the hardware level is also uneven. An interface that can run smoothly on iPhone 5 , Running to the Samsung S III is likely to be stuck. Therefore, we can often find that the operations on some rich interactive pages cannot achieve satisfactory fluency, and fluency is also the most intuitive factor for users to evaluate the pros and cons of an App.

Misunderstanding 4: Cross-platform

One-time development, cross-platform operation is the advantage of the Web, which is also one of the important reasons why many apps adopt the Hybrid mode. Compatibility issues are often not paid attention to in the web development process, but nowadays there are many software and hardware versions of smart phones, and compatibility is definitely an issue that cannot be ignored.

Taking Android phones as an example, many mainstream brands have their own customized operating systems, the browser kernel analyzes JS and CSS, and events There are differences in handling and so on. Taking HTC One as an example, overlapping layers will transparently transmit click events in some cases, but most other platforms do not have this problem. And the current development framework of the mobile platform is not yet fully mature, which can solve the compatibility problem very well. Therefore, developers are required to fully test the compatibility during the development process, and perform special treatments on some special versions.

Even on a relatively unified iOS platform, there are big differences between different versions. For example: CSS does not even support the position fix property in iOS 4.x, and the device with a 4-inch screen cannot support the apple-mobile-web-app-capable property well, and so on.

Misunderstanding 5: Interaction consistency.

Interaction consistency is a very easy to misunderstand concept, “consistency” is often understood as the same application in There must be a consistent experience under various platforms and scenarios. I think in the process of mobile platform development, “consistency” should be the consistency of App visual and interaction habits with the habits of the platform it runs on. However, the “one-time development, cross-platform operation” feature of Web development conflicts with this to a certain extent.

Take the “return to the previous page” operation as an example. On the iOS platform, there is always a 44-pixel-high navigation bar at the top of the page. There is a return button on the left side for the return operation, while the Android platform is used to using the return key operation provided by the device. The return button on the iOS platform can be connected to any other page by means of an absolute address, while on the Android platform, the return button and the device’s return key may point to different locations.

For example, a process like this: Homepage->List->Filter->Refreshed list, and the return operation at this time is expected to be oriented On the home page, the back button on the page can be implemented by means of an absolute link, while the back button of the Android device can only return to the previous filter page, and the return button is the list page before the filter.

The Hybrid App solution is a double-edged sword. On the one hand, it balances the advantages and disadvantages of Native App and Web pages, and solves them to a certain extent. In the process of Native App development, there are problems of slow iteration, version dependence, and insufficient Native development resources. On the other hand, excessive reliance on the Hybrid solution will cause the cost of web front-end development to rise rapidly, and even cause the overall App experience to decline, and even cause the lack of functionality.

Don’t use Hybrid for Hybrid, and control the boundary between Native and Web in the solution.

Extended reading

Older Mobtest iOS App for Facebook A special review article that explains the problems of apps that use a lot of HTML pages: http://blog.mobtest.com/2012/05/heres-why-the-Facebook-ios-app-is-so-bad -uiwebviews-and-no-nitro/

Senior developer @李秉骏 published in InfoQ “Hybrid App Actual Combat”, explaining the hybrid mode Advantages and disadvantages, and briefly introduces the technical reserves required to develop Hybrid App for readers’ reference. : Http://www.infoq.com/cn/articles/hybrid-app-development-combat

Senior Developer@唐巧较Early on the analysis article on PhoneGap, the mainstream framework of Hybrid App, I very much agree with the attitude towards PhoneGap. Although PhoneGap is good, don’t be greedy: http://blog.devtang.com/blog/2012/03/24/talk-about -uiwebview-and-phonegap/