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.

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.

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.