What Does Ionic 3 Mean for Ionic 2?

In this video we are going to talk about Ionic 3.

If you have been following the Ionic news recently you may have seen mention somewhere to Ionic 3. Of course, people are going to wonder what that means. Why is there an Ionic 3 when Ionic 2 was just released? If you were around for the Ionic 2 release, if you originally used Ionic 1, you would know that there was a huge jump from Ionic 1 to Ionic 2, there was a lot of changes and it was essentially an entirely new framework.

Ionic 2 is certainly a lot better, a lot more powerful then Ionic 1. It was a huge step for people to make that transition from Ionic 1 to Ionic 2.

So, naturally, when talk for Ionic 3 starts coming out soon after the official release of Ionic 2 came out people naturally worried about that. What does this mean? I have seen comments like, “Does this mean Ionic 2 failed and we are moving onto Ionic 3 already?”, "They're not bothering to update Ionic 2 anymore." That's not the case at all, it's just the matter of the terminology being used here.

There is a different versioning system being use now as opposed to with the original version of Ionic. So, the transition from Ionic 2 to Ionic 3 will be nothing as opposed to the transition from Ionic 1 to Ionic 2. The transition from Ionic 2 to Ionic 3 will be more of just a transition between more normal updates. In Ionic 1 it would be more like a 1.3 to a 1.4 upgrade rather than transitioning to this new framework.

The reason there has been this change is that Ionic, like Angular, is now using something called Semantic Versioning or Semver for their versioning and it doesn't really mean a whole lot in terms of what functionality is going to be made available, it is just a more consistent way for people to version their software libraries. Versioning is kind of this undefined thing. People in the past have gone with whatever felt right with their company, how they wanted to name their update, whether they wanted to call it 1.10.2 or 1.11 or 1.50. Semver is a more standardised way to do versioning.

All it is, basically, all you have is your 3 points (3 dots). So, you have something like 1.1.0 or 2.3.5 and the first number stands for a major change, the second number is a minor change and the third number is like a patch. When we see little updates to Ionic such as little bug fixes, that will come through as a patch. Version 2, you might expect to see something like 2.3.0 and if they were to apply a patch you would get 2.3.1. If there is some kind of a minor update that is bigger then a patch but it is not really that big of an update you would see a transition to 2.4 rather than 2.3. When there is a bigger update that is when you get that first number changing to something like Ionic 3. So we move to 3.0, 3.1 and so on.

The current version of Ionic is at 2.3 and this upgrade to Ionic 3 will come in the next few weeks which will transition from Ionic 2.3 to 3.0. This is going to be a major update but it's not a new framework, it's not a totally different thing that we will be working with. With a major update, it may imply that there will be some breaking changes. Maybe some API will be changed. Whereas with a smaller update like a patch or a minor update you will likely not have any breaking changes.

Having said that, there really isn't that many breaking changes in Ionic 3. There are some huge updates behind the scenes that will make Ionic work faster and for the package sizes to be smaller but in terms of things that you will need to do to update your application is actually pretty small.

So, I have the upgrade guide up of the screen here. This will probably change somewhat over the next couple of week because this isn't finalised but when it is released you will have some updated notes like this and as of right now, all you need to do update in an existing application is to just change the dependencies to what you see on the screen here. The beta for Ionic 3 is out now so if you want to update now, you can.

Import the BrowserModule into the app.module.ts file. Same with the HttpModule, and you can also make use of Ionic native 3.x. That is all you need to do to update an existing Ionic 2 application to Ionic 3.

If you are generating a new Ionic 3 application, or just a new Ionic application, this will all be done for you so you can just keep doing things the way that you have been.

That is another important note, the branding for the framework as Angular have done is that they wanted it to be called Ionic. It is not Ionic 1 or Ionic 2 or Ionic 3, it is just Ionic. The version numbers don't really matter that much. Ionic 3 will soon enough transition to Ionic 4 then 5 then 6 and it is not going to be a new framework every time, it is just going to be major updates like this one.

Of course, it is not so easy to just call it Ionic because people are so used to searching Ionic 2 now. A lot of the content is labeled as Ionic 2, it makes it easier to search for Ionic 2 content rather then Ionic 1. So, there is a bit of a teething problem there so just keep in mind that this version number doesn't matter so much anymore.

I'm not going to spend too much time talking about what is going to be new in Ionic 3, I mainly just wanted to get this point across that it is not this totally different framework like is was for Ionic 2.

I will just quickly go through this documentation. One of the big changes in Ionic 3 is the option to lazy load modules and I will probably do this in a more in-depth blog post when Ionic 3 is stable. Essentially, what you will be able to do now is lazy load pages. We can create a module for each page and we can lazy load those. Lazy loading, in general, means to load something when you don't need it right away. We often do this with images on a web page, rather than loading all of the images right away. So, if we have 100 images on a page then loading those images as a user is scrolling through them. If they never scroll to the bottom of the page, we don't need to load the image(s). It is the same idea with lazy loading pages in Ionic. Rather than loading everything up front, we can just load what we need first and then load in what we need as we go. That is going to help a lot with starting up an application if you have got a particularly big application that is loading lots of things, that is going to help your application to start up faster.

Finally, the only breaking changes so far with Ionic 3 is some minor changes to the grid, where they have removed the old style of the grid system where you would use width and a number to space specified columns, now you should use to newer version which is essentially the same thing except you use col instead of width.

There are some changes to typography and slides but these are all pretty minor changes which will be quite easy to update in any existing application.

Of course, the big thing with Ionic 3 is it will now be using Angular 4 behind the scenes. That is the latest version right now for Angular, so you are going to get all the advantages of what Angular 4 offers in terms of new features and that will be built into your new applications when using Ionic 3.

I hope this video was able to clear up some misconceptions about what Ionic 3 is. I can understand that people would be worried when something like this comes out when they have just been investing into learning Ionic 2. It seems like there is this new framework that has come out and we are just going to have to forget everything we have just learned but that is not the case. If you see people on the forums confused about this, let them know, maybe point them to this video. Hopefully, now you can be excited about the launch of Ionic 3 instead of being worried about it.