Ionic 5, released shortly after Ionic 4, introduces enhanced features aimed at improving user engagement and native app experiences. Key updates include the new Ionic animations API, expanded color palettes, improved components for iOS 13 compatibility, and better performance through Angular Ivy. The release also emphasizes cross-framework compatibility, supporting React and providing a beta version for Vue.

1. Copyright © Biz4Solutions LLC. All Rights Reserved
Biz4SolutionsLogoanddesignsaretrademarksofBiz4SolutionsLLC.Alltrademarksandlogos
referencedhereinarethepropertiesoftheirrespectiveowners.
The exciting new features of Ionic5!
The release of Ionic5, the newest version, has been a pleasant surprise. Just a year earlier, Ionic4, popularly
called “Ionic for everyone” was launched with some major modifications and add-ons. So, yet another
updated version within a year is undoubtedly a proactive move by the Ionic team to stay tuned with a
constantly evolving technological world. Needless to say, Ionic5 known as “Magnesium” was introduced soon
after Google and Apple devised new design patterns and up-to-the-minute UX standards for Android and iOS.
This strategic step was intended to enhance user-engagement and boost adoption rates. However, Ionic5, is
not as big a jump as Ionic4 and its implementation is pretty easy as well.
The breaking new enhancements in Ionic5, will aid Ionic app Developers to generate a native user experience
on contemporary smartphones. My write-up is an enlightening journey into the world of Ionic5. So, let’s take
a look at the offerings of Ionic V5!
What are the novel offerings of Ionic5?
Ionic Animations API
Ionic Animations API is a revolutionary utility feature that marks a deviation from the erstwhile JavaScript-
managed animation libraries. Earlier, the browser was responsible for rendering the animation as well as
executing the code of the animation event loop at each frame on the same thread. Execution of the code on
each frame resulted in the browser wasting the time of the CPU, thereby hampering performance.
Web Animations API enables the new Ionic Animations API to improve animation performance by offloading
the work to the browser to run the animations. Hence, the browser is empowered to schedule and perform
optimizations for the smooth functioning of the animations. Furthermore, Ionic Animations API is not
framework agnostic and therefore can be also used with other frameworks like Vue, Angular, React, etc apart
from Ionic.

2. Copyright © Biz4Solutions LLC. All Rights Reserved
Biz4SolutionsLogoanddesignsaretrademarksofBiz4SolutionsLLC.Alltrademarksandlogos
referencedhereinarethepropertiesoftheirrespectiveowners.
Enhanced components
Additional Colors: A vivacious color palette comprising of 9 default colors were updated, that were
particularly designed to alter the color of various components. If an application was built without using an
Ionic starter and the colors have not been overridden yet, the new colors will automatically get updated to
your app. But, if React or Angular starters were used to build an app, the developers have to manually update
the colors using the file named theme/variables.scss, where the colors are defined. Apart from these default
colors, the Ionic team has also recommended colors to support the dark mode.
Reworked Starters: The starters of Ionic4 have been enhanced and some new starters have been added for
tabs, menus, and lists to match up with the design changes in Ionic components.
Ionicons5: Ionicons, a library consisting of stunning web component icons have been replaced by Ionicons5,
which is one of the prime attractions of Ionic5. Unlike Ionicons, Ionicons5 is distributed in the form of a bunch
of SVG icons in place of a front icon, to reduce complexity and improve performance. It has more than 1200
icons as numerous icons have been added. Each icon appears in three different weight variants – fill, outline
and, sharp. As such, the bunch of icons functions as a system possessing the best functionalities of iOS as well
as Material Design platforms.
Customization of Components: Ionic4 had introduced shadow DOM and web components. The encapsulation
imparted by Shadow DOM and the absence of CSS variables for tweaking the Shadow components made
customizing components quite a challenging task. Ionic’s V5 came as a sigh of relief for the Ionic app
developers. To simplify component customization, CSS variables have been added and some scoped
components like Card, Back Button, Split Pane, and Segment, have been transformed into Shadow DOM.
Updates to complement Apple’s updated version, iOS 13
A major portion of the updated UI components in Ionic5 was intended to complement the new design
components of Apple’s most recent version, iOS13. Let’s explore!
Header: Ionic5 offers specific components to support the new collapsible headers of iOS 13.
Segment: The segment design of Ionic5 has replaced filled backgrounds and borders with an indicator that
can be dragged to distinguish between the checked and unchecked buttons in the same way as iOS 13 does.
Title: In order to suit the new iOS feature of different sized titles during scrolling of the content, Ionic 5 has
introduced components that allow large titles to shrink to a standard size.
Menu Overlay Type: The main content in iOS 13 doesn’t have to be pushed for revealing the side menu. As
such, Ionic5 ensures that the content has a menu overlay.
Swipe Down to Close Modal: The updated Swipe Down to Close Modal feature of iOS, no longer covers the
entire screen and the users need not tap buttons to close the screen either. So, Ionic5 allows a modal having
a page pushed behind it and also a gesture for dragging down the modal to close it.

3. Copyright © Biz4Solutions LLC. All Rights Reserved
Biz4SolutionsLogoanddesignsaretrademarksofBiz4SolutionsLLC.Alltrademarksandlogos
referencedhereinarethepropertiesoftheirrespectiveowners.
Improved performance
The new feature, Angular renderer (Ivy), works wonders to boost the performance of the Ionic Angular
applications. It empowers the application to accept only those pieces of the renderer that are actually needed
and not the entire stuff. Thereafter, these get translated into smaller sized output files, leading to faster
loading.
Compatible with other frameworks
All this while Ionic4 had the support to Angular framework. With the Ionic5 release, support for the React
Native framework has been implemented and for Vue framework, release is yet in beta version. This
compatibility was achieved because of the web components @ionic/core framework.
Final Words
The breaking changes ushered in by Ionic5, add value to Ionic Mobile App Development and are sure to
boost productivity and speed up your built time.
We, at Biz4Solutions, are highly experienced in rendering Ionic App Development Services to global clients.
Contact us at sales.enquiry@biz4solutions.com.