February 9, 2016

When to Take a Hybrid Approach for Mobile App Development

We recently started working on the idea of developing a mobile app for one of our clients, and we faced a familiar question: whether to go with a native or hybrid mobile app.

To help make the decision, we brainstormed the main requirements with our client and found them to be:

  • A very limited time period for app development. The client wanted this mobile app to hit the market as soon as possible
  • An app for Android and iOS devices that had a single code base
  • The app needed to have native features such as reminders, push notifications, and offline capabilities

Why We Chose a Hybrid App

Based on what we heard from the client, we chose to develop a hybrid app. These were some of the main reasons we decided to go hybrid over native in this case:

  • Hybrid apps are platform independent and reduce development time because a single code base works on different platforms like iOS, Android, and Windows.
  • You don’t need to have different skill sets for various platforms. A web developer with the skill set of HTML5, CSS, and JavaScript can develop a hybrid app for all platforms.
  • Hybrid apps can use the native features like notifications and reminders through tools like Cordova and Phone Gap
  • Hybrid apps support offline capabilities with local storage, as well as offer support for SQLlite database for local storage

Once we had chosen a hybrid app over other approaches, the question became: which framework or library will we use for hybrid app development? There are various frameworks available for this purpose like ReactNative, Ionic Framework, Cordova/Phonegap, and Xamarin, but we decided on Ionic.

About Ionic

The Ionic framework uses HTML5, CSS, and JavaScript. It’s a wrapper over the well-known JavaScript framework, AngularJS.

We chose the Ionic Framework because:

  • Ionic framework is Open Source
  • Exposure to AngularJS and Ionic framework is based on AngularJS
  • It supports different platforms, such as iOS, Android, and Windows
  • It provides built-in UI components that suit the client requirements and reduce the development effort
  • It supports native features like reminders and notifications by using Cordova and Phone Gap plugins
  • It supports security features like the White List plugin
  • It supports offline storage using SQLlite
  • It supports gestures like swipe, tap, and transitions
  • It has a very active online community and forums, which are a great help

Despite Ionic having so many positive features, we faced numerous challenges.

Challenges in Hybrid Apps

  • Performance: The Android webview perfomance is not at par with iOS webview. So there may be instances where some parts of the app will work smoothly on iOS but lag on Android.
  • Animation: All of the animations, supported by JavaScript and CSS, can be implemented in hybrid apps. But, they aren’t as smooth as they are in native apps.
  • Gestures: Handling multiple gestures at the same time can be tedious sometimes. As hybrid apps are partially web apps, it takes time (a few hundred milliseconds) to identify a particular gesture. This requires the gestures to be handled programmatically, which is not preferable.
  • Scrolling: Instead of using native scrolling, Ionic provides its own scrolling, which is not as effective.
  • Other challenges: In Ionic, the view takes some time to render, so sometimes scrolling and setting the focus on text fields has a noticeable performance difference when compared to a native app.

How we dealt with those challenges

We have found a way around these various challenges. The solutions we found are not generic to issues like performance or scrolling, but they helped us to achieve almost everything that was required.

  • Performance: Hybrid apps are like single page applications running on a device using webview, so by keeping performance in mind, we tried to keep the screen and the workflow as simple as possible. This has the added advantage of better user experience.
  • Animation: Ionic provides basic page transition and animation, which are well-tested on different platforms, so we tried to stick with the default transitions and animation. Any customized transition or animation had to be tested on multiple platforms and may cause issues on those different platforms.
  • Gesture: Ionic supports gestures like swipe, tap, click, and hold, so we restricted ourselves to use the default gestures because the programmtical handling of new gestures may have caused cascading issues.
  • Scrolling: Ionic provides its own scrolling, so we tried to avoid manual scrolling. We also tried to show the data on a single screen as much as possible so that we can avoid a scrolling issue

The Future of the Ionic Framework and Hybrid Apps

From a developer standpoint, Ionic is coming up with the new version, Ionic 2.0, that is based on AngularJS 2. So, its performance is expected to improve. It would also come with more inbuilt animation features and handle gestures more effectively so that manual handling becomes less of an issue.

From a client perspective, the expectation is that the hybrid app will essentially be a replica of a native app. If there are more hybrid apps available, then clients would have a better understanding of hybrid apps and their expectations and requirements.

From a testing perspective, there should be some documentation or write-ups that explain the limitations of hybrid apps. At times it becomes impossible for developers to help their QA teams understand that it’s the limitation of framework being used.

Recently Facebook has come up with an open source solution for building hybrid apps for Android and iOS that is not webview-based. The ease of use of ReactNative and ReactJS has garnered a positive response from the Hybrid App Developers community.

Why should you choose Hybrid app development?

Fast to serve: If the client’s main requirement is to hit the market as soon as possible, hybrid apps are the way to go. There is a single code base for all platforms, so both the time and effort are reduced substantially.

Cost effective: Because of single code base, the same app works on different platforms, thus reducing the development and maintenance cost.

Limited native behavior requirement: If the client’s requirement is a not-very-complex app with limited requirements for native behavior, hybrid apps are the right choice. The Ionic framework has limitations for animations, gestures, and other features, so it should be chosen if the client requirement reflects that need. However, limited native behavior doesn’t mean we can’t have native functionalities in the hybrid app. Cordova provides plugins for almost all frequently used native features and they are at the developers’ disposal to integrate into their hybrid app. However, developers should always consider performance impact when using a plugin or creating a new plugin for that purpose.