Hybrid App Development History

It was almost a year since the previous article, "Simple application based on JS-SDK," was a shame. The last time after the change of work, has been in a relatively busy state. Second, after a long period of time are not engaged in mobile-related work. Until March this year, temporary secondment to support other project teams began to touch the mobile project.

Today is still hybrid, as for the reason, often talk about mobile internet, talk about hybrid, I always rejoice. I remember the summer of 2013, the concept of hybrid was just emerging, I did not know about the mobile Internet to participate in the internship recruitment of H5 engineers; Of course, the final interview did not pass, although the project experience in school, the other party is very recognized, but the other side of the main business direction is the mobile internet The interviewer seriously introduces the differences and pros and cons of the native app, Web app and Hybrid app, and instantly ignites my determination to do mobile development.

　　First Stage: birth

Thanks to native development costs, the pain of iterative cycles and the experience of Web apps, hybrid was popular and quickly became famous. However, most of the hybrid of the webview, so Phonegap/cordova almost as long as people who have heard hybrid know, JQuery, ExtJS, have launched the mobile version of JQ Mobile, and Sencha to Uch, which makes the development cost of hybrid quickly reduced, and the experience has been prompted.

　　Phase II: Integration

WebView-based hybrid solves a lot of compatibility issues and improves a certain user experience. Then WebView has a natural flaw in the animation, and provides H5 with a very limited ability to use the end, since H5 animation is very stuttering, then why not give the animation to native, H5 only responsible for the content of each page. As a result, a spa application is also cut into multiple pages that exist in several webview containers. The Web container is responsible for the switching between pages, even if the network terminal, the container can still provide some error processing ability, not the overall page white screen, and not operational. The second-end capability is the last mention of a jssdk-like middle tier. More primitive we can also negotiate some scheme protocols and callbacks directly with the native to communicate directly with native, however this can cause H5 to be difficult to maintain in practice. Jssdk actually refers to a localized JS file, also called Js-bridge, which is the bridge between native and H5 communication. Bridge exposes some simple and unified APIs to H5, making communication between H5 and Native very simple.

　　Phase three: Offline

Mobile scene and PC a big difference is the network environment, PC scenarios are mostly home broadband, office environment and so on, the speed is usually relatively fast. In addition to the mobile side 4g, there are many 3g,2g network, network crash for the user experience a big bottleneck; offline is formally to solve the problem of resource loading. Through the resource offline, can solve the home page white screen, such as a series of user experience problems caused by the slow loading of resources, after offline, the requirements of NA will be improved, resource package cache update policy, network requests, equipment, location information, H5 on the native will be more obvious, The development of the relative H5 section has actually become simpler. Attach the path of rice component-based platform evolution

　　Stage four: React Native

The appearance of react and react native is even more surprising and exciting than the advent of hybrid. Not only new libraries and tools are upgraded, but development ideas and ideas are upgraded. Virtual Dom; Learn once, write anywhere, and so on. is a bright sight. This stage in the hand and some other companies are also in use, I plant native team is also actively studying the react native runtime, for early integration into the existing app; React native is different from the way of completely detached webview, A new way for front-end engineers to quickly write apps that are comparable to the native experience.

This is just what I see from the perspective of a front-end engineer Hybrid Some of these years of changes, as Hybrid is native + webapp mixed product, Hybrid development, not only the front-end engineers, but also need native engineer support. How to make that our hybrid application can quickly disassemble the combination, is also the native and the front end together to do the thing. Now speaking, hand Amoy, glutinous rice, hand hundred, these large flow of apps, are in the direction of the platform, can quickly access H5 applications, and provide the corresponding capabilities, and for H5 applications, may also access to the hands of hundred and glutinous rice platform; The platform needs to ensure a high degree of scalability to meet the needs of different H5, H5, however, needs to minimize its migration costs in different component platforms. Native and H5 become the container and the content of the relationship.

Hybrid App Development History