Analysis of Hybrid app error

Hybrid APP, a development model that takes into account both Web and native development patterns. Some say it kills the Web app in the cradle, and some say it leads the native app to a new stage. I said, it is a double-edged sword, do not break into its misunderstanding. This article is the author in the Practice hybrid app development pattern process to sum up some experience lesson, for the reader reference. Hybrid app is good, but can not be hasty choice, blindly use.

With the growing popularity of smartphones and the growing sophistication of mobile internet warfare, the development of an application that has long been a hot topic for technical circles, iOS and Android apps have become standard for every Internet product. "Only fast does not break" is also in the mobile Internet is respected as the iron law, rapid iterative, efficient development, low-cost online is every app development team to pursue the goal. At the same time, with the increasing of the HTML 5 and the improvement of the hardware performance of the smartphone, the concept of Hybrid app emerges. This "native, HTML 5 opera" hybrid app development model for a time by the various development team sought after, quickly entered a large number of development teams, become the mainstream development model.

Hybrid app has many advantages, Web front-end engineers 0 cost intervention, does not rely on version of real-time updates, rapid implementation of cross-platform requirements, and so on. On the other side, Facebook, the 2012 hybrid app, decided to dump the HTML pages in the app and move on to a more native approach. Facebook's move also sounded a wake-up call to the hybrid app program, which doesn't seem like a perfect solution.

This article is mainly to share with you my team and individuals in the hybrid app in the practice of the problems encountered, to remind us not to break into the hybrid app error.

Myth One: Hybrid App for HTML 5.

HTML 5 is one of the most commonly mentioned concepts in the hybrid app model. HTML 5, an upgraded version of HTML 4.0.1 and XHTML 1.0, has more powerful performance features based on older versions, and adds technology such as local storage, which does provide more room for imagination and more possibilities for Web pages. But HTML 5 is at the current stage of development, and is influenced by browser compatibility and mobile hardware performance, and there is still a big gap between the capabilities it offers and native.

So, I think as an engineer, I want to be clear about the root cause of an app using 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 the decision to use hybrid app to build an application, should be from the application of its own functional characteristics and the entire team to develop resources for the development of the proportion of unified consideration, whether it is necessary at the same time and have the ability to control a "native, HTML Opera" hybrid App. Like "The era of HTML 5 has come, if we do not do this to change the turtle, miss the tide of technological innovation, will eventually be eliminated by this era" words really is not a responsible engineer should make the sound.

Myth Two: Ignoring key factors

When it comes to hybrid app, we mention more about its advantages, how to structure a hybrid app, how to make the Web and native live in harmony, but that some of the factors that are overlooked in web development are rarely mentioned, and these factors are often a web page that works The determining factor in app.

Web development is a pc-based development model in which developers use a PC browser to simulate Web view in the app. The difference between PC browser and mobile Web view is huge, can dominate CPU resources, the largest occupied memory, running network environment, mouse operation and touch operation difference, browser to CSS/JS parsing and event handling, and so on.

Back to the column page: http://www.bianceng.cnhttp://www.bianceng.cn/OS/extra/

The most sensitive issue for app engineers, whether iOS or Android, is memory management, while web development does not pay much attention to this issue. This often leads to the same function interface native implementation will be through some technical means, the memory capacity control in the operating system allowed to ensure the operation of the app. If the Web access to the app's page does not have a clear standard and strict acceptance mechanism, the corresponding Web implementation will not be too much to consider this problem, and the browser does not give the front-end engineers enough APIs to support the handling of memory problems, resulting in some conditions that the app does not work, Even crash.

The same problem will appear in the network environment, although now WiFi coverage is more and more widespread, 3G network is increasingly popular, but the app running network environment and PC still has a huge gap, WiFi and cellular network switching, base station changes and many other factors will lead to intermittent network disconnection. Web development always defaults to a stable network environment, so it is deficient in dealing with the problem of unstable network environment. There is no explicit handling of slow or unstable network access, and in many cases these pages can be very unfair.

Myth Three: Rich interaction results in poor experience

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

Both Android and iOS have their own set of interaction habits, including visual styles, interface switching, and operating habits that are completely different from web habits. This problem can occur if you are using the Web to develop rich-interactive pages, or multiple page features.

With the iOS interface switch for example, the system style is the new interface from right to left push, back when the interface from left to right, and the old interface to maintain state. The default custom of Web development is to refresh the page, which refreshes the page, whether it is a new load page or a fallback. Therefore, the use of Web mode to develop multiple interface features is faced with such a difference in interaction habits, resulting in experience loss. Of course, the Web can also simulate the interactive way of native, but this simulation first increased the cost of development, contrary to the original efficient principle, from the effect, it is difficult to achieve native fluency.

Another aspect, also mentioned above, compares with the native, the same function has the huge disparity in the performance. The Web interface JS operation of the HTML Node requires a lot of CPU resources, the performance of the phone CPU can not be compared with the PC, even in the smartphone, the level of hardware is uneven, one can operate on the iphone 5 smooth interface, ran to Samsung S III may well be stuck. So we can often find that some of the rich interactive pages of the operation can not achieve satisfactory fluency, and fluency is the user evaluation of an app is the most intuitive factor.

Misunderstanding four: Cross platform

One development, cross-platform operation is the advantage of the web, which is one of the important reasons why many apps use hybrid mode. Compatibility issues in the Web development process is often not concerned, but the current smart phone software and hardware version of a large number of compatibility is absolutely a problem can not be ignored.

Take the Android phone as an example, many mainstream brands have their own customized operating system, the browser kernel of JS and CSS parsing, event processing, and so there are differences. The layers that overlap with HTC One, in some cases, pass through the click event, but not on most other platforms. and the current development framework of mobile platform is not fully mature, can be a good solution to the compatibility problem. Therefore, developers in the development process to be sufficient to test compatibility, for some special version of special treatment.

Even on a relatively unified iOS platform, there are significant differences between versions. For example: In the iOS 4.x version, CSS does not even support position fix properties, the 4-inch screen device does not support apple-mobile-web-app-capable properties, and so on.

Myth Five: Interactive consistency.

Interaction consistency is a very easy to misread concept, "consistency" is often understood as the same application in various platforms and scenarios to have a consistent experience. I think that in the development of mobile platform, "consistency" should be the app vision and interaction habits and its operating platform of the habit of keeping in line. But the characteristic of web development "one development, Cross-platform running" has some conflict with this.

As an example of "go back to Previous page", there is always a 44-pixel navigation bar on the top of the page on the iOS platform, and a return button on the left is used to return the action, while the Android platform is accustomed to using the return key provided by the device. This return button can be connected to any other page via an absolute address on the iOS platform, while the return button on the Android platform and the device may point to a different location.

For example, a process such as: Home-> list-> filter-> refreshed list, at this time the return operation is expected to guide the first page, then the return button on the pages can be implemented by the absolute link, and the return key to the Android device can only return the previous filter page, again Returns the list page before the filter.

Hybrid app is a double-edged sword, on the one hand, it balances the advantages and disadvantages of native app and Web page, to some extent solves the problem of slow iteration, version dependence and native development resource insufficiency in native app development process, However, another aspect of over-reliance on hybrid solution will lead to a rapid rise in the cost of Web front-end development, and even the overall experience of the app decline, even resulting in functional deficiencies.

Do not hybrid for hybrid and control the boundaries of native and web in the scheme.