Ionic 4 Tutorial : An Introduction to Ionic v4
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.
Ionic Framework V1:
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.
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.
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
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.
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 ‘
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.
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
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 is a dialog that displays on top of the content or the bottom of the viewport with buttons and columns.
Ion-route is a component to redirect from one component to another component. It takes a component and renders to match URL.
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 is used to search in collections by using text field. There are 9 different search bar styles in ionic which look beautiful.
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.
when overflow actions do not fit in the navigation panel, Ion-select-popover used to show a dialog on top of the current window.
When your page or data is loading, we used to render the placeholder content by using Ion-skeleton-text.
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.
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>
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.
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.
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.
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
this.navCtrl.setRoot(ComponentController, params, opts, done) : It will set the root for the current navigation stack.
this.navCtrl.push(ComponentController, params, opts) : It will push a new view onto the navigation stack
this.navCtrl.pop(opts) : Pop will navigate back from a current component to your previous view component
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.
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.