Over the past year, I’ve had the chance to work on Ionic extensively. In this post, I would like to share my experience working on Ionic and discuss some of the major differences between Ionic v1 and Ionic 3.

What is Ionic?

According to Wikipedia, “Ionic is a complete open-source SDK for hybrid mobile app development”. It is a front-end framework for web developers to build hybrid mobile apps quickly using angular. Ionic provides a set of front-end components with the native look and feel. With Ionic, the same code base can be used to build Android, iOS and Windows mobile applications. Ionic can be used along with Cordova to access native functionality. Cordova plugins can be installed and used in Ionic apps. For certain popular plugins, Ionic also provides an angular wrapper to allow safe and easier usage.

You can read more about ionic here.

Ionic and Me

My first encounter with Ionic framework was during my internship. It was an older version of Ionic; Ionic v1. Ionic v1 is integrated with AngularJs. I was assigned a couple of stories on a mobile app which required me to go through most of the code base and understand the flow. I had never worked on Ionic before, and I didn’t have any web development experience. Understanding the flow was challenging as I wasn’t familiar with stateprovider or injections. It was intimidating, but I was able to get through it by reading code, googling stuff I didn’t understand, and occasionally (read frequently) bugging my mentor to help me (Thank you Vamsi!). But by the time I finished my internship, I wasn’t sure if I wanted to work on Ionic anymore. I had learnt enough to get my work done, but my understanding was shallow. It felt unnecessarily complicated - the routing, the sharing of data, and the organization of code.

Fast-forward a few months, we had to build a hybrid mobile app and an API for it to communicate with, and we had to build them fast. KJ and AG took on the responsibility of building the backend. You can read about AG’s learnings on API versioning here.

As for me, I was asked if I wanted in on the mobile app development. As a fresher, it was a great opportunity to learn how software is developed from scratch and how team members collaborate. It was also an opportunity to understand Ionic better. I didn’t want to miss out, and I said yes.

I spent some time reading the documentation on the framework and the documentation on Angular. We had a base Ionic theme (a mock app that could be modified) to help develop faster. We were able to get the app up and running in a really short period of time. And I loved it!

So, what changed?

We used Ionic 3 this time around. Ionic 3 is powered by Angular 4 as opposed to AngularJs in Ionic v1. You can see the major differences in syntax between AngularJs and Angular here.

  • Structuring of code: In AngularJs, the application is made of templates and controllers, which are bound together using states. Another approach is to use ng-controller inside a view to specify its controller. In Angular 4 (and Angular 2), the application is made of components. The components specify the associated template. According to Angular Docs, “Components are the most basic UI building block of an Angular app. An Angular app contains a tree of Angular components.”. In Ionic 3, the concept of pages is used. Every page in the mobile app has its own folder. The folder consists of the component, its template or view, stylesheets for the page, and they are wrapped together into a module. I think this is very neat. It also helps in lazy loading pages.

  • Navigation: Ionic v1 uses UI-router to navigate within the app. UI-router is an extension of ngRouter from AngularJS and uses states and stateprovider for navigation. But Ionic 3 provides NavController, which can be injected into any component. What this essentially means is that navigation is as simple as pushing or popping a page from the nav stack. Parameters can also be passed while pushing a new page onto the stack and retrieved in the new page using NavParams. You can read more about it here.

  • Lazy loading: Ionic 3 comes with the support for lazy loading using the IonicPageModule. With the page-based approach, lazy loading means we can load the pages on demand. This allows the app to load faster and gives a much better user experience. You can read more about it here.

  • Typescript: In Ionic v1, we write code in javascript whereas in Ionic 3, the code is written in typescript, which is then transpiled into ES5 or ES6. Typescript provides support for static typing as well as classes. Static typing has its pros and cons. It helps identify type errors early on in development, but it’s a pain when dealing with situations where dynamic typing is easier, like in the case of http responses. You have to either create classes for every type of response or avoid static type checking using “any” type. The support for classes since ES5 is really useful in structuring the code and boosts code reusability.

These are some of the differences that I noticed between the two versions of Ionic. They are also the reasons why I enjoyed developing an app using Ionic 3. You can find some more differences between the versions here.

I recently read that with Ionic 4, NavController’s push and pop methods have been deprecated and Angular’s Router has been brought in. I’m not sure how I feel about it, but I will know more once I use it. Also Ionic 4 is bringing in support for Vue framework. This will allow developers with experience in Vue to build PWAs or hybrid mobile apps without having to learn Angular or AngularJs : A Vue from Ionic

But if you do want to take a look at Angular as well, JG’s post is an excellent place to start : Angular 2 primer

So… Read. Build. Have fun!