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.
Instead of this
And for going back to a page, say Home Page
Instead of this
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.