Reference blog: H5 entry-phone App Development: Concept papers , H5 entry-phone App Development: Technical articles
App is divided into the following three types of mobile phone
- Native application (native application, referred to as the native App)
- Web applications (web application, referred to as Web App)
- Application of mixed (hybrid application, referred to as hybrid App)
Native application
You need to download the application market
advantage
- Better performance and experience
- You can use all the system hardware and software API, such as GPS, camera, microphone, accelerometer, push notification, etc., can give full play to the potential of the system
There is a problem
- The formation of a large team
- App native language using the underlying operating system, are heavy compiled language development and debugging costs are relatively high, long period of time
- Native App must download and install to use, as long as the upgrade version, you must re-download and install. Users are often reluctant updated version, manufacturers are forced to have long-term support for a long time before the old version
Web Applications
Web App is using web-based application to do, you must use the browser, for example, you send and receive mail in a browser, that is, the use of Web App
advantage
- You do not need to download and install, open the browser will be able to use, and always use the latest version
- For developers, Web App to write faster, easier to debug, it does not require the approval of the application store will be able to release
There is a problem
- API (ie, Web API) provided by the browser is very limited (currently only camera, GPS, batteries and a few), most of the hardware system can not be accessed through the web page, you can not read the file directly to the hard disk, so can not take advantage of Web App hardware platform
- Web browser rendering performance than the native App, is not suitable for high performance requirements page
Progressive Web App (Progressive Web App), PWA
Chrome team developed new technology to solve the following problems Web App
- Not directly accessible from the first screen mobile phone
- Notify the push of a lack of capacity when the phone status bar and lock screen
- Does not support offline access (that is off the network can also be used)
PWA site can be cached in cell phones, for offline use, but also the first in the mobile phone screen generation icon, just click to enter; and there is a push notification capability, nor with the browser's address bar and status bar, with the native App very close to the experience. However , PWA need a browser to access a website in order to generate the first screen icon, and currently supports iOS system is not ideal, it was just an exploratory technical nature, the lack of enough success stories to date
Hybrid applications Hybrid App
Native App and Web App in combination . Its shell is a native App, but put inside a web page. Can be understood as mixed App hidden inside a browser, the user sees is actually the hidden browser rendered pages. Small micro-channel programs belong mixing applications
Hybrid App native shell called "containers", hidden inside the browser, typically using a web rendering controls (ie WebView control) system provides, you can also built himself a browser kernel.
Structurally, App mixed into three layers from top to bottom:
- HTML5 web layer
- Web engine layer (essentially an isolated instance of the browser)
- Container layer
API Bridge
Also known as JSbridge, web layer by JSbridge call native API. App inside the mixing different from the ordinary Web pages, the system can call all the underlying API, secret lies in the outer container provides API Bridge, acting as an intermediary level API that allows web underlying internal call. The so-called API Bridge is the underlying interface between the container and the web to build a bridge for both sides to communicate. Once the container is to request a web page, according to the request to call the API of the underlying system, and then returns the result to the web page. API Bridge JavaScript language often provide convenient page call, and then called JSbridge (such as micro-letter JS-SDK)
Technology stack
- PhoneGap
- Cordova
- Ionic
Hybrid App advantage
- Cross-platform: Web technology is cross-platform developers to write once a page, you can support multiple platforms. That, mixed App requires only a team enough, lower development costs
- Flexibility: Mix App of flexibility, it is easy to integrate multiple functions. On the one hand, mixed App easily load external H5 page, plug-in architecture to achieve the App; on the other hand, Web pages can easily call external Web services
- Facilitate the development: debugging and building Web pages, far more than simple controls when native province. Update page is also easy, just released a new version on the server, the container update trigger on it
Problems mixed App
Due to the presence of the intermediate layer web engine, so the performance is quite lacking, not only as good as the native App, and because WebView is not a full-featured browser, may be slower than some of the Web App
Cross-Platform App technology stack
Cross-platform technology stack refers to the use of a technique to simultaneously support multiple mobile platforms. It differs from hybrid technology stack that does not use Web technology, that is, its page is not HTML5 page, but uses its own syntax to write the UI layer, then compiled into native App for each platform. Hybrid technology stack and the foundation of cross-platform technology stack, are native technology stack, because eventually be compiled into native App, so no matter what kind of technology stack to use, more or less to understand some of each primary technology platform.
Technology stack
- React Native: write a page using JavaScipt language
- Xamarin: Use C # language page
- Flutter: write a page for Dart
The above mixing technology stack using HTML language page, and then WebView control loads the page, so only write-once pages, you will be able to support multiple platforms. Cross-platform technology stack can do multi-platform support, but the principle is completely different. Cross-platform technology stack framework, are using their own syntax to write a page, without the use of Web technology, compile time and then converts it into native controls, or use your own underlying controls on native App. This completely solves the problem of poor performance of the Web page.
React Native principle
Note that although React Native also use the JavaScript language, and writing looks like a Web page, but in fact all controls are defining your own, compile time again one translated to corresponding native control. For example, React Native text rendering controls are <Text>, translated into iOS controls as UIView, translated into Android TextView control to
React Native issues of
React Native idea, although very beautiful, but the actual development of the emergence of a variety of problems. The main question is, UI abstraction layer translated iOS and Android native page, do exactly the same, there are differences especially complex pages, style or function. Native App compiled two platforms is often a normal, there will be all kinds of other strange ailments. If you want React Native iOS and Android experience to do the same, and give full play to the function of native control, you need to be familiar React Native, iOS, Android three platforms, which requires the developer's too high.
