Ionic framework v6 beta

Earlier this week I had the privilege of giving the Ionic Framework Update at Ioniconf 2021 where we announced the Ionic Framework v6 beta. Ionic Framework has come far from its roots as an AngularJS-only UI library to a truly cross-platform framework for building Web Native applications. As we look to the future of Ionic Framework, let’s talk about some of the improvements coming in Framework v6 and how you can get access to these improvements today.

Faster, More Reliable Release Cadence

It has been over a year since Framework v5 launched in February 2020. After the release, we thought about how we can get improvements out to the community faster and on a more reliable basis. One pain point we heard is that it takes too long for iOS and Android design changes to make it into Framework releases. As a result, we are adjusting our major release schedule to better coincide with these platform software releases. This meant making the v5 lifecycle a bit longer than previous major releases. Moving forward you can expect to see yearly major releases with these design changes.

Easy Upgrade

With Framework v5, we worked to make the upgrade experience as easy as possible, and we want that to remain true for Framework v6. Framework v6 has about half as many breaking changes as Framework v5, and many of these changes do not require any action on your end.

In short, upgrading to Framework v6 should be a breeze!

Components

Framework v6 brings new components that make it easier to build mobile and desktop experiences. There are more component updates on the way, but the following are some of the components you can start using today:

Accordion


Our first new component is ion-accordion which makes it easy to organize large amounts of content in an easy-to-understand way. Packed with functionality such as smooth animations, keyboard support, and reduced motion accessibility, this accordion is incredibly flexible and can be used on both mobile and desktop applications.

Breadcrumbs

Next up is ion-breadcrumbs which provides important context to users in terms of where they are in your application and how they got there. Fully customizable and collapsable means that this component can tackle even the most complex of application setups.

Datetime

Last but certainly not least is our completely revamped ion-datetime component. DateTime pickers are incredibly complex and need to account for many different use cases and configurations. We have revamped DateTime to use the latest calendar picker styles on iOS and Android. With a modern design, localization support, and keyboard and screen reader integration, the new DateTime component is a huge step forward for Ionic Framework.

Alert

An Alert is a dialog that hat gives clients data or gathers data from the client utilizing inputs. An alarm shows up on top of the application’s content and should be physically excused by the client before they can continue interaction with the application. It can alternatively have a header, subHeader, and message.

Button

Ion buttons offer an interactive component, which can be utilized in structures, or any place that needs basic, button functionality. They may show text, symbols, or both. The ionic button can be styled with a few attributes to look a particular way. 

Card

Cards are a standard piece of ionic UI components that fills in as a section with more detailed information A card can be a single part, yet is regularly comprised of some header, title, caption, and content.  ion-card  is separated into a few sub-segments to mirror the   ion-card-header, ion-card-subtitle, ion-card-title, and ion-card-content. 

Performance and Tooling 

Ionic Framework is built with lightning-fast Web Components and takes advantage of modern Web APIs, meaning your apps will be just as fast as native applications. We leverage the best parts of Stencil to bring performance and bundling improvements to your Ionic Framework apps.

Custom Elements

In Framework v6 we will be shipping a new build of the Framework that we call the Custom Elements build. This Custom Elements build does not rely on Stencil‘s lazy loading and helps bundlers include only the components used in your application. This will help to reduce the overall size of your application as well as the size of your application’s first chunk which means your apps are going to load even faster.

In our Ionic Vue starter applications we saw bundle size reductions of up to 70%. Whether you are deploying to the app stores with Capacitor or to the web as a PWA, your apps will be even smaller. While the exact savings will vary from app to app, we are confident that most apps will see bundle size reductions with this change.

The Custom Elements build will be added to Ionic Vue first and then rolled out to Ionic React and Ionic Angular developers.

Vite, Rollup, and ESBuild

To sweeten the deal, Ionic Framework v6 will be usable with toolings like Vite, Rollup, and ESBuild, giving you significantly more choices for building applications. This is something that designers have been getting some information about for some time, and we are eager to look at what it brings.

Design

The design has been crucial to building Ionic Framework, and we have updated Framework v6 with the latest iOS and Android designs. As I mentioned previously, we have also re-aligned our major version release schedule to get you these design changes even faster in the future.

iOS

Some of the notable changes to the iOS mode include a new refresher style and updated toolbar and modal styles for dark mode. I am also happy to announce that Framework v6 will be iOS 15 ready when it ships.

Material Design

One big design change to the Material Design mode is with our revamped input styles to support new filled and outline styles. We have also added error and helper text slots in addition to a character counter. Big shout out to the newest member of the Framework team Will Martin who did an amazing job getting up to speed and working on these updates.

The Framework team is also keeping an eye on Material You. When more guidance is released we will determine the impact it has on the Framework.

Deprecations 

There are a couple of deprecations in Framework v6. There will be a 1 year migration period, with the following features planned to be removed in Framework v7.

Virtual Scroll

In Framework v6, the ion-virtual-scroll component has been deprecated in favor of using framework-specific solutions. Given the complex nature of virtual scrolling and that there are already many great 3rd party solutions, we felt it was better to use those solutions instead. Additionally, ion-virtual-scroll was only ever available for Ionic Angular users, which limited the usefulness of the component in Ionic React and Ionic Vue.

In Framework v6 we will be releasing virtual scroll guides for Angular, React, and Vue users.

Slides

The ion-slides component has been in Ionic Framework for several major releases and is powered by a 3rd-party library called Swiper.js. When Ionic Framework v4 was first released, Swiper.js did not have framework-specific integrations of its library. ion-slides was created to bridge the gap between the core Swiper.js library and JavaScript frameworks. Since then, the Swiper team has released framework-specific integrations of Swiper for Angular, React, Vue, and more!

Over the past year, it became clear to the Ionic Team that having our ion-slides component is holding developers back from experiencing the full power of Swiper.js. As a result, we decided to deprecate ion-slides in Framework v6 and recommend developers use Swiper.js directly.

The good news is that since you are still using Swiper.js, there should be no significant behavior changes. See https://beta.ionicframework.com/docs/api/slides for a migration guide. ion-slides will be removed in Framework v7, and developers do not need to migrate off this component to upgrade to Framework v6.

Breaking Changes:

  • The pickerOptions and pickerFormat properties have been eliminated ever since ion-datetime has started using a calendar style.
  • The monthNames, dayNames, monthShortNames, and dayShortNames properties have been eliminated.
  • While using a collapsible large title, the last toolbar in the header with collapse=”condense” doesn’t have a border now. 
  • The IonRouter type for useIonRouter is now called UseIonRouterResult, 
  • The IonKeyboardRef type for useKeyboard is now called UseKeyboardResult.
  • The IonRouter type for useIonRouter is now called UseIonRouterResult.
  • The IonKeyboardRef type for useKeyboard is now called UseKeyboardResult.
  • The –white-space CSS variable now is set to default to normal instead of pre-wrap.
  • The showClearButton property now is set to default to ‘always’ for improved usability with screen readers.

Conclusion

So there you have it, Ionic framework v6 in all its beta details. It is imperative that some of the further changes and developments are on their way as the framework transitions from beta to full release, however, you can install framework 6 and enjoy the new components and begin exploring how we can use v6 to build optimized apps. 

You can also catch on all the ionic version 6 latest news on the Ionicconf 2021. The community has plans to release several additional beta versions along with some exciting features and bug fixes. We might have the full release of Framework6 by later this year so be on the lookout for that.

Sources by angularminds and ionicframework

Leave a Comment