Ionic 4 vs Ionic 3 — What you need to know about Ionic 4

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

I guess you will have many doubts - and perhaps fear - about this new version. 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 I want to explain the main differences between Ionic 4 and Ionic 3, as well as the new concepts of this brand new version. We will see practical examples of how to use the new Ionic CLI, and the new Router. Then at the end I will guide you on how to migrate your applications from Ionic 3 to Ionic 4.

Also, we created a To Do List App in Ionic 4 that you can download for free so you can see how to start using Ionic 4 to create a simple app with lists, forms and navigation.

At IonicThemes we are great believers of "learning by example" that’s why all of our Ionic tutorials include a free and complete ionic example app. We strive to create the best ionic tutorials so we go the extra mile and create a specific ionic application to show you how to use the concepts from the tutorial in a ready mobile app.

You can download the free code of this starter app with Ionic 4 by clicking in the GET THE CODE button from above.

Ionic Framework 4 has been completely rebuilt from the ground up using standard Web APIs, and each component is packaged up as a Web Component.

This allows Ionic framework to be projected into the future by relying only on the APIs browsers support natively and also keeping the public API for each component stable.

Because each component of Ionic 4 will be a web component, they created and open sourced a tool called Stencil. Stencil is a web component compiler for building fast, reusable UI components and Progressive Web Apps.

What are Web Components?

Web components are a set of web platform APIs allowing you to create custom, reusable, encapsulated HTML tags to use in web pages and web apps. In other words, their functionality is encapsulated away from the rest of your code and you can utilize them in your web apps.

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 or frameworks.

Using 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. One of the aims of the web components is to help developers re using code as much as possible.

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 markup within a web component.
• HTML templates: enable you to write markup templates that are not displayed in the rendered page. These can then be reused multiple times as the basis of a custom element's structure.

Since its beginnings Ionic Framework was built to work just with Angular. However, today with the popularity and support of web components this has changed.

One of the biggest changes of Ionic 4 is that it’s completely agnostic of the base framework (previously this place was occupied only by Angular).

Since the components of 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 at all!

For those of us who have been using Ionic 3 with Angular, stay calm, as this will not mean major changes in our Ionic 4 applications with Angular.

What the Ionic team intends with this change is to show their original vision which was to build a UI Framework that could work with any technology a web developer chooses. This opens the door to future applications that can be created in Vue or in React using the Ionic web components.

On February 2019 the Ionic Framework team announced the release of Ionic React Beta! What does this means? Now, that Ionic’s core is able to adapt and expand to support many different frameworks, they are starting to work hard on getting their first betas to support other frameworks like React and Vue.

Also, React developers have always used React Native to make native apps for iOS and Android. Although React Native is a very good approach for native app development, Ionic believes in the web platform. React developers can find lots of advantages in creating hybrid mobile, desktop, and progressive web apps with Ionic and React. Learn how to start using Ionic and React.

The CLI 4.0 has been heavily refactored to offer more features and to improve its speed and ease of use. The Ionic CLI aims to be your go-to tool for developing Ionic apps, offering powerful Cordova integration with livereload, custom schematics for generators. This new CLI has been designed to work next to the Angular CLI so you can get the best of both worlds.

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 a version of 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 the 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:

This new CLI allows us to use console commands to create new pages, components, directives and services. Let's see some examples:

Create a new Page

$ ionic g page User

In the following screenshot you can see the files that are created when running the above command. By creating the page in this way the CLI also automatically adds it to our app-routing.module.ts

Create a new Service

$ ionic g service services/user

These are the files that are created when running the command to create a new service.

These are just some of the new functionalities that the new CLI has to offer. I invite you to explore the new documentation on the Ionic CLI for more details.

If you want to start creating your Ionic Framework app but don’t know how to start, I suggest you to try Ionic 6 Full Starter App. It’s an Ionic app that you can use to jump start your Ionic app development and save yourself hundreds of hours of design and development.

It includes more than 100 carefully designed views and components. It will help you grasping the new concepts of Ionic development as well as the good practices. It has full support for PWA with Angular.

Try the demo

There are great changes in the navigation and in the Router, which in my opinion, are a big win. Let’s see why. Ionic 4 now uses the Angular Router.

The Angular Router is one of the most important libraries from an Angular application. Without it, apps would not be able to maintain their navigation state on browser reloads. With Angular Router and Ionic Framework, we can create rich applications that are linkable and have rich animations.

