Ionic 4 is here – Comparison Between Ionic 4 Vs Ionic 3

After more than a year of work, the Ionic Framework team has released version 4. The new version offers us significant changes in performance, compatibility with multiple frameworks (not only with Angular as previous versions), new documentation and many other improvements that we will analyze in this article.

Surely you will have many doubts — and perhaps fear — about this version change. But the good news is that despite the great improvements offered by Ionic 4, migrating from Ionic 3 to Ionic 4 is super simple!

In this article, we want to explain the comparison between Ionic 4 and Ionic 3, as well as the novelties and new concepts of this new version. Let’s see practical examples of how to use the new Ionic CLI, and the new Router. Then at the end, we will guide you on how to migrate your applications from Ionic 3 to Ionic 4.

Web Components

Ionic Framework 4 was completely rewritten to use the Web APIs and each component is packaged as a Web Component. This allows the framework to be projected into the future. To help create the Web Components, the team created a tool called Stencil.

What are Web Components?

Web components are a set of web APIs that allow you to create HTML tags that are reusable and encapsulated.

One way to explain the Web Components is to imagine them as reusable user interface widgets that are created using open web technologies. They are part of the browser, and therefore do not need external libraries.

With Web Components, you can create almost anything that can be done with HTML, CSS, and JavaScript. In this way, you can create a portable component that can be easily reused.

Web components make the browser the one who does more work and in this way, they provide important improvements in the performance and load times of modern applications.

The Web Components are based on the following specifications:

• Custom Elements: defines the bases and the fundamentals to design and use new types of DOM elements.
• Shadow DOM: defines how to use encapsulated styles and code within a web component.
• HTML imports: basically defines how to include and reuse the HTML document in another HTML document.
• HTML Template: defines how to declare code fragments that will not be used while the page is loading but could be later instantiated at runtime.

Compatibility with other Frameworks

Since its inception, Ionic Framework was built using Angular. But now with the popularity and support of web components, this has changed.

One of the great changes of this new version of Ionic is that it is completely independent of the base framework (previously this place was occupied only by Angular).

Since the components of the Ionic Framework, such as <ion-button>, are now encapsulated as Web Components, it is no longer necessary to bind to a base framework. Web components work with any framework, in fact, if you prefer you can not use any Framework.

What the Ionic Framework team intends with this change is that Ionic is a UI Framework that can work with whatever technology the programmers choose. This opens the door to future applications that can be created in Vue or in React using the Ionic web components.

Ionic CLI on Ionic 4The CLI 4.0 has been totally improved both in the features it offers and in its speed and ease of use.

In order to use it, we must have the latest version of the CLI in our development environment. We can install it by running the following command:

npm install -g ionic @ latest

To use the latest version of the CLI we must have installed node 8.9 or higher.Visit https://nodejs.org/ to find instructions on how to update Node.js.

Once the new CLI is installed, we can now create our first application with ionic 4. Running the following command, the CLI will create a new application with the basic structure of Ionic 4:

ionic start appName blank --type = angular

appName is the name of your project

blank is the template that we choose to create the skeleton of the application

type = angular is the type of project

Then to test your application in the browser you can run the same command that we used before in Ionic 3.

ionic serve

This is the structure of our new Ionic 4 application generated with the CLI:

pics courtesy: medium.com

How to migrate your application from Ionic 3 to Ionic 4?

You are probably wondering how to migrate an existing application from Ionic 3 to one from Ionic 4. The Ionic Framework team has written super detailed documentation with the steps for migration.

The truth is that the migration process is quite simple and personally has not generated any problems.

You can also use the migration linter which is a tool that automatically checks your code and tells you what changes you should make.

For more Information and to build the app using Ionic, Hire Ionic Developer from us as we give you a high-quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop the Hybrid mobile app using Ionic, please visit our technology page.

Source:

• medium.com