Ionic Framework is the free, open source mobile UI toolkit for building high-quality cross-platform applications for native iOS, Android and the web all from a single codebase.

With this technology, many Ionic App Development Company satisfy the thirst of market for cross platform mobile app development with all native mobile experiences.

In this blog we will see the main differences between Ionic 3 and Ionic 4 as well as the new concepts proposed by Ionic Framework 4.0.

Introduction to IONIC 3

Ionic 3 is an open source mobile UI toolkit for developing eminence quality cross-platform applications for native iOS and Android.
Build with inherent UI components that escalate app development, and can be deployed virtually anywhere.

Features of Ionic 3

1. Compatibility
   Ionic3 compatible with Angular 4.0.0.
   Ionic3 introduces new features, smaller and faster applications.
   Support for a more recent version of Type-Script, and much more.

2. Compatibility with Type-Script 2.1 and 2.2
   Ionic has been upgraded to work with a more current version of TypeScript.
   It's used beneath NavController so it will never have to be interacted with directly.
   When a new page is pushed with NavController, the URL is updated to match the path to this page.
   The current URL gets updated as we navigate, but we use the NavController push and pop.

3. Ionic Page Decorator
   The Ionic Page manages registering and displaying certain pages based on URLs.
   This update will improve the build time and type checking in your application.
   It also inaugurates support for mix-in classes, the potential to use a sync await in Ionic.

4. Support for Lazy Loading
   This will improve your applications startup time, reduce the bundle size, and easily set up Ionic routing.
   Let’s Understand using code.

Read More: Authentication With Authguard In Ionic 4

Example with Explanation

Now, our app.module.ts file has HomePage introduced and proclaim in the declarations as well as the entryComponents

                @NgModule({
                declarations: [
                MyApp,
                HomePage ],
                entryComponents: [
                MyApp,
                HomePage], })

The goal is to reduce this so we're only loading the main app.component.ts, and lazy-loading the HomePage component everywhere else.
So we'll remove HomePage from the declarations, entryComponents, and remove the import statement as well.
So create a new file, called home.module.ts, similar to app.module.ts

                import { NgModule } from '@angular/core';
                import { HomePage} from './home';
                import { IonicPageModule } from 'ionic-angular';

                @NgModule({
                declarations: [HomePage],
                imports: [IonicPageModule.forChild(HomePage)],
                })
                export class HomePageModule { }

Now, in our home.ts file, we can update the @IonicPage decorator to the HomePage class.

                import { Component } from '@angular/core';
                import { IonicPage } from 'ionic-angular';
                @IonicPage()
                @Component({ })
                export class HomePage { }

Since our HomePage component is now lazy loaded, we do not want to introduce it directly and remark it anywhere. As an Alternative, we can pass a string that matches up with the component.

                //Before :-
                import { HomePage } from '../pages/home/home';
                @Component({
                templateUrl: 'app.html‘ })
                export class MyApp {
                rootPage:any = HomePage;
                }

                //After:-
                @Component({
                templateUrl: 'app.html'
                })
                export class MyApp {
                rootPage:any = 'HomePage';
                }

The string is actually a citation of the name property of the @IonicPage decorator, which defaults to the class name as a string. If we change that name property to something else, we'll also need to update the remark and we use it elsewhere.

                //home.ts
                import { Component } from '@angular/core';
                import { IonicPage } from 'ionic-angular';
                @IonicPage({
                name: 'home'
                })
                @Component({ })
                export class HomePage { }

                // app.component.ts
                export class MyApp {
                rootPage:any = 'home'; 
                }

Introduction to IONIC 4

Ionic 4 represents a substantial change, moving from a mobile framework for Angular users to a framework-agnostic approach.
That assists support for Vue.js , React and web components.

Features of Ionic 4

Ionic 4 represents a substantial change, moving from a mobile framework for Angular users to a framework-agnostic approach.
That assists support for Vue.js,React and web components.

1. Web Components
Web Components are the ideal way to rapidly bootstrap a new Design System. Web Components use a set of consistent APIs
That are natively supported in all modern browsers.

2. Stencil
If you’re not familiar with Stencil, it is an open source (MIT) toolchain that builds reusable, scalable Design Systems by combining the best features from popular frontend frameworks and generating standard Web Components.

3. ion-Backdrop
Backdrops are full screen components that veneer other components. They are useful behind components that conversion in on top of other content and can be used to dismiss that component.

4. ion-Ripple Effect
The ripple consequences component adds the Material Design ink ripple interaction effect. This component can be used without a button and can be added to any component.

Looking to Hire a Mobile App Development Company? Contact Now

5. ion-Route
The router is a component for managing routing inside vanilla and Stencil JavaScript projects.

6. ion-Search bar
Search bars represent a text field that can be used to search through a collection. They can be displayed inside of a toolbar or the main content

A Search bar should be used instead of an input to search lists. A clear button is displayed upon entering input in the search bar’s text field. Clicking on the clear button will delete the text field and the input will remain highlighted. A cancel button can be qualified which will clear the input and drop the focus upon click.

7. ion-select Popover
Selects are form controls to select an option, or options, from a set of options, similar to a native select element. When a user clicks the select, a dialog appears with all of the choices in a large, easy to select list.

8. Ion icons 4.0
Ion icons v4 is one of the first major icon libraries to be distributed as web components, with drastically reduced sizes, brand new icon forms reflecting the latest iOS and Material Design styles, and a continuous highlight on ease of use.

9. CSS Variables
Ionic components are built with CSS Variables for easy personalized of an application. CSS variables allow a value to be accumulate in one place, then referenced in multiple other places.
They also make it possible to change CSS dynamically at runtime (which previously required a CSS preprocessor). CSS variables make it easier than ever to overrule Ionic components to match a brand or theme.

10. Lazy Loading
How lazy loading can be used to help fast track the load times of your Ionic Angular apps . Also, it doesn’t matter if your app is packaged and downloaded from the store, or a progressive web app (PWA) running off a server, lazy loading can help increase your startup times in both situations.

Setup new project

$ npm install -g ionic 

$ ionic start myApp --list 

tabs : A tabs based layout
sidemenu : A sidemenu based layout
blank : An empty project with a single page

                  $ cd myApp
                  $ ionic serve