Back

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.

With the web interface, HTML is used to describe the display layout (where and how each textual or graphical element is placed on screen) and scripts written with the Javascript language handle the user interaction (what do to when the user touches a button, for example).

Applis web mobile

A: Browser web view, described in HTML language
B: Javascript (JS) engine embedded in the platform
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.

  1. The browser transmits touch events to the scripts.
  2. The scripts interpret the user intent, and build a request for the platform.
  3. 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.
  4. The response is processed by the scripts, that package the data into graphical elements.
  5. The graphical elements are drawn in the browser view.

Benefits

  • No install and no update required
    Any mobile device has a browser and an embedded javascript engine. Since the web server is available online (or in a private network), mobile web apps do not require any form of installation on devices. They require neither any form of approval process from the editor store, or any form of update in the case the application needs to evolve.
  • 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.

Drawbacks

  • 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

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.

PhoneGap Build Diagram

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.

Hybrid Apps

A: App web view, provided by the platform
B: Javascript (JS) engine embedded in the platform
C: 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.

However, just like the web apps, hybrid apps are distinguished for their high consumption of device memory, needing up to 50-100 MB to manage a single screen. With the combined use of the platform javascript engine, the processor is more intensively stressed out, degrading the user experience: screen refreshing becomes sluggish, and responsiveness to touch events slows down. The device get warmer, and battery is exhausted faster.

Javascript engine performance is generally improved in newer mobile operating system versions. But HTML and Javascript being continously evolving standards, differing webview implementations per platform may also require specific adaptations for your mobile devices, as explained here or there. To better understand the differences, please refer to this technical article about the web view genesis and evolutions.

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

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.

Native Apps

A: App view, described natively
C: Platform
D: Web service

How does this work?

  1. The app interprets user touch events, and build a request for the platform.
  2. The platform sends the request to the web service and receives informations back.
  3. The response is processed by the app, then resulting graphical elements are drawn in the app view.

Benefits

  • Appearance adapted to the platform
    Native apps must follow the editor guidelines in terms of user interface, thus providing an optimal user experience and integrating seamlessly with other apps in the user mobile device.
  • 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).

Drawbacks

  • 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.


Discover how Motilia combines the benefits of native apps and those of hybrid apps - without programming