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 intendedto enhanceuser-engagement and boost adoption rates. The breaking new enhancements in Ionic5, will aid Ionic app Developersto generate a native user experience on contemporary smartphones. My write-up is an enlightening journey into the world of Ionic5.
What are the novel offerings of Ionic5?
- Default colors designed to alter the color of various components are added. The Ionic team has also recommended colors to support the dark mode.
- The starters of Ionic4 have been enhanced and some new starters have been added for tabs, menus, and lists.
- The new Ionicons5,distributed in the form of a bunch of SVG icons in place of a front icon, reduces complexity and improve performance.
- To simplify component customization by Ionic app developers 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.
- Ionic Animations API improves 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.
- Ionic5 is compatible with other frameworks like React Native and Vue because of the web components @ionic/core framework.
- The new feature, Angular renderer (Ivy), works wonders to boost the performance of the Ionic Angular applications.
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.