Requirement
The client is required to use a technology that is an open-source mobile tool kit for building high quality, cross-platform native and web app experiences with a single codebase so that the same is easy to maintain.
The problem faced by the client was that they have to maintain different codebases for different platforms like Android and iOS, but it was required to have a single codebase for all the platforms at a single place so that the same was easy to maintain, required less expenditure, faster to deploy and easy to update.
Approach & Findings
To finalize our approach for choosing the most appropriate technology to fulfill the client requirements we considered the following factors:
- Ability to build a user-friendly user interface for the applications for iOS, Android, and PWA.
- Ability to integrate backend web-services with the code.
- Ability to implement localization features in applications.
- Ability to implement a common Database solution to locally store all data for PWA, iOS, and Android-based apps.
- Ability to manage and implement different themes, layouts, configurations, logic files, and resources to give each app a personalized look.
Based on these factors we chose IONIC as the technology platform to build a single codebase for our applications running on different platforms. Ionic uses the following web technologies — HTML, CSS, and JavaScript — with integration for popular frameworks like Angular and React. We choose Angular as the integrated framework with Ionic.
Ionic apps are made of high-level building blocks called Components, which allows quick construction of UI for the app. It comes as a stock with several components, including cards, lists, and tabs that can be used to develop a robust UI that can look and work well on all platforms (iOS, Android, and PWA). We can also customize the UI elements as per a specific platform. Testing of UI on different platforms is also simple as it can be done using the Developer Tools option in a browser like Chrome. (Achieved for all the platforms)
API integration using Ionic was also achievable and simple. (Achieved for all the platforms) Ionic is a framework built on top of Angular. So, to translate our Ionic application, an ngx-translate module is required, which is a third-party solution created by Angular enthusiasts. With the help of the ngx-translate module and by enabling in-context translations editing, we achieved localization for the app. (Achieved for all the platforms)
We initially used SQLite which is used to set up a local device database that can be used to store data in form of tables using SQL queries. It performs CRUD (Create, Read, Update and Delete) operations on data. It is fast and has reliable offline access to data which can further handle complex data and has advanced query support. However, it is only supported by mobile applications and does not support PWA. Hence, we moved to another option which was Local Storage. In this, we store data in the form of simple key-value pair. Handling complex data is a complicated process and must be managed on the application end. However, it is supported by all the platforms – Android, iOS, and PWAs. (Achieved for all the platforms)
Branding was one major problem for which we did not have a straightforward approach as a solution in Ionic. So, we achieved this using a java-script based build tool – Gulp. (Achieved for all the platforms)
Conclusion
Based on the above, we concluded that most of the requirements that the client had could be achieved using a cross-platform or hybrid technology are mostly achieved by using Ionic. Also, the testing and deployment process here is not a difficult task either.
