Many developers say that the latest version of Ionic, Ionic 4, is the best version ever. We checked what the most beneficial changes are and how the process of migrating looks like to find out if it’s worth to migrate from Ionic 3 to Ionic 4.

Ionic 4 — What are the Major Changes?

In the new version of Ionic, a lot of changes are happening in the background. Even so, the way we build applications, for the most part, remains almost the same. What exactly changed in Ionic 4?

In the new version, Ionic has been completely rewritten. All Ionic components are now web components: a set of web APIs having extensive support on modern browsers. They let developers create custom, reusable HTML tags for web pages and web apps. Widgets and components created like that can be used with any JavaScript framework or no framework at all. Web components are native to a browser, and we can use them anywhere. They also push more work to a browser, so a developer needs to write less code. That improves the performance and load times of an application.

Ionic is no longer built on the top of Angular. Now, thanks to web components, the framework is entirely independent. We can build Ionic cross-platform apps with any JavaScript framework like Vue or React, or with no framework at all.

What is more, the Ionic team built Stencil, a web component compiler used to create reusable UI components. Ionic components also utilise Shadow DOM, what enables to separate the styling of individual elements from the rest of our app. It’s a lot easier to manage a design.

Ionic 4 also switched to Angular routing for navigation. Angular routing uses URL based navigation which involves creating routes that are linked to our components or pages instead of using push/pop style of navigation. That is the change that requires more time while migrating. It is not obligatory to switch routing, but Angular routing is necessary to use lazy loading (thanks to matching the URLs to modules, the particular component gets loaded only if the module is called. It seriously improves performance).

Now, instead of Cordova, we can use a Capacitor, the new native bridge that makes it easier to access native code and integrate native features. There are also some syntax changes, all listed in Github repository. There’s also new CLI, better documentation and refreshed Ionicons 4.0. What is more, the new Ionic is perfect for Progressive Web Apps. You’ll find more details about all the changes in our special article about Ionic 4.

Migrating an Ionic 3 App to Ionic 4

The entire process of migration is painless, even in case of more complex apps. It is worth pointing out, that migrating doesn’t require rewriting the whole app. So how the painless migration process should look like?

The Ionic team recommends to create a new Ionic 4 application and add your old code step by step. Why? There are a lot of changes in the architecture of the app and a few regarding the code. It is simpler and faster just to transfer the code into the new project. Starting a new project gives us the new folder structure and Angular 6 files. Adapting our old code to all architectural changes would take a lot of time.

To make things even easier, we can use the migration linter, a tool that reviews our code and shows what changes are needed to be done. Using the Ionic Migration TSLint rules is really helpful because some rules automatically fix our code.

Also, the Ionic team wrote detailed documentation: a migration guide that presents all the steps we should take to migrate our app from Ionic 3 to Ionic 4. The whole process is simple and not time-consuming.

Is It Worth to Migrate?

Version 4 is the most significant update in the history of Ionic. Now, the framework is agnostic, web components and lazy loading improved the performance, Shadow DOM makes styling much more comfortable. We can use Ionic as a provider of excellent User Interface and UX, while we can choose freely from frameworks like Angular, Vue, React (or none) to provide the desired structure. Since the performance is great, the newest Ionic is also perfect if you want to develop Progressive Web Apps.

The new version of Ionic, as many developers claim, is the best Ionic ever. What is more, thanks to web components future updates will be minimum, as the underlying technology will remain the same. The only real changes may be for the framework we use Ionic with, not for Ionic itself.

The migration process is quick and painless; we don’t need to rewrite the app and can help ourselves with detailed documentation and linter.