Ionic 4 beta is here!

After more than a year of work, the Ionic Framework team has released version 4.0.0-beta.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 read mobile app.

I hope you enjoy this article and remember that while Ionic 4 is very promising, it’s still in beta.

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

Web Components

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 imports: 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 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.

Ionic CLI in Ionic 4

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 [email protected]

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:

Ionic 4 code structure

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
Ionic 4 new page

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

Ionic 4 create page

Create a new Service

$ ionic g service services/user
Ionic 4 new service

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

Ionic 4 create 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.

Navigation in Ionic 4

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.

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.

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 4 uses the navigation of Angular 6. 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);
}

It’s important to understand that 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;
  })
 }
}

Navigation LifeCycles

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>

Angular Modules

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 {}

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

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.

The truth is that the migration process is quite simple and personally has not generated any problems, 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.

Final thoughts on 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 to understand more about the new version of Ionic Framework and above all to calm 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 IonicFramework, at IonicThemes we have dozens of free tutorials with practical examples so you can learn how to create the best mobile apps using Ionic Framework.

Keep in mind that while Ionic 4 is very promising, it’s still in beta so if you plan to start a new Ionic app for a production environment consider using Ionic 3.

If you need an introductory tutorial to learn Ionic Framework with a real world example app just check Building a complete mobile app with Ionic 3.