Around this time last year, we were writing about the new Ionic Framework version 4. It was a great deal compared to its predecessor, Ionic 3.
Luckily, the team at Ionic is very committed to keep pursuing their goal of making app development easier and recently announced the latest and much awaited Ionic 5 release.
It's clear to me, as an insider, that Ionic is one of the top frameworks regarding the peace of innovation they bring to the game on each iteration (now supporting both Angular, React, and Vue!). They are fearless and confident in the direction they envision for the future of mobile and web development.
In this post we want to explain how to take advantage of the new benefits from Ionic 5. We will describe the main changes and show you how to migrate your applications from Ionic 4 to Ionic 5.
At IonicThemes we are great supporters of learning by example that's why all of our Ionic tutorials include a free and complete ionic demo app. We strive to create the best ionic tutorials so we go the extra mile and create a specific ionic application to show you how to use the concepts from the tutorial in a ready mobile app.
For this post we created an Ionic 5 CRUD Contacts app that you can download for free to learn how to start using Ionic 5. This demo app includes some of the new Ionic 5 features such as swipeable modals, collapsible headers, segments, animations, as well as, lists, reactive forms, and navigation examples.
You can download for free the code of this ionic 5 starter by clicking in the GET THE CODE button above.
The highlights of this new release are mainly centered around design and UI/UX, featuring a brand new API to create outstanding animations, new and improved Ionicons icon library, components featuring iOS 13 design spec and also some useful customization improvements regarding component styling.
Animations API
The new Ionic Animations API, presents a shift from Javascript-driven animation libraries. This legacy approach followed by many well known animation libraries is problematic in many ways. Mostly because the browser is responsible for both rendering your animation and executing your animation event loop code at every frame in the same thread as the rest of your app's code. This traduces on performance loss as the browser is forced to waste CPU time by executing your code on every frame.
Harnessing the Web Animations API, the new Ionic Animations API can offload to the browser all of the work required to run your animations. This way, the browser will be able to schedule and make optimizations so your animations will run smoothly. This new, open source animation utility is not only framework agnostic (yes, that means you can use it in Angular, React, Vue or just vanilla Javascript), but it also shines in the benchmarks performed by the Ionic team.
To be honest, this looked so promising that I had to give it a try. I included a custom animation to the Ionic 5 starter included in this post to showcase the new feature. The results are amazing, I would highly recommend giving the Ionic Animation utility a try.
We created a very simple animation when pressing a heart icon that can be useful when giving a fav or a like to something.
Improved components and UI/UX
Besides reworking many of the components (Segment, List Header, among many more) to match the latest iOS 13 design spec, the new release includes changes that make customizing components easier.
Since Web Components and Shadow DOM were introduced in Ionic 4, customizing components has been one of the most arduous things to achieve. In part because of the encapsulation provided by Shadow DOM and part because of the lack of CSS custom variables available to tweak Shadow components.
In addition, Ionic 5 also shipped a new and vibrant color palette style guide including a set of colors specially tailored for dark mode support.
Ionicons 5
One of the highlights of this new release is the new version of Ionicons, the amazing web component icons library. As well as its predecessor, Ionicons 5 is distributed as a set of SVG icons instead of a font icon, for much better performance and less complexity.
With over 1200 icons, Ionicons 5 brings a massive number of new icons. Additionally, each icon now comes in three distinct weight variants outline, fill, and sharp. With this new approach, the set of icons position itself as a system inspired by the best of both (Material Design and iOS) platforms.
I have to say, though, that if you are migrating from Ionicons 4, there are some minor breaking changes.
Compatibility with other Frameworks
As you may know, apart from the original Angular official support (@ionic/angular), Ionic released an official react integration (@ionic/react) and they are working on a Vue integration as well (@ionic/vue, still in beta. They are waiting till Vue 3 stabilizes).
This multi-framework approach is possible thanks to the web components core implementation of the framework (@ionic/core). This means you can target almost any platform (desktop, mobile, browser, native) using the same toolset.
Also, I want to mention Ionic Capacitor, a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web. Lately, we have been using it on every Ionic project and we are very happy with it. If you are new to the Ionic ecosystem learn more about the main differences between Capacitor and Cordova. It's a really great contribution from the Ionic Team.
Performance
For all of you Angular developers out there, Ionic 5 brings great news regarding performance and optimizations to your Ionic Angular apps. The new Angular renderer (Ivy) enables apps to only require pieces of the renderer that they actually need, instead of the whole thing. This translates into smaller output files and consequently better load performance.
Angular 10+?
Angular 10 (and 11) and Ivy are supported in Ionic 5 but, they are optional.
Developer Experience
Starter templates are a great way to kickstart your project. The bare bones, basic starters that come with Ionic have been redesigned to match the new Ionic 5 UI.
The default starters are very limited in the functionality they showcase, that's why we built a more in-depth starter for this post.
You can download the free code of this Ionic 5 starter app by clicking in the GET THE CODE button from above.
If you are more serious about your Ionic endeavor, or if you want to start creating your Ionic Framework app but don't know how to start, I suggest you try our most advanced ionic starter template: Ionic 6 Full Starter App.
Use it to jump start your Ionic app development and save hundreds of hours of design and development. With more than 100 carefully designed views and components, it will help you grasp best practices and the new concepts of Ionic 5 development.
Try it both as a native app or as a full PWA on your mobile browser!
As usual, we get our hands dirty before writing any review or tutorial. In our case we choose to migrate our most complete starter template before writing this review. Considering Ionic Full Starter App a mid size project that touches almost every corner of the Ionic framework, its components and features, we can confidently say that migrating from Ionic 4 to Ionic 5 is a breeze.
I'm not going to lie to you, there are some breaking changes, but the Ionic Team did a great job documenting everything with lots of details and examples. In the following section I'm going to mention these breaking changes and point you in the right direction to resolve them.
Ionic 5 migration guide
Step 1 - Fix any deprecations from Ionic 4
If you have an Ionic 4 app, it is recommended that before updating it to Ionic 5, you update it to the latest Ionic 4 release (4.11.10) to see any deprecation warnings specific to your app in the developer console. After fixing these warnings, you will be ready to move to Ionic 5.
To do this run the following command in your Ionic 4 app:
# for an angular app npm i @ionic/angular@4.11.10 --save
Then run ionic serve in a terminal. Open the browser's dev tools, then while you navigate around your app, yellow deprecation warnings will appear in the console.
When doing this in our Ionic starter we saw the following warnings just on the first page:
As you can see from my screenshot, the error message also gives you the solution. However, for a more detailed explanation I suggest you follow the Ionic 5 Breaking Changes guide. So, for our particular warnings we should check the Split Pane and Ion Menu changes. Not a big deal, right?
As I kept browsing my app I came across another warning message and some visual changes. The warning message from the following screenshot relates to the CSS Utilities and the fix is very straightforward, also suggested in the error message. Now, if you look at the Search Bar component from the following screenshot you should notice there are some paddings missing here (comparing it with the current iOS Ionic 5 version).
So, on this step of the migration you should fix all deprecations and visual differences that you may find in your app.
Step 2 - Upgrade your project to Ionic 5
To upgrade your Ionic 4 app to Ionic 5, run the following commands:
# for an angular app npm i @ionic/angular@latest --save # for a react app npm i @ionic/react@latest --save npm i @ionic/react-router@latest --save npm i ionicons@latest --save # for a stencil / vanilla JS app npm i @ionic/core@latest --save
Now head on over to the breaking changes document to see if there were any other changes that need to be made in your app.
When migrating our Ionic Starter Template we found some breaking changes regarding: List Header, CSS utilities, Segment, Angular Events, Mode, Ionicons, apart from the aforementioned changes in Menu and Split Pane components.
Step 3 - Fix Ionicons
Ionic 5 ships with the latest version of Ionicons, a free and open source icon library. In this new version, there are new icons, renamed icons, and deleted icons. So, if your app uses Ionicons, there may be a chance you need to do some fixing here.
I hope this article helped you get to know the highlights of the new Ionic 5 release, and above all to calm fears about the migration process. As mentioned above, migrating from Ionic 4 to Ionic 5 does not mean rewriting your application, and can be easily achieved with minor effort.
If you want to learn more about Ionic Framework, at IonicThemes we have lots of free ionic 5 tutorials with practical examples so you can learn how to create the best mobile apps using Ionic Framework.
Remember that if you need help starting your Ionic 5 application we have built a super complete starter app that will help you in all the steps of developing an Ionic and Angular application. You can try the demo to see all the beautiful pages and components we built using Ionic Framework 5.
Liked this Ionic Tutorial?
Leave your comments below.