June 29, 2021
  • Announcements
  • Angular
  • Framework
  • react
  • Vue

Announcing the Ionic Framework v6 Beta

Liam DeBeasi

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.

Accordion demo

See the ion-accordion documentation for usage information.

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.

Big thanks to Brandy Carney for doing an amazing job building this component!

Breadcrumbs demo

See the ion-breadcrumbs documentation for usage information.

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.

Datetime demo

See the ion-datetime documentation for usage information.

And More!

We only showed off a few components coming in Framework v6, but you can look forward to seeing other components such as bottom drawer and a desktop select component soon!

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 — oh my!

As an added bonus, Framework v6 will be usable with tooling such as Vite, Rollup, and ESBuild, giving you even more options for building apps. This is something that developers have been asking us about for a while, so we are excited to roll this support out.

Design 🎨

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.

iOS Toolbar updates
iOS Refresher Updates
iOS Modal Updates

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.

Material demo

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.

See https://beta.ionicframework.com/docs/api/virtual-scroll for a migration guide. ion-virtual-scroll will be removed in Framework v7, and developers do not need to migrate off this component to upgrade to Framework v6.

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.

Want more? 🤠

Be sure to check out the Keynote video from Ioniconf 2021 for even more demos and updates!

What’s next? 👀

Developers can get started with the Framework v6 beta today. See https://github.com/ionic-team/ionic-framework/blob/next/BETA.md for steps to upgrade to the v6 beta. Please file any feedback you have on our GitHub repo. Be sure to indicate that you are using the Framework v6 beta.

We plan on having several additional beta releases with even more features and bug fixes, so be on the lookout for those too! We look forward to releasing Framework v6 later this year.

Thank You! 💙

We want to extend a sincere thanks to the Ionic community. So much of the feedback we have collected over the past few years was instrumental in the planning and development of Framework v6. We have so much more planned for Ionic Framework that we can’t share quite yet, but we hope you will come along with us for the ride!


Liam DeBeasi