The Beginning
It was a warm morning, on the 14th of January, I remember because it was the 1st time I got a glimpse of what a corporate life looks like. I was excited when Akshay gave us an overview of what we will be learning. Starting with Vue and moving on to Ionic 1 in the 2nd month of my internship.
It was a rough beginning considering that I had to learn and start with the implementation of a completely new framework on a live project by the end of the 1st week. I struggled at first, but ionic has a really simple approach, plus I had good support, thanks to Shriganesh. I was tasked with upgrading the current login system to support two-factor authentication and Google login. At that time, I simply had no idea how to implement that. I realized that Ionic isn’t going to be of much use to me in the tasks I was given, it was angularJS that needed to focus on. Within another week I had gained a shallow understanding of AngularJS and ionic is very similar to HTML so I had enough to pick up some pace. The app was a pretty big one, comparing it with the college projects I had done so far. It was difficult to get a clear picture of all the dependencies and controllers and how they interacted with each other. A lot was going on.
What is Ionic..???
Ionic is a front end framework to build hybrid apps using web technologies.
Now without using fancy terms, I simply mean that -
You can build an Android app with ionic
You can build an iOS app with the same code
It has native plugin support that helps you to build pretty much any app you can see in the play store.
It uses angularJS/Angular which can be used to build SPAs as well. (If you don’t know what a SPA is, Google it, it would be worth your time! —> click)
Dealing with the Changes
But even with the native plugins, some issues took a lot of time for me to figure out, specifically the Google login part. Some things were working on testing and not on Dev. Later it started working on Dev but not on testing, the worst part of it was it did not throw any errors, ever! The control didn’t go into the success handler or the error handler. It didn’t even continue with the rest of the function, it simply vanished. Black magic.
After a week of struggle, it finally worked on Android but failed on iOS, we couldn’t fix that up until now.
I liked the implementation part a lot, but I was never a fan of CSS, I struggled to get things placed in the proper spots. I would say designing was never my strong suit, but I guess I improved a lot.
Finally, the internship was over, I didn’t know what I will be working with when I joined as a full-time employee. The funny thing is, I was assigned the same thing again, this time I had to upgrade the entire thing to ionic 4.
I thought how hard could it be, and anyways most frameworks are backward compatible with their older versions.
Big Mistake
Ionic 1 and ionic 4 are miles apart due to the simple fact that the earlier version used angularJS and now it has moved on to angular 7.
Yeah, Javascript to typescript!
Not so forgiving, and way too strict.
It felt like learning a completely new language. But I was okay with it. Learning new stuff is something I can never get bored of.
A lot of changes were there. A lot of new features. Pretty much a completely different package.
New Features Introduced in Ionic 4
1) Web Components
One of the nicest changes that ionic has brought is that they moved to web component for every single component. Web component is basically a set of web platforms APIs. This will allow the developer to build a new customized and reusable HTML tags for using it in web apps and web pages. Web components will forward more work to the browsers without the need to write plenty of code, making a significant improvement in the startup and loading times, and highly essential for building high performing web apps. It is based on four core elements: Custom elements, HTML imports, HTML Template, and Shadow DOM.
2) Capacitor
It’s a cross-platform API and a code extension layer which eases up to call the native SDKs from that of the web code and write the custom native plugins which your app is in the need of. It also entails PWA support to enable the developer to write one app and launch it to the app stores.
3) Stencil
It’s a new web component compiler developed by the ionic team to build the standards which are compliant with the web servers. It also makes use of the additional API like Virtual DOM, TypeScript, JSX, and async which are best suited for PWA.
4) ion-Backdrop
These are basically the full-screen components which overlay other components. They are placed on top of other contents so that it can dismiss the other component.
5) ion-Picker
It is used to display a row of buttons and columns on the top of applications content and also at the bottom most part of the viewport.
6) ion-Ripple Effect
This effect adds basically adds Material design ripple interaction effect. It is built in order for it to be noninvasive, efficient, and can be used without adding any kind of extra DOM to the elements. It works without having to degrade JavaScript for easier implementation of CSS only.
7) ion-Route
It will pick up a component and will render it browser URL gets matched with URL property.
8) ion-Searchbar
It consists of a text field which is used to search from a big collection. The team of ionic has added 9 bar styles. Out of all, v4 looks the best.
9) Color Changes
The default color has been changed by the team and some new default color is added.
10) ion-select Popover
It is basically a dialogue which appears on the top of the current page and it is basically used for overflow actions which don’t fit properly in the navigation bar.
11) Ionicons 4.0
These are the icons designed specifically for using it in the Android, iOS, web, and desktop apps. Web font and support for SVG are now available and they are distributed as web components with decreased size and revamped icon forms showing the latest material design styles and iOS trends.
12) CSS Variables
These are the highlighting features of the ionic framework. These will modify the entire look of the app by just making the teeny weeny changes in some variables without even using the build tools.
13) Lazy Loading
It is basically a design pattern in the ionic framework which is used to distinguish initialization of the components until it is required. This will help to improve the performance of the app and decrease the load time of the app by dividing it into various bundles and loading the app when asked for.
14) Ionic Native 5
This brings your app development project to the entire framework of agnostic status. Here the components will work in any of the famous frameworks. Ionic native 5 will need Angular 5 for choosing providers or injectables.
With so many features added, a few deprecated features were removed as well. I frequently found myself on stackoverflow, reading about the workarounds for the features that were no longer available. Moving to the CSS part was a bit annoying since we were trying to use the same custom.css file from the previous app to get things done and as a result, we had to struggle to get things right until we decided to dump the thing entirely.
It’s been about a month now. I am almost done with the implementation, UI is on the verge of completion. Its been an interesting journey so far and will be waiting to see what lies ahead!
Until next time!