At Unvired, we were tasked with rebuilding an iOS native app onto an HTML5 Hybrid for a healthcare services company. The main objective was to target the ever-increasing Android market and doing it with a common code base for Android & iOS. This will be a three-part blog dealing with the technologies we use, how we achieve peripheral integration and how we internationalize our apps for all markets. I want to share my thoughts in developing this application and explain why we think building a hybrid mobile app is probably more suited now than ever before.
The advantages of building a Hybrid app over platform-specific native apps are many. On the face it, you get to maintain a single code base across platforms. Writing the code just once and getting it run on multiple platforms is not just cool but also saves a lot of time and money. Effectively, this means you get to market your app faster on multiple devices and don’t need to choose one set of users (or market) over the other.
The various technologies we used for app development:
- Ionic Framework (ionicframework.com):
Ionic has a rich set of mobile-optimized UI components which when run on a mobile device, offers native look and feel. It also integrates with the Cordova Framework (https://cordova.apache.org) for accessing native capabilities. This basically means you can support any native feature like Camera, custom Hardware integration, Push Notifications, etc., from your Hybrid mobile app.
- Angular JS with Typescript:
Angular JS is an HTML5 technology which lets you manipulate an HTML on the fly. The latest version of Angular JS (Angular JS 4) uses Typescript (https://www.typescriptlang.org) for app development. Typescript converts to JavaScript under the hood but offers big benefits like object-oriented design, type-checking, ahead of time compilation, all of these which are not available for JavaScript developers.
- Visual Studio Code IDE:
This is an IDE from Microsoft and offers many developer-friendly features like code refactoring, navigation using hyperlinks, type-checking, built-in source control, etc. This IDE checks for syntax errors in the code and the developer can fix the code without having to compile the code in order to spot errors. Source control integration with Git makes it even more compelling.
Under the Hood:
Ionic helps realize “near” native look & feel in hybrid. The UI elements in Ionic are so well designed, it’s many times visually hard to distinguish a native app from an Ionic app. This means your users won’t have to adjust to a new UI paradigm when they upgrade to a hybrid version of your app.
On the performance side, Ionic has improved dramatically over the last few years. For example, it uses WKWebView when the app is run on an iOS device. WKWebView is a high-performance webpage rendering engine from Apple. Ionic uses the best technology in each of the platforms for delivering the content. Because of all these reasons, the app experience in Ionic is such a breeze.
The app that interfaces with a smart pillbox to help patients take the right medication. Communication with the Bluetooth enabled Pillbox is mission-critical for this app. This calls for tight hardware integration with the native layer and Ionic aces in this aspect.
Ionic has a vast set of native integrations which are called plugins for use by the developers. These plugins tap into the native capability in each of the supported platforms and offer a common interface for interaction through Typescript. Our target platforms of this app were iOS and Android and we used a Bluetooth Low Energy plugin (https://ionicframework.com/docs/native/ble/) for integrating with the smart pillbox. One can find a list of all the native plugins available in the Ionic Website. If you don’t find an appropriate plugin for your requirements, you can develop one quite easily by using the Cordova Framework (https://cordova.apache.org).
Overall, adopting HTML hybrid app has been a rewarding experience so far and it offers great benefits like ease of development, quick time to market the app, great performance and robust integration with the native platform. Given all these benefits, it’s probably the right time to make the switch to the hybrid route for developing multi-platform mobile apps.
Note: You are probably aware that React Native has a lot of traction over hybrid in developing mobile apps, React Native though takes a different approach to mobile development. React is “Learn once, write anywhere” whereas Hybrid is “Build once, run anywhere”.
Read more on React in our blog Part- 2.
