The Ionic framework helps develop fast performing cross-platform mobile apps, progressive web apps, and web tech, all with one shared codebase. One of the framework’s main elements is its ready-made, reusable UI components, which can make developing an app easier even with limited programming experience.
Version 5 (Magnesium) makes the developing experience even more intuitive. This major release includes a large number of updates, design changes, as well as a new API that allows devs to create their own custom animations.
IONIC 5 IS HERE!
The biggest design update ever in the history of Ionic:
✓ New iOS & Android component designs
✓ New React & Angular starters
✓ New Ionicons icon pack
✓ New Animations APICheck the Blog for the full story and get building!
https://t.co/rAvmCeVqxI
— ionic (@Ionicframework) February 11, 2020
Design overhaul
With the new design changes in iOS 13, iOS native Ionic 5 also receives a makeover to match.
Some of these visual updates include ion-segment, collapsible headers and buttons, swipeToClose , menu overlay with updated animation, pull-to-refresh functionality, and a larger, bolder list header.
Of course, all of these changes are available in both light and dark mode.
SEE ALSO: Python web framework JustPy – interactive websites without JavaScript
Custom animations
Developers can move beyond the limitations of JavaScript-driven animations and create their own reusable Ionic Animations.
According to benchmark tests, on both mobile devices and desktop machines Ionic Animations maintain higher frames per second (a smooth 60 FPS) with low CPU usage. It performed better than other animation libraries such as Anime.js, GSAP, and Velocity.
From the developer blog:
Ionic Animations uses the Web Animations API to build and run all of your animations. By doing this, we can offload all of the work required to run your animations to the browser. As a result, the browser is able to schedule and make any optimizations to your animations that it needs, allowing your animations to run as smoothly as possible.
Open source icons
Open source Ionicons sample. Source.
To help kickstart your development, v5 includes some new open source icons, free to use in your web, iOS, Android, and desktop apps under the MIT license. Each icon includes three variants: outline, fill, and sharp.
All icons are available as DVG and web fonts. View the changelog for all the icon updates and a few breaking changes.
Ionic + Angular
The release of Angular 9 introduced Ivy, the newest renderer, as the default. Devs using Ionic and Angular will now also have full support for Ivy and everything that it brings to the table.
Apps made with Ionic Angular will have a smaller final output with better, faster-loading performance.
SEE ALSO: Angular 9 is here – Ivy, Lazy Loading and more
Upgrading to v5
These are just some of the highlights; so refer to the full release notes for Ionic 5.0.
Before you update, view the full list of breaking changes introduced in Ionic 5. The migration guide will walk you through the switch and how to upgrade an app from 4.x to 5.x or from 3.x to 5.x with just a few updates and packages.
With the newest release, some users are reporting various bugs, so be sure to have a look at the open issues on GitHub and see if you are experiencing the same problems.
The post Ionic 5: Develop cross-platform apps with new, custom animations appeared first on JAXenter.
Source : JAXenter
