What’s new in Ionic 5 —Free example app
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.
For this post we created an Ionic 5 free demo app. It’s a CRUD app with some of the new Ionic 5 features such as swipeable modals, collapsible headers, segments, animations, as well as, lists, reactive forms, and navigation examples. Download it for free in IonicThemes.
What’s new in Ionic 5?
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 9?
Angular 9 and Ivy are supported in Ionic 5, however, they are optional. In fact, if you create a new Ionic app right now using the CLI, it will use Angular 8. If you want to upgrade to Angular 9 make sure to follow this guide.
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 in IonicThemes website.
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 5 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!
How to migrate from Ionic 4 to Ionic 5?
As usual, we get our hands on 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.
Final thoughts on Ionic Framework 5
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.
Need help with Ionic 5? Leave me a comment.
Originally published at https://ionicthemes.com.
