Ionic 6 RELEASED⚡️ What's new?

what's up samurais and welcome back to another special episode because today we're celebrating another launch the launch of ionic version 6. it was actually silently announced last week the official announcement came this week right before the launch of my own built with ionic block which you should definitely check out built with ionic.com epic book but today i want to show you everything that's new within ionic version 6. so all the components the design changes the internal changes that you can benefit from also how to update or migrate your application and spoiler it has really never been easier at the same time well it has never been easier it is actually an epic update in terms of all the ui changes in a few special new components that i think you will definitely love i've already worked with ionic version 6 since quite some time during the beta versions and the release candidate so everything felt already quite good at that time and now we've arrived at a stable version 6 of ionic so you can install this in your applications with confidence and update to the next major version and i'm going to show you what's new [Music] all right so let's first talk about all the different design changes and new components uh i think by looking at them you can get a quite good idea about ionic version 6. so let's start with daytime the daytime component was completely revamped this is actually what i use in what you see so the complete standard ion date time now looks like this calendar implementation there are a lot of things that you can select you can set if you only want to select a date date in a year a date and a time or a time and a date so you can combine those things and uh you might have to put a bit of additional css into this uh especially if you want to show this in something like a modal which looks actually pretty cool sorry early morning um and i've actually prepared a new quick winner tutorial about this which yeah should come pretty soon about this but the new daytime is definitely cool uh looks great in ios and android if you have used this in your applications uh you might have to spend a bit of time to upgrade to the new component as it's really uh quite different from previous versions anyway it looks amazing uh if you look at the official post uh you will also see a nice visual representation that could look like this so it's really an amazing component that looks good as well on desktop now the second component that i maybe like the most uh it's maybe ranked number two is the ion accordion groups i'm gonna commend in this huge chunk it's really it's a repetition of a lot of things so that's why it's that long uh let's take a look at this it's and guess what accordion uh i can even um somehow yeah control this with my keyboard which is pretty cool um i've already tried a lot of things but this and created a new video about this for the future as well you can nest the accordion uh you can select different icons have them in different slots you can style all the components uh what they say yeah you can nest them really there's a lot and it's a pretty easy setup your surround something with an ion accordion group and then you start the actual ion accordions so the different uh as you can see colors and shapes that's what we see up here at the top level and then each of them has a header slot where we got the item and a content slot for the actual items in that recorder it's a pretty easy setup and you can easily hook this up to your adjacent from the back end so that should be a really great addition for a lot of applications you can even picture this in a side menu um a lot of use cases for this and i think we're gonna have a lot of fun with that now um more components uh what do we have as well um we had some general ui changes as well uh in terms of the header so uh let's take a look at tab number three and you see the ios header has no border and only while i scroll the border comes in so this is a change um we previously already had the collapse condense function uh property on ios which made this huge title in the page then move into the title while you scroll and now we also have the fade option for collapse which brings this cool ui apparently i think this has no effect on android um but for ios we can use it on both the ion header and we could even add it to the footer let's give this a try real quickly and see if it works uh ion footer let's see uh yeah that looks great with a tap bar so by now it's visible but once we reach it you see the color is gone the border is gone and it works in that place as well on top of that you see on this page uh well just a dummy repetition of 50 items but more important there are two new slots on the ion item called helper and error so helper please enter your email is what you see right here a little uh additional text for input labels i think this is going to be really helpful uh so that's maybe why it's called helper an error should be visible when the input field is invalid however i don't know if we have to connect it to ng model or reactive forms um to see that error message but i think this is a great addition since we use or need that in forms very often if you've got any questions about this just let me know i think uh we might have another quick win on creating a cool form with that as well since uh the release post here also shows this great uh ui following material design on android um i haven't seen this kind of ui with the borders and the name here uh in my testing application so i'm going to reach out to ionic uh to see if this is now the default or if we need anything special for that but i'm sure you're interested in that right leave a comment if you want to see uh cool building a cool form like this with ionic version 6. okay so we got the header we got that uh let's move to my next tab which holds another new component and that is the ion breadcrumbs component so we got actually quite a lot of new components in uh ionic version six breadcrumbs pretty easy uh you surround it with breadcrumbs and then put in the single breadcrumbs that you want you could have different router links or general navigation links attached to the different items i don't know if this will be used a lot on mobile but i think on the web this can be really helpful if i've seen this on quite a few websites there's also a lot once again that you can customize like the icon how many you want to display you can have a dots if you have too many items and show a pop over so yeah i actually think we should have another quick win on that as well because this is just really the most basic form and you can do a lot more with the breadcrumbs component that i'll hopefully be able to show you in a future video let's comment this out and take a look at something else and that is um a new select style on the web um this is right now ios can we let's just close this uh so on the web we can now control this with our keyboard as well or on desktop in general right now it doesn't look too good if we look into the example ionic gives in the release post it looks like this so with a centered button and the box below so just with a bit of additional css we should be able to create an effect like this which should work pretty well for a website with ionic i think that's a cool addition they've moved a few things into the general direction of web and bigger screens so i think a lot of people will be happy about that change now maybe the the single best item i've celebrated a lot already before the version 6 release is the new bottom sheet representation of the modal which you can drag along background gets darker the backdrop it snaps at different positions it's completely smooth and i just love this new component there's so much you can do with this really uh i just released a new guest post on the ioniq blog about different ways to embrace this new component and it's just amazing i'm sure you're gonna love this as well now how you get this is pretty easy if you create a new modal you just need to pass two properties to the creation of the modal and in fact i'm doing this in an interesting way so the properties are break points and initial break points pretty easy break points array of where the modal snaps initial break point at which breakpoint does it initially snap um but what i've done is i also used the new inline version of a modal so that means you don't have to generate another page for your modal you just create an ion model like this inline you see we got an ng template and then a pretty standard setup uh of an ionic page with a header and content inside and the only thing you need is a trigger so in this case trigger modal button is connected to this button up here and clicking that button is already enough to open and trigger that model and i think that's going to save some people a lot of time you can also use this inline pattern i think for pop overs as well uh i guess for alerts not yet although it would make sense since modal pop over and alert kind of like the general overlays so ion pop over can also be used declarative that is good news i haven't read anything else about well but that's anyway a good start i think so give that a try as well now i think we've covered uh all the new most important items let me just quickly show you a cool representation instead of my boring accordion once again so it could really look like that you could structure a lot of information with that uh the breadcrumbs as you can see right here could have a few dots could have a little pop over there's a lot that you can do with the new components and as far as i've seen they have all the slots defined the css variables the parts so you can really make them yours of course what's new as well is performance tooling um call custom elements build uh or review which will reduce the bundle size hopefully faster components um new tooling available which might be important to some uh in general if you're working with ionic in angular you won't notice anything uh about that view routing and yeah if you're working with vue that will be important um and something that's quite interesting i don't know from which requirement this came but they've added a way to um customize the platform the platform detection code so previously um you could just use a platform is web is desktop is anything and you would get true or false but in the background it seems like there were some problems because as we can here see the default desktop function returns false for devices with a touch screen and that might be a problem so in case you have special requirements and want to change how the platform check that runs in the background of ionic works you can now customize this within your ionic config like they've shown here and then simply pass the configuration as usual to your ionic module for root call pretty cool uh extension but what i like actually i think even more is the typescript so um if you've used infinite scroll in the past you might have noticed that you pass an event to your function and you have to call target complete and typescript just complains because there are no types no guess what we can now have all kinds of different events for example if you attach this to your select component to your segment component to your infinite scroll component you now got type things for all of this so you got the interfaces here you can dive into this and you can safely use them with typescript i think this is like something you easily overlook within that release because it's just mentioned here once but i think it's actually a very very cool improvement for ionic and embraces typescript once more even better now you might ask yourself how do i migrate uh there's a migration guide for easy applications it's really gonna be a one-line migration just install the latest version of ionic six uh perhaps if your apps using an old version of angular you should update to 12 plus that's anyway recommended um here are just a few general changes uh which are not in most applications i guess uh if you're using any uh reactor view of course check out those changes as well but i guess most of you are still using angular so in those cases you might have to check out uh the updates regarding components especially date time since it was completely changed uh watch out for a video about this anyway coming next week um there are minor changes regarding icons and inputs uh one thing that might break stuff in your application is a change to the modal and how it's used now since it's now converted to a shadow dumb element you could previously target custom styling like this you now have to target the specific part of the ion model like this the content part or the background part using css parts um same for pop over we see the same change you know i have to use parts as well there are some minor changes that you can go through you know best if you're using those components in your applications or not but there's not like a renaming to other components really daytime is the only component that might raise some problems in your migration perhaps you're lucky and you're not even using datetime in those cases you're going to have a very easy migration and i highly recommend it ionic version 6 is stable um there's really no reason to not update you always get benefits with the latest versions and you're gonna of course benefit from all the future updates and uh you don't wanna update from version four to version seven or eight in one point so try to get to the latest version it has really never been easier than this and you get a lot of cool new components all right that's mostly it for today but i also want to plug in a few other updates since we didn't have an ionic news flash for quite some time so there are two other things that i want to mention first ioniq now has a discord channel that you can join you can check it out on the official ioniq blog all the information about the discord channel and how you can join so that is the new place to ask your question if there's anything about ionic also all the ionic ionic insiders like myself and josh [Music] everyone is in there to answer your questions on top of that uh something that's actually a bit in the past already and was announced as well is the deprecation of ionic native i know a lot of people are watching this video about ionic version 6 so i just want to put it in here as well that ionic native was renamed to now being awesome cordova plugins simply because the name ionic native uh was confusing it worked in the past for access to native functionalities but now we got capacity as well and those things led to a lot of confusion i'm gonna talk more about this and my expectations for uh what we see with ionic uh to be changed in the next year in another video at the end of this year but just uh take a look at this as well ionic native deprecated now all right i think that covers everything so far about ionic version six it is really an epic version you should check it out for most of us this should be a pretty easy migration just install the latest version and see if your application is still working otherwise you might have to touch the modal a pop over styling and especially the daytime component but those are really like the biggest issues that you could encounter in your applications but otherwise i feel very confident that a lot of you will directly benefit from ionic version 6 and you can get started to integrate the bottom sheet the accordion the breadcrumbs the new daytime you're going to have a lot of fun with the ec if you'd also like to learn how to build epic interfaces with ionic you should check out my latest book built with ionic during the launch you can still get it for 20 20 of until friday night so this video comes out thursday until friday you got time to get the book buildwithionic.com uh supports me supports this channel um supports everything that i do to create more free content for you in the future all right i hope you enjoyed this episode leave a like subscribe share the video do everything you can and of course enjoy ionic version six applause and congrats once again to the ioniq team for their hard work this is really a great release i will hopefully catch you next week like always so happy coding simon [Music]

Channel: Simon Grimm

Views: 3,560

Keywords: ionic framework, learn ionic, angular, ionic angular, ionic guide, cross platform, hybrid app, ionic for beginners, ionic course, ionic, cordova, javascript, ionic 5, learn ionic 5, ionic 5 for beginners, angular 9, ionic 5 tutorial, ionic 5 angular, ionic 5 course, ionic academy, ionic tutorial, ionic 6

Id: jDWtIklLR8Y

Length: 18min 27sec (1107 seconds)

Published: Thu Dec 16 2021