Mobile web, hybrid or native app, what are the differences?
There are 3 ways to build applications for mobile devices, each with strengths and weaknesses, with some differences in user experience. The resulting apps are called mobile web apps, hybrid apps or native apps.
From now on, we focus on solutions that would access a database or web service to read and write data.
Mobile Web Apps
Mobile web apps are mobile-optimized web sites that are running in a web browser. They are specifically designed to fit a mobile device screen size.
A: Browser web view, described in HTML language
C: Platform (operating system)
D: Web server
How does this work?
The browser initially loads the screen description and the JS scripts from the web server.
- The browser transmits touch events to the scripts.
- The scripts interpret the user intent, and build a request for the platform.
- The platform sends the request to the web server and receives the associated response, eventually containing graphical elements to describe how to draw data on screen.
- The response is processed by the scripts, that package the data into graphical elements.
- The graphical elements are drawn in the browser view.
- No install and no update required
- Uniform appearance
With a browser compatible with HTML version 5, the app should have a uniform look and feel on all platforms (more on this later).
- Cross platform
Any mobile device has a browser, allowing it to access the web server.
- Shorter development time
Web development is easier and faster than native development.
- Available skills on the market
Today, many developers have specialized in HTML / JS technologies, making skill availability a non-issue. But note that highly-polished web apps are mostly built by experienced client-side developers.
- No access to mobile specific features
Running in the browser, the web app is not entitled to use specific platform features, such as fingerprint or barcode recognition. In the later case, the mobile must send the barcode image to the server, that will carry the operation on its behalf.
- Web is the users' second choice
As seen in the mobile information section, mobile adoption is driven by the use of apps, in preference to the use of mobile web sites.
Hybrid apps are similar to mobile web apps in their operating principle. A browser is an app containing a web view and loading from a web server its screen description and JS scripts to manage the user interaction. As a difference, an hybrid app is an app containing a web view and loading from memory its screen description and JS scripts.
The vast majority of hybrid apps is built with an open-source wrapper called Cordova (previously PhoneGap). The resulting app has its own identity (a specific signature in the editor store) and icon, just like a native app.
A: App web view, provided by the platform
D: Web service
What are the differences?
There are a few differences from the previous schema.
As previously described, the app wrapper initially loads the screen description and the JS scripts from memory, speeding up the load process.
[2 + 2a] An hybrid app is allowed to access native platform features. However, this "bridging" feature between the web environment and the native platform must be developed using the native platform development tools.
Relying on the same base technology than web apps, hybrid apps benefit the same strengths and weaknesses, with the differences shown above.
In addition, hybrid apps must be installed and updated on each mobile devices, their logic being embedded in the app wrapper in the form of JS scripts.
Native Apps are apps with a native interface fully written using the native language of the platform: Objective-C or Swift for iPhones and iPads, Java for Android devices, C# for Windows Mobile devices. Native interface creates the best user experience. It is fast and neat, and it behaves the way users expects for each platform.
A: App view, described natively
D: Web service
How does this work?
- The app interprets user touch events, and build a request for the platform.
- The platform sends the request to the web service and receives informations back.
- The response is processed by the app, then resulting graphical elements are drawn in the app view.
- Appearance adapted to the platform
- Premium user experience
Native apps are the users' first choice, thanks to their fluid and responsive interface and their ability to implement all the platform specific features (think fingerprint recognition, for example).
- Longer development time
Native development is more difficult and complex than web development. Native development tools are quite hard to learn and time-consuming to use, thus pushing up the cost of mobile projects.
- Platform specific development
A native app developed for a platform can not be reused on another platform "as is". It must be adapted to the platform language and features. This is the major cost-driver and pain for mobile development.
- Install and update needed
Like any other app in your mobile device, native apps must be installed and updated on each individual mobile device.
- Skill shortage
Just a few developers are experienced in native technologies, making skill availability a real issue.
Now that you have a clear picture of the key technologies, please consider in the following article the criteria to help your business choose the right technology to implement.
The Motilia case
Motilia is a new generation tool that enables businesses to get their mobile specific solution without programming, while providing a native mobile interface. It combines the benefits of native apps and those of hybrid apps, including:
- Appearance adapted to the platform,
- Fluid and responsive user interface,
- Short implementation time, thanks to the lack of programming,
- No update required, in the event of functional changes due to business requirements.
Motilia helps businesses avoid dealing with delay issues of native app projects and speed up project implementation - in removing the programming phase. Simply mapping the database data will get the logical structure of the mobile solution built.