Ionic 4 Tutorial : An Introduction to Ionic v4

Ionic Framework V4 is advance in technology with a focus on overall extensibility, performance, and compatibility. V4 still integrates deeply with Angular by using @ionic/angular package. It can work with any other JavaScript frameworks like React and Vue etc. or with no framework at all. Rather than a framework-specific model, Ionic Framework V4 allows the core of Ionic to rely on the standard component model supported in modern browsers. That means better performance, less overall code with faster load time.

What is Ionic?

Ionic is an open source framework for developing a higher quality mobile application for any mobile devices using one codebase. That mean Ionic framework is one of the top free open source frameworks for building cross-platform applications. Ionic was developed by Max Lynch, Adam Bradley, and Ben Sperry. In 2013, they build a tech start-up called Drifty Co and now Ionic is one of the world's top open-source framework for developing cross-platform/hybrid mobile applications.

Ionic Version History

Codiqa and jetstap are the previous product by Ionic. They had drag and drop interface for developing on bootstrap and jQuary mobile. Their journey starts by taking feedback from users and finally they decided to develop their own open source framework which will focus on performance and web slandered build. In November 2013, they released the first alpha version for the Ionic framework. 1.0 beta version was released in March 2014 and the first final version for Ionic 1 was released on May 2015. Currently, there are three major releases for the ionic framework.

1. Ionic Framework V1:

   In May 2015, Ionic framework version 1 was released officially. In Ionic 1 controller will hold all the logic and template will hold your views. Ionic framework 1 was developed under angular 1 which was based on javascript.

2. Ionic Framework V2:

   In 2016, Ionic framework version 2 was released. The biggest changes for ionic 2 was using angular 2 with typescript. Ionic 2 has a very similar concept with Ionic 1 but there are some changed on developing patterns. In Ionic 2 classes are used instead of controllers because of using angular 2. Template syntax is also changed, and a lot of differences in the class structure still the concepts are still similar to ionic 1.

3. Ionic Framework V3:

   In 2017, ionic framework version 3 was officially released with the biggest change. That change was using SemVer (Semantic Versioning) and with angular 4. It was compatible with Typescript 2.1 and 2.2. There are other good features on ionic 3 was Ionic lazy loading and page decorator. The key focus was to improve performance and the speed and of the applications.

4. Ionic Framework V4:

   Ionic framework version 4 is still in a beta version which is the latest version for Ionic. There are lots of changes on Ionic 4 including performance and build time improvements. Ionic included multi-framework compatibility, powerful theming capabilities and new documentation in this version. You can also migrate your current application to Ionic 4 very easily. Here are some biggest features and changes in ionic 4:

Ionic V4 Features

1. Web components

   Ionic is moving towards web components for each component. Web Components is a collection of Web APIs with vast support on modern browsers, such as Shadow DOM and Custom Elements. Web Components use require less code and it will push more work to the browser. Web component improves performance to startup and load time. Web component use for developing high-performance Progressive Web Apps.

2. Framework Integration & Compatibility

   Ionic was built to work with Angular but Ionic build a UI Framework that could work with any technology. Ionic component uses custom HTML tag, such as ‘’. It works in any platform and framework or without any framework. It can be used with any JavaScript frameworks like React, Vue, Angular, etc.

3. Angular CLI & Router

   Now we can use Angular CLI for our ionic applications directly. This is the best feature from ionic so that we can stay up-to-date with the angular and rapid application development. That means any angular developers can use APIs which they already familiar with.

4. Capacitor

   The capacitor is a hybrid API and code execution layer which is still a beta version yet. It helps developers call Native SDKs easily. It is very much useful for rewrite plugins

5. New Components

   ion-content :

   In a single view there should be one content. Scrollable area can be managed by using ion-content. We have to use ionScroll to scroll element. We can use pull-to-refresh component in the content area.

   ion-picker:

   Ion-picker is a dialog that displays on top of the content or the bottom of the viewport with buttons and columns.

   ion-ripple-effect:

   Ion-ripple-effect is interaction which can add the Material Design ink effect. It is efficient, and usable without including other DOM to your elements. It works easier CSS-Only implementation and without javascript.

   ion-route:

   Ion-route is a component to redirect from one component to another component. It takes a component and renders to match URL.

   ion-reorder:

   Ion-reorder helps to change its order horizontally by dragging items. To deliver a visual drag and drop interface with effects, we can use ion-reorder.

   ion-searchbar:

   Ion-searchbar is used to search in collections by using text field. There are 9 different search bar styles in ionic which look beautiful.

   ion-show-when:

   When parameter check to true, Ion-show-when shows its child component. It can detect a different kind of changes like device orientation, platform changes, CSS media queries, mode changes.

   ion-select-popover:

   when overflow actions do not fit in the navigation panel, Ion-select-popover used to show a dialog on top of the current window.

   ion-skeleton-text:

   When your page or data is loading, we used to render the placeholder content by using Ion-skeleton-text.

6. Color Changes

   In Ionic v4, there are lots of changes in color with the default color changed from ‘#488aff’ to ‘#3880ff’. There is some new colour added in version 4. There is 8 pre-added colour in ionic 4.

7. Tappable Items

   In previous versions we used <button> for display button which can be tappable, but now we will just add the tappable attribute to an <ion-item>.

   <ion-item tappable(click)="doSomething()" >Button Item </ion-item>
   Instant of
   <ion-button (click)="doSomething()">Button Item </ion-item>

Ionic Advantages

Once the ionic application is created, it can be deployed to any platform/devices like Android, IOS, and Windows. Ionic is focused on HTML, SCSS, and Typescript so that it will enable you for low cost, quick development with minimal cost. It creates a powerful SDK for building rich applications. Ionic previous versions are low in performance but with version 4 it has a main focus for the performance.

Core Concepts

If you are new to this platform then it can be helpful to achieve high-level knowledge of the core concept, philosophy, and the tools behind the projects. Before going for complex topic let me tell you some basic concept about how ionic framework actually works.

1. UI Components:

   Ionic is a collection of reusable UI Components which perform as the building blocks for a program. Ionic is using HTML, CSS, and Javascript for developing web standards component. We can design highly customized application from the ground up so that it will help to achieve each app its own look and fell.

2. Platform Continuity:

   Platform Continuity is a built-in feature of Ionic Framework which allows app developers to use the same code base for multiple platforms. The ionic component will automatically adapt its look in the application depending on its platform.

3. Navigation:

   Navigation works like a stack in ionic. We can push Modals, Alert and Page to the stack to navigate to it, and pop to go back. Here are some samples

   1. SetRoot

      this.navCtrl.setRoot(ComponentController, params, opts, done) : It will set the root for the current navigation stack.

   2. Push

      this.navCtrl.push(ComponentController, params, opts) : It will push a new view onto the navigation stack

   3. Pop

      this.navCtrl.pop(opts) : Pop will navigate back from a current component to your previous view component

4. Theming:

   Themes are the collection of styles which will be applied to an application. Theme modifications are now much easier nowadays. Because the ionic framework is built with CSS, it comes with default styles which are quite easy to change or modify. By default ionic uses the light theme but we can also change it to the dark theme. In the case of theming, Ionic’s Platform will use platform specific style for their components. This means styles will change based on the operating systems like Android, IOS, windows e.t.c. We can also use other front-end component library like Bootstrap, Framework 7.

   Platform Specific style

   Ionic uses modes to design each components. Each platform has a default style, but those styles are changeable. For example, android platform’s application will use MD (Material Design) style. The <ion-app> will use class="md".

   <ion-app class="ios">
   <ion-app class="md">
   <ion-app class="wp">
   

   Platform	Mode	Details
   iOS	iOS	iOS devices will use default Apple Operating System style.
   Android	MD	Android devices will use Google Material Design.
   Windows	WP	Windows devices will use the Windows default theme.
   Core	MD	Rest of any applications that does not fit any above platform will use Material Design style.

Summary

In this article, we discussed the Ionic Framework with new features, advantages, and core concepts. We have also discussed a new ionic component, navigation and theming.

Take our free skill tests to evaluate your skill!

In less than 5 minutes, with our skill test, you can identify your knowledge gaps and strengths.

GET TEST NOW