Ionic 3 used a navigation based on a simple stack where the new pages were pushed on top of the stack and when we wanted to navigate backwards we simply made a pop of the last page.

Traditional websites use a linear history, which means that the user navigates to a page and can press the Back button to navigate back. In Ionic Framework, applications can take this a step further by allowing parallel navigation. Which means that it is possible to have multiple navigation stacks and exchange them at any time. An example of this would be having a navigation with tabs on one page and another with a side menu.

If you want to discover all the possibilities the new Ionic Navigation brings and also learn some usability tricks we can add to our Ionic Framework apps to make them look even better you need to read Ionic Navigation & Routing: The Ultimate Guide.

Something important to mention is that NavController and ion-nav in Ionic 4 have become obsolete. You can still use them, but only if your application does not use Lazy Loading.

As we already said, when creating an angular type application, Ionic now uses the navigation of Angular. This is why when creating our ionic 4 angular application, the CLI automatically creates an app-routing.module.ts file located in src/app.

Let's see what’s inside this file and what are the differences with the navigation in an Ionic 3 app.

In Ionic 4:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', loadChildren: './pages/home/home.module#HomePageModule' },
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

And now to navigate to the HomePage we have to do the following:

import { Router } from '@angular/router';

constructor(private router: Router) { }

navigateToHome() {
  this.router.navigate(['/home']);
}

In Ionic 3:

import { NavController } from 'ionic-angular';
import { HomePage } from './pages/home/home'

constructor(public navCtrl: NavController) {}

navigateToHome() {
  this.navCtrl.push(HomePage);
}

Please note that the navController is no longer used for the navigation in Ionic 4.

Navigation example in Ionic 4

Let's take a step further and see how to pass information between two pages in Ionic 4.

//item is an object like:  { title: "Some title", description: "Some description"  }

itemSelected(item) {
  this.router.navigate(["/home", item]);
}

Then, to get the object "Item" in our HomePage, we use the ActivatedRoute.

import { ActivatedRoute } from '@angular/router';
export class HomePage implements OnInit {
  item: any;
  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.params.subscribe(data => {
      this.item = data;
    })
  }
}

The life cycles that we used in Ionic 3 such as ionWillLoad will no longer be used in Ionic 4. Now we will use the Angular life cycles such as ngOnInit and ngAfterViewInit.

If you are familiar with Angular, this will sound natural to you. If you want to learn more about Angular, I suggest you read Angular Tutorial: Learn Angular from scratch step by step .

routerLink

In Ionic 3 the click event is used to navigate between pages from the markup. In Ionic 4 we will use the routerLink, as it is used in Angular applications.

Below is super simple example to navigate to https://yourwebsite.com/product/123 when clicking a button.

<ion-button [routerLink]="['/product/123']">Go to Product 123</ion-button>

It is also important to mention that it is no longer necessary to import the pages and services in the app.module.ts file, which in my opinion makes the project much simpler and more organized.

If we use lazy loading, for each page there will be a module. Then, if we want to use Reactive Forms (for example) on a specific page, we only import ReactiveFormsModule on the page or pages that will use it.

The code below is from the src/app/pages/new-item/new-item.module.ts of our example application in Ionic 4 that you can download for free by clicking the GET THE CODE button from the beginning of this page.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { NewItemPage } from './new-item.page';
const routes: Routes = [
  {
    path: '',
    component: NewItemPage
  }
];
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    RouterModule.forChild(routes)
  ],
  declarations: [NewItemPage]
})
export class NewItemPageModule {}

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

This guide covers both how to migrate from Ionic 1.0 to Ionic 4.0 and how to migrate from Ionic 3.0 to 4.0. Also there's a specific page from the Ionic documentation where you can find more information about migrating to Ionic 4.

The truth is that the migration process is quite simple and personally it has not generated any problems when migrating our applications, so relax!

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

In this article we talked about the main differences between Ionic 4 and Ionic 3 as well as the new concepts proposed by Ionic Framework 4.0.

I hope it has helped you understand more about the new version of Ionic Framework and above all to calm your fears about migration. As mentioned above, migrating from Ionic 3 to Ionic 4 does not mean rewriting your application (as it did in the migration from Ionic 1 to Ionic 3).

If you want to learn more about Ionic Framework, at IonicThemes we have lots of free ionic tutorials with practical examples so you can learn how to create the best apps using Ionic Framework.

Remember that if you need help to start your Ionic application, we have created a complete starter app that will help you in all the steps to develop an Ionic and Angular application. You can try the demo to see all the beautiful pages we created using Ionic Framework.