Introduction to Ionic 6 Beta
What's up, Simonites, and welcome back to first look at our favorite framework, Ionic version 6. Today, we will dive into the beta version. We've seen some spoilers on Twitter in the past about new components, but today we will actually see both the components and the code to create those components.
We will talk about all the things that we will see in version 6. This means we will see three kind of new components, talk about other components that we will likely see in version 6, all the other updates in the background, how you can get to version 6 and everything just around the favorite framework that we all love and the latest version. So, let's waste no time and dive directly today into Ionic version 6.
Framework Renaming, Release Cadence, and Upgrades
All right, let's talk about the framework version 6 changes. It's actually already interesting that they now just name this framework version 6. So, as I said in the last video where we talked about the whole Ionic ecosystem, they kind of had a little bit of branding problem with all that project. So, I guess it's just called framework in the future. Um, not sure how this will work out, but we will see.
Um, anyway, let's start with some general things about Ionic version 6. Um, they promise more reliable release cadence. Um, we had the last major version of Ionic, Ionic version 5, in February 2020. That is more than a year ago, and of course a lot has changed in in between. Especially iOS and Android versions were updated because basically the framework is now only about the design of the components. So, Ionic will try to mimic or uh stay up-to-date with the latest versions. So, once uh iOS version 15 comes out, which framework 6 will actually be ready for, they will release this one. And I guess when it's time for the next Angular the next Android or iOS version in 2022, is this right? Yeah. They will stick close to that release line so they can update their whole design. Um, so therefore we're going to see one major release of Ionic every year.
The Upgrade Process & Breaking Changes
Um, in terms of the upgrade process, a lot of you I know are sweating and thinking like, "Oh, no, I don't want to go through all of this again." But, from what I've seen so far, it's going to be super super easy.
Um, if you want to give it a try, simply bring up a new Ionic version 5 application, and if you're using Angular, just scroll down here in the upgrade guide, and you will see this is really the only thing you need to do to upgrade. You of course need to be on Angular 11 plus.
Um, but otherwise, even for core uh or if you're using React or if you're using View, the general upgrade is still pretty easy.
Now, when it comes to breaking changes, uh we can check out another document for version 6. If we look at 5, there was actually a lot a lot of renaming happened. Uh, components slightly changed their names, CSS variables changed. Um, really a lot has changed with Ionic version 5. Now, if we go back and check out version 6 instead, uh we will see quite a nice list here, but most of this is really about datetime. We'll talk about datetime in a second. It got completely changed. But otherwise, um we just see header, okay, that's not a big deal. Input, modal, popover, they're not really any big changes that you have to apply.
There are a few small changes here that you can do in terms of the CSS, but otherwise, uh especially for Angular, that's going to be pretty easy. For View, uh yeah, there are some changes in terms of the routing. Um, then what do we got as well? Well, that's actually everything. So, really I expect that the upgrade for your applications from version 5 to 6 will be pretty easy.
New Component: Ion Breadcrumbs
Okay. Now, uh let's check out some new components that we will see with version 6. Uh, I've created a little application so I can demo these right away. Of course, the demo disappeared right now. Thanks for that. Um, there are for now three components that we want to take a look at.
Uh, two are actually completely new and one is basically a new version. So, one of the completely new components right here is the breadcrumb component that you see up here.
Now, I can even click on those dots to trigger a little popover if I have a little long list of breadcrumbs. And setting up those breadcrumbs is really as easy as this. 1 2 3 4, that's what we usually do.
That's the whole code for that component. Um, there are different settings like maximum items, minimum items, um clicking on that collapse icon. But otherwise, it's basically just a list of different breadcrumbs and their href. Of course, if you're using Angular, you might want to use a router link instead, but that shouldn't be a problem. Overall, that component should work pretty well, especially for desktop.
Um, if we have something like this, uh we could easily now change this to, I don't know, let's say five. Would that work? I really I'm not that uh good with the new components yet. Uh, but there is already a documentation about this. Uh, you can use different slots to uh put in your own icons. Let's use this one instead. So, if we go with that one, we will see that we now got our own icons right here.
Uh, we've previously had the maximum number of items. Uh, you could change the um separator in here to be different icons. Really a cool component, I think um especially useful for desktop as we will see a lot of the changes for version 6 will be useful for desktop. Um, but in general, uh cool component, and I think it will have some use cases.
New Component: Ion Accordion
Next, uh one that I'm pretty uh optimistic about is the ion accordion. And of course, I created a little demo for that one as well. So, let's comment out the breadcrumb and comment in this beauty.
Okay. Looks like a lot of code. Let's check out first of all how it looks like on a device. Right now, it looks like this. And you will notice how smooth those transitions are between the different groups in here. I really like this new accordion. We were able to create that with ion list items, ngIf, some animations. Well, you already see it gets a tiny bit complicated and takes time. But, this component is really going to be super easy. I can even somehow I think I were able to Yeah, I can use my keyboard as well if I want to navigate between them. And a component like this can be very helpful for desktop if you have some kind of menu where you got expanding items, collapsible items.
Um, big documentation about that component as well. In terms of the code, it's not too hard. Uh, we got a surrounding ion accordion group, and then we basically got different ion accordions. So, that one is the colors. We got a header element, and then we got inside the content slot these items. So, we could put anything else in here as well. I guess we could also have ion cards in here. That would work just as fine. I could just remove this.
Uh, let's give it a try. I think I have some snippet for a full card. Yeah, let's just do three of those cards. And maybe it's a beta. I hope it still works. Yeah, of course, it still works. So, we could put anything into this uh content slot. And as we then scroll down, you see it's just the same again. An ion accordion for shapes with the information. That's exactly what we got here, shapes. And then numbers, and of course you could use all kinds of icons in there. So, really a super helpful component as well, the accordion.
The Overhauled Datetime Component
Third component, which isn't component that we already know, is the ion datetime. But if you check out the breaking changes, uh where where are my breaking changes? Somewhere here.
Uh, you're going to see that uh ion datetime really changed a lot. You can go through all of this and check it out. Um, some things that were stated here didn't really work well for me. Let's give it a try somewhere here. Uh, open datetime modal. Uh, perhaps that's also only for um yeah, for something else because it's not really working for me.
And I definitely wanted to replicate what they had inside of their uh demo right here. So, something that looked like this. Therefore, I just wrapped the uh datetime component uh inside of a modal.
So, then uh open datetime simply opens my modal, and within that modal I got the new ion datetime using a few of the new new properties. Um, the presentation style is what you can define as well. And with a bit more of CSS that I put in here, I was able to achieve something that looked like That's a great example. I think that was Okay, it looked like this. Uh, I'm still not sure it it's not 100% on my device. It actually looks a lot better. So, on iOS it really feels uh good. I can slide through this. I can change the month here. I can cancel. Um, it definitely is already a lot better than the picker we had before. Um, if you just include an ion datetime like this in your page, uh so let me quickly do this, then it will look kind of horrible. Um, or it's not horrible, but it displays directly this picker view. Can actually be interesting as well in some cases. I don't know how much functionality they have here in terms of events. Let's quickly check this out. It could be really helpful for some people creating a calendar events. I don't change. Yeah, ionChange might be triggered when I click on something here. That could actually work.
But overall, we will definitely have a new video on this one. So the component is out because I'm not yet sure how they achieved this exact view. Also selecting the time here in my device wasn't really working even if I click on the area right here. It wasn't working, but it's a beta version. So there's still a lot that could happen at this point.
Okay, those are the three kind of new components. Accordion, breadcrumb, daytime completely updated. So it will also not look like on desktop anymore.
You're going to be happy if you're creating websites with Ionic about that component. They have said that there will be two more components which I haven't found so far inside the documentation of the code.
One being a draw component. So something that you can pull up from the bottom. I think we I tried to replicate that behavior in some tutorial or Ionic Academy course, but it wasn't wasn't ever really working great. I've seen this in some tweets already from Max. So I'm really looking forward to that bottom draw component where you can slide up something from the bottom which a lot of applications these day do.
Also, they're working on a better desktop select version. If you say check out the current select, the ion select, it's really that's a horrible behavior for desktop. I don't know if they just make it a drop-down. Something that looks like this but more desktop like. I don't know. Looking forward to this. Hopefully or I'm sure as I said it, this will land in Ionic 6 as well.
Okay, that's most of the big changes. Let's quickly cover all the other things. They of course improve performance and tooling using custom elements from stencil. They're focusing a lot on stencil lately. So just like they are focusing on capacitor, they will most likely grow stencil a lot more in the future. You can now also use different bundlers. Actually think I never used anything else besides the standard, but if you're interested in that, that's good news for you as well.
In terms of the design, as I said in the beginning, they want to stick as close as possible to the latest iOS and Android versions. So when it's ready, it will be iOS 15 ready when framework version 6 ships. I also start using just framework now. We should do this. Let's just do this.
And for material design, this little demo with this cool input looked so awesome. I wasn't able to replicate this. I'm not sure where this goes or if it's actually already pushed to the repository. But I think for the final version, we will build something with all these updates. And I think if we can make it look like this, that would be pretty great for Android. That looks really really cool.
Now, bit sad news for everyone, the deprecations. Virtual scroll will be deprecated. There were a lot of questions in the past about using virtual scroll. I think it never really worked very good for anyone. Especially since it only came with an Angular implementation. Virtual scroll didn't work for a lot of people.
So since there are other options to implement virtual scroll for Angular, React, or view in their respective frameworks, Ionic will drop support for virtual scroll.
A component I'm kind of sad about is actually the slides component. I use slides a lot of time in a lot of places to show like slides of images, slides for a tutorial in the beginning. It really does work great with the underlying swiper, but Ionic is right. It's basically just a wrapper for swiper. So you could also just use the the framework specific integration of swiper instead.
It's kind of sad that we don't get this with Ionic then anymore, not with the wrapper, but I think I will cover this in another video how you can use the swiper with just Angular because I'm pretty sure it will be quite easy as well. Also, it will not be removed. It will be removed in framework version 7. But in version 6, it's just deprecated. So you get a bit of more time to update your components. Now we got to end with the sad news. That's kind of it. Let's just recycle that.
There are a lot of cool things, design changes, that we will now get a yearly major update. I'm looking forward to updating all the content and creating everything again. But as we've seen, the breaking changes are really minimal. So I'm looking forward to upgrading everything.
Final Thoughts and Wrap-Up
All right, and that's it for our first look at Ionic version 6 or should I say framework version 6? Because it looks like that's the new name for Ionic framework. They just want to call it framework from now on. Fine with me. We can do this.
Anyway, I really enjoyed the accordion component. I don't know when I will use the breadcrumb component, but it might be nice to have in the future perhaps. And of course, the daytime component will be really really big update once we can use this for iOS, Android with the respective design, and especially for desktop because the current ion daytime is kind of unusable for desktop. As well, I'm really looking forward to this bottom drawer that they kind of spoiled.
They haven't said anything about the release date. We're currently at version beta version 1 or something like this. So I don't know if this will happen in July or 1 or 2 more month, but we can definitely expect something cool. Once again, you can easily check it out. Just update the Angular, Ionic, or whatever version of framework you're using inside your project. And that's most likely everything you need to do to check out the new components which are really really awesome. I hope you enjoyed this quick first look at Ionic version 6.
If you got any questions about the components that we've seen or want to see something else regarding the new framework, just let me know in the comments. And of course, give the video a like and hit the subscribe button so you get notified about all the upcoming videos that we got about Ionic. As well, if you're not yet a member of the Ionic Academy, now's the time to check it out. Ionic Academy.com, my place to help you with everything Ionic. And of course, also with the transition from version 5 to framework version 6. I hope you enjoyed this. Have a great week with either version 5 or version 6 or 4 or 3 of Ionic. Doesn't really matter. Just build something awesome. And I will catch you next week like always. So happy coding.
Simon.
