Manage My Shaadi App – Using Ionic v4

We recently developed a wedding planning platform for one of our clients. For this app, our client wanted to use Ionic and since they had plans of upgrading it to Ionic 4 eventually, we decided on using it directly. When we used Ionic 4 for the development of the app, it was still in beta, and there were several issues with it but we still decided on using it as there were several advantages of using Ionic 4 over its predecessors. Here are some of the good things about Ionic 4 –

• Angular CLI – Ionic 4 uses Angular CLI, which means that we can stay up-to-date with the awesome progress that Angular continues to make.
• Angular Routing – Ionic 4 moved away from it’s Ionic routing to an Angular based routing to give better support to PWA integration.
• Web Component – The idea behind web component is to let the browser do all the heavy lifting and to write less code, which brings key performance improvements to load and startup times.
• Shadow DOM – Shadow DOM is basically a DOM within a DOM. It is its own isolated DOM tree with its own element and style, which helps in creating custom elements with its own elements and style which do not form part of the DOM’s global scope.
• CSS Variables – CSS Variables is how theming works in Ionic 4. Now it’s possible to change the feel of the overall app, by changing a few variables, all without build tools.

As Ionic 4 was still in its beta phase and as expected we had to deal with a number of bugs in the framework and the application had to be updated as per latest releases multiple times.The basic idea of the app is focused around giving a host, an easy way to create wedding, manage guest lists, wedding celebrations, allocating facilities like transports & accommodations for guests. While on the guest side, guest can register for a particular wedding with the invited phone number, can update their travel plans, see celebration events details and get information on their allocated accommodations and transportations. There’s also a Facebook-like feed, for both host and guest to share any moments they captured during the wedding – all in a rich user interface which gives a festive feeling. This has largely been achieved through the UI/UX designs developed for this application.While developing the app, the major issues that we faced were mainly related to navigation and supporting hardware back button. One other major issue that was still there (as of development of this app Ionic 4 was on rc0.0.2) was the date time picker. We had to update beta version as per latest releases multiple times to fix some of the smaller bugs, which did break some of the element’s HTML and CSS, which we had to rewrite once again as they added/removed several classes.One of the major issues that our client was facing while they were testing out the app, was the app freezing constant. At first we had no clue as to why it was happening, but upon inspecting the app via Chrome debug, we figured out that every page we were visiting, Ionic were adding it onto the DOM and were manipulating the pages using its z-index and transition property.Combined with that and Ionic being relatively laggy in comparison to a native app, we came across a scenario where the user would hit the hardware back button before the next page (let’s say Page A) could fully load onto the screen, the user could see the page (let’s say Page B) the app navigated back to, but couldn’t interact with the app whatsoever. Upon inspecting the app we noticed that Page A had the highest z-index meaning it was on the top, hence we arrived at a supposed state of app “freeze”.The solution to this problem was to use

this.navController.navigateRoot(['/dashboard]);

Instead of this

this.router.navigate(['/dashboard]);

And for going back to a page, say Home Page

this.navController.goBack(true);

Instead of this

this.router.navigate(['/home']);

What it did was, that the pages we were navigating to were not getting added onto the DOM, instead it was just replacing the page we previously navigated from,with the new one onto the DOM, hence we could avoid the above scenario where the app would just “freeze”.The other major issue we had faced was supporting the hardware back button. Since Ionic 4 shifted from Ionic routing to Angular routing, the whole concept of previous Ionic’s push and pop was gone. Instead it now used browser history to keep track of the pages visited. Initially we were using “router.navigate” for both forward and backward navigation. Using router.navigate on backward navigation meant that it would get added to the browser’s history, which in-turn meant that the user had to visit all the pages he/she visited in order to arrive to a particular page. This wasn’t the ideal user-experience we would want. The solution to this problem came when we used “navController.navigateRoot” and “navController.goBack” for forward and backward navigations respectively. Using “navController.goBack” meant that we can go back to the previous page in the browser’s history, instead of adding pages to the browser’s history while going backward.These were the two major issues that we faced while developing this app using Ionic 4 beta. It was a learning experience for us. We are now waiting for more features and the pending bugs to be fixed when the final version is released.