Around May-June 2018 We started developing an Ionic app. I have knowledge of web apps, hence thought of leveraging those skills to create a hybrid application which can work on Android, IOS, and on the Web. Various factors were considered while making this decision whether to go with the hybrid app or native android app since the target platform was only android.
Finally decided to go with Ionic 3 because of the availability of many third party plugins to help us with the native functionalities, it has been around for a while and had an active community. And also, because of the fact that most of my team members were more comfortable with Angular over React.
Getting started on browser was quick and easy. However, configuring android development environment with emulator was something new for me and took a bit of research. We kicked off with a login page and after login it was tabbed interface.
There was also a feature to view directions on the map but later we moved to redirecting user to native google maps app rather than showing those directions within our app.
I seriously hated working on emulator and dealing with native functionalities like camera, push notifications, GPS. Even I picked web based image viewer and video player and added touch gestures to them rather than using native ones. I feel that I lose control when going for native plugins and thus debugging or customizing them as per the needs becomes difficult. Hence, I tried to stick with web based alternatives whenever possible.
Generally on web we only deal with mouse events. But it's good to deal with touch events as well. Especially when users views the websites on mobile then he should have a pleasing experience. HammerJS helped me in dealing with common touch events and provide smoother user experience while dealing with touch events like swipe, pan, double tap, pinch zoom.
Since Ionic components follow material design spec hence it offers some basic animations. Mobile app users expect transition effects during navigation between various sections of the app hence its good user experience to add these effects. Angular-animations make it easy to add animations with various states of the component. For example if a component changes state from hide to show or show to hide then it should undergo a specified animation. This helps in providing the transition effects similar to native mobile apps.
Our microservices were built with node + GraphQL, thus on the client side I introduced apollo-angular to consume those APIs. There wasn't much to decide here, Apollo simply stood the de facto choice to go with because of its popularity, tooling available and active development. Apollo-angular 1.0.0 troubled us with some bugs for which we had to place some workarounds till they got resolved in v1.5.0 Use of GraphQL to fetch only the required data and then use of RxJS to process that data before binding it in the UI template made our life easier.
Since we started with Ionic 3.9.0 and Angular 5.1.0 and by March 2019 Ionic 4 and Angular 7 were released. This migration was challenging. Angular, RxJS, Apollo, Typescript were tightly coupled and all had to be upgraded keeping in mind they are compatible with each other. All these packages had significant breaking changes.
However, there were 2 major issues-
Anyway, the conclusion was to feature freeze our app and start migrating feature by feature to the new app and once regression tests provide stable results then shut down the older app.
Complete details on this upgrade is available in another article Upgrading Ionic-3 Angular-5 app
It was a decent learning experience. I believe that hybrid apps will continue in the market as Ionic4, react-native, flutter, native-script communities are active and providing a bridge between web and native environment.
Hybrid apps have huge potential to serve as an ideal solution for small or maybe mid scale apps. Basically, situations where quick prototyping or an MVP product is required. However, Progressive web apps (PWA) are amazing alternative and I will recommend them anytime over hybrid apps unless I want to use some core native functionality which isn't possible otherwise.
What are your opinions on hybrid apps vs PWA? Post your comments below.
- Ayush 🙂