Ionic Framework 5 (Magnesium) includes revamped Ionicons, new starter designs, a new API for creating your own custom animations, iOS 13 design updates, improvements to component customization and much more.
“As Apple and Google introduce new UX standards and design patterns in the latest versions of iOS and Android, app developers need to make sure their mobile experiences evolve with them. Mobile experiences that feel outdated will see lower rates of adoption and engagement,” said Max Lynch, CEO & co-founder of Ionic.
All the above-mentioned changes are made in the core of Ionic Framework – which also applies to React, Angular and Vue (beta) integrations.
Ionic animations
Ionic 5 introduces a brand new open-source animations utility – Ionic Animations, which provides the tools developers need to build highly efficient animations regardless of the framework they are using.
“Animations have become a staple of any modern, mobile user experience. But up until now, there have been very few options for web developers to build their own custom animations without risking a huge performance hit. With the release of Ionic Animations, web developers now have an easy way to add their own animations, while still delivering stellar performance – whether or not they use Ionic Framework,” explained Lynch.
According to Lynch, their new animations utility delivers 40% better animation performance and 98% greater CPU efficiency on a user’s device.
Ionic colors
Ionic 5 brings all new colors by default. Additionally, the team behind Ionic provided a set of recommended colors to use with dark mode. For a detailed guide on how to support dark mode based on user preference, go to Dark Mode documentation.
Ionicons
Ionic 5 comes with the latest version of a free and open source library of more than 1,100 mobile-ready icons artfully crafted to look and feel at home in the latest iOS and Android devices.
The first changes you will notice: one set of icons for both modes, icons will no longer switch between two different icons based on the mode, icons come in 3 new variants – fill (default), sharp and outline (available for the light and dark modes of the devices). The Ionicons are now SVG icons and no longer font icons.
Smooth upgrade
Simply put, for those on v4 this upgrade should be easy. Therefore, it is recommended to update to the latest Ionic 4 release (4.11.10) to see any deprecation warnings specific to your app in the developer console. After fixing any warnings, you should just 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
iOS design
Anyone who uses Ionic to create applications for iOS will have to adapt to many adjustments. Apple had revised many components as part of iOS13. The Ionic team used the new release to adapt the corresponding Ionic components to the new designs. These include headers, segments, large and small titles and the menu overlay type.
Angular Ivy
For Ionic Angular developers, Ionic 5 will bring full support for Ivy – Angular’s new renderer.
Customization
In order to alleviate customization, Ionic 5 brings more CSS variables, conversion of some scoped components to Shadow DOM, and added support for Shadow Parts. These components were converted to Shadow DOM – Split Pane, Card, Segment, and Back Button.
About Ionic
Launched seven years ago by Drifty.co, Ionic is a standard framework for hybrid mobile app development. It leverages web technologies such as HTML, CSS and JavaScript and platforms such as PhoneGap/Cordova to deliver the native-like experience.
Currently, there are more than 5 million apps powered by Ionic. Considering this huge number, it is no wonder that it has such a strong community of developers
Ionic 5 templates
With every new version of Ionic, we can witness a proliferation of Ionic 5 app templates. App templates built by CreativeForm are professionally designed, feature-rich and well supported. Check out our portfolio on CodeCanyon to see the full list of Ionic 5 templates we have rolled out so far.
The post Ionic 5: How to update and new features appeared first on CSForm.