Everything you need to know to get started with Ionic 5

Every programmer strives to create marvelous apps, but we all know, building satisfactory apps is not everyone ‘s cup of tea.

We all want to build apps rapidly and also quickly. Not just fast, but we want to create high-quality apps.

Ionic framework is one such tool that lets us make elegant high-quality apps with ease.

Ionic framework is an open-source UI toolkit for building desktop and mobile applications.

Various programming languages like HTML, CSS, JavaScript are utilized to create the apps.

The main focus of this open-source UI toolkit is on the frontend user experience like controls, gestures, interactions, animations.

The ionic framework can be integrated with other frameworks like Angular, React, and many libraries.

Apps build on the ionic framework are versatile and could be run on a variety of operating systems like ios or android.

Ionic framework is beneficial in creating elegant apps using its pre-designed components, themes, typographies, and other elements.

Ionic framework could also be used as a standalone Web Component library, or you could integrate it with Angular, react, and others.

Ionic framework is simple to use, so even beginners find it interesting to use. The good news is after the V4; Ionic framework is now available in version 5.

Version 4 brought several breakthroughs to the Ionic framework project by making it capable of integrating with several javascript frameworks like react, vue, and, of course, Angular. It boosted Ionic’s performance, compatibility, and overall extensibility.

Version 5 of the Ionic framework is even cooler. I can’t wait much to tell you about it. Ionic framework five or magnesium as people call it is out and rolling.

In this article, we will look at what Ionic framework 5 has to offer and its superiorities.

Before we begin glancing at features of version 5, let me tell you that upgrading to Ionic framework 5 from version 4 is not hard at all. So without any further ado, let’s dive into the main content.

Table of Contents

• Update Ionic 4 App to Latest Ionic 5
• iOS 13 Design Updates
• Segment – What’s New?
• Collapsible Header
• Large Collapsible Title
• Small Title
• Swipe to Close Modal
• New Overlay Menu Design
• Refresher – The Pull Down Effect
• Add Bottom Border to List Header
• Animations in Ionic 5
• Brand New Ionicons
• Update in Ionic colors
• Redesigned Starters
• Easier Customizations
• Angular Ivy Support
• Major Updates Causing Breaking Changes
• Final Verdict on Ionic 5

How to Update Ionic 4 App to Latest Ionic 5 Version?

First, you can update to Ionic version 4 (4.11.10) to see deprecation warnings related to your app in the developer console. Once you are on version 4, run the below-given command to update to latest Ionic version 5, and it’s done.

# For an Angular app

npm install @ionic/angular@latest --save

# For a React app

npm install @ionic/react@latest --save

npm install @ionic/react-router@latest --save

npm install ionicons@latest --save

# For a Stencil / Vanilla JavaScript app

npm install @ionic/core@latest --save

iOS 13 Design Updates

The latest version of the Ionic framework has a large section of the updated UI component compatible with IOS 13. The update was carried out as a result of apple updating its IOS.

The 5th version of the Ionic framework includes changed components to be compatible with IOS 13.

Segment – What’s New?

The use of Border and filled background to differentiate between checked and unchecked boxes are no longer in use.

With the iOS 13 updates, now only an indicator is enough to distinguish between checked and unchecked buttons and slide between them.

One more thing to note is, now a gesture can drag the indicator. The segment design still offers the basic functionalities and themes, and only a few things have been affected.

Collapsible Header

Some properties to get a collapsible header and buttons are now available to use.

Using the new features added in the framework, you could create small titles, shrinking broad claims, and collapsible buttons.

All this was done to ensure the framework matches the later IOS updates.

Large Collapsible Title

Another sort of update added to the framework is now the sizeable sized title changes into the standard filled title when the content scrolls below a certain fixed point.

The way to do so is to add two headers, one standard-sized above the content and one large-sized inside the content. Other elements, like the search bar in the large header, can also collapse.

Although you can avoid using this feature in case you don’t need it.

Ionic 5 Small Title

A small title is added inside a toolbar above another toolbar, including a standard size title.

Many application on the IOS platforms consumes this feature, and thus it is now available in Ionic framework.

Ionic 5 Swipe to Close Modal

You can now add a modal that remains inset with the page behind it propelled back. A gesture could be used to control swipe to close modal.

Unlike earlier, now the model will not cover the entire screen, and the user will not need to tap a button to close it.

New Overlay Menu Design in Ionic 5

This feature would enable us to reveal a “reveal” type menu that would overlay the screen without pushing the main content over. An updated animation is now also available to use with the menu.

You can avoid the use of this feature if you wish to.

Refresher – The Pull Down Effect

If you are an iOS user, you would have seen that the refresher icon in iOS native application now appears above the header with a significant title.

This update brings the same feature to Ionic, and now you can use a redesigned refresher. The spinner tick marks will be displayed and then rotate once all the content is pulled down.

Add Bottom Border to List Header

You can now add a bottom border to the list header. Earlier, it was not possible. Now the header title design is bolder and more considerable. All you need to add a bottom border is to use the lines property on the list header.

The Ionic framework official website suggests wrapping all text content of the list header inside an ion-label. It is required to support the changes in the List header.

Animations in Ionic 5

A significant feature that Ionic 5 offers is open-source animations utility called Ionic animations.

This feature would enable us to create animations easily on any framework. These animations will be highly performant.

Brand New Ionicons

Yet another new gift for Ionic developers, a brand new icon library. The icon library is open source and free to use; Ionicons is the name given to the icon library.

Some icons are no longer available, others have been renamed, and a lot of images have been added.

Now icons are available in variations like an outline, fill (default), and sharp and icons now don’t swap to two different icons in different modes. That is, now you have one bundle of icons for both ways.

Although you could still use icons based on the model, for that, you would need to use iOS and MD properties. An icon font is no longer available, but SVG sprite is still in use.

Update in Ionic colors

One of the exciting updates is the change in colors. A new set of new default colors are now available. The colors will get updated in your app automatically.

You would need to update the theme/variables.scss file if you use React or Angular starter. This file defines the color system, and updating it manually will update the default colors.

Redesigned Starters

A new starter is added in this version 5 update. Moreover, the existing starters are now updated.

Although this update in starters was not the need of the hour but still, the company updated it to please its user base.

Easier Customizations

Earlier, it was pretty hard to update and customize components, but now, its pretty simple to style components.

The company has resolved the issues causing the complexity in styling components.

More CSS variable is now available, and some scoped elements are converted to Shadow DOM so that customization could be easy.

Earlier versions used SAAS to style and theme the app. The downside of using SAAS variables is to have different themes in the same app; multiple CSS files with different SAAS variables are to be generated.

This caused longer build times. You can now update CSS variables during runtime. User overrides were complicated with scoped components.

Shadow parts will enable users to target specific elements inside of the components to override their styles directly without breaking the styling of the elements.

Now you don’t need to include !important in CSS or use the complex selector.

Shadow DOM is valuable in encapsulate styles and preventing them from bleeding into other components.

Using the CSS variable within the element is also a breeze with shadow DOM. Out of many, the below-given Components are converted to Shadow DOM in version 5 update.

• Card
• Segment
• Split Pane
• Back Button

Angular Ivy Support

The new update also brought many benefits for Angular IVY developers. Now, full support is available for Angular Ivy renderer. Angular IVY, as you probably know, is beneficial for improving load performance.

Major updates causing breaking changes

Not much of the breaking changes have been made with this Ionic version 5 update.

The fourth release brought the Ionic Framework with web components. So unlike earlier, now users will not need to face more breaking changes to update the framework.

Final Verdict on Ionic 5

The new update has brought a lot of changes in IOS designs and Ionic components. We hope these changes will improve your build time and productivity on the ionic platform.

The good thing is you don’t need to worry much about handling the updates as the process is simple.

Just make sure to have a look at breaking changes document so that you could make changes to your app. I hope you liked the article, thanks for reading.

Article Reference – ionicframework.com

#ionic #angular #mobile-apps