Ionic 4 — Is it Worth to Migrate?

May 16, 2019

Most popular

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. 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?

Web Components

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. Developers can use widgets and components created like thatwith any JavaScript framework or no framework at all. Web components are native to a browser, and we can use them anywhere. What is more, they push more work to a browser, so a developer needs to write less code. As a consequence, that improves the performance and load times of an application.

Framework Independency

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

Easier to design

What is more, the Ionic team built Stencil, a web component compiler developers use 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. As a consequence, it’s a lot easier to manage a design.

Better performance

They also switched Ionic 4 to Angular routing for navigation. Angular routing uses URL based navigation. To clarify, it involves creating routes linked to our components or pages instead of using push/pop style of navigation.

This change requires more time while migrating. It is not obligatory to switch routing. Although Angular routing is necessary to use lazy loading. Lazy loading means that thanks to matching the URLs to modules, the particular component loads only if the module is called. It seriously improves performance.

Perfect framework for Progressive Web Apps

Now, instead of Cordova, we can use a Capacitor. It’s the new native bridge that makes it easier to access native code and integrate native features. There are also some syntax changes, you can find all of them 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 we need to change. Using the Ionic Migration TSLint rules is really helpful because some rules automatically fix our code.

What is more, 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. Above all, 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.

Above all, the migration process is quick and painless. We don’t need to rewrite the app and can help ourselves with detailed documentation and linter.

To sum up, there are many great benefits connected to Ionic 4 and the migration requires minimum work. It appears that the answer is simple: it is worth to migrate from Ionic 3 to Ionic 4. Above all, to benefit from the serious improvements, get better support and not need to worry about future updates.


You may also like..

Automated End-to-End Tests for Ionic App using Appium

Automated End-to-End Tests for Ionic App using Appium

Enter Appium, an open-source automation framework that has revolutionized the way mobile app testing is conducted. By leveraging the power of Appium’s capabilities, developers can now automate end-to-end tests for Ionic apps, enabling them to detect and address potential issues early on in the development cycle.

read more