Introduction to Ionic 4

As you probably know the version 2 of the Ionic framework has big changes comparing with the version 1 of the framework because the adoption of the Angular 2 (which is completely different from Angular 1 and it uses TypeScript language). Ionic 4 presented in this book is the last version of the framework launched in 2017. There is an intermediary version 3 of the framework released very soon after version 2 with small changes – in general improvements in performance.

In order to be consistent with the Angular team’s guidelines on the naming convention, we will use the name Angular for Angular > 2. Angular version 1 is named AngularJS. In this book, we will talk just about Angular.

All the aspects presented in this book for Ionic version 4 can be applied to version 3 and 2 of the framework because of the back compatibility of the framework. In the rest of the book, if we will talk about Ionic without specifying a version, we will talk about version 4 of the framework – more clear about version 4.0.x used in the examples that are accompanying the book.

Cross-platform mobile development with Ionic

The most interesting think about Ionic is that we can develop one application that can be published in any of the major existing application stores and can run on any existing mobile device. This can be a big advantage because we will write the app once and package it to different platforms.

We say that Ionic is a framework for developing hybrid mobile applications in contrast with the classical mobile development which is named native mobile development. What does this mean?

Mobile Native development

To develop natively it means to develop for devices of a specific mobile platform, using the programming language, the SDK, and the tools that are specific for that platform, to build a specific platform binary and to publish it in that corresponding store. For example, Android devices are running the Android operating system which is based on Java programming language (a subset of it), and we can develop using the Android SDK and the Android Studio IDE (based on IntelliJ Idea). After building we will get a .apk file that can be published in Google Play store.

But if we want the same application in another app store, Apple App Store because we want to be available on iPhones and iPads devices running the iOs operating system, we have to rewrite the app in Objective-C or Swift and to use the Xcode mobile SDK and IDE. The same for Windows Mobile which is based on C# and Visual Studio for development.

Mobile Hybrid development

The hybrid applications development is based on the possibility to develop a single HTML 5 application that can run in any mobile browser (any mobile device has a browser) and we can use JavaScript for accessing native capabilities of that device. More precisely the app will run in the WebView (a special browser window) and the Cordova framework I used for making native calls. In the end, the web application will be packaged for each platform in a native app (.apk files for Android and .ipa for iOs) that can be published in stores.

The architecture of a Cordova application is ilustrated on the below image:

Advantages:
  • cross-platform mobile development (we are in the same situation like Java: Write once, run anywhere) we will develop an HTML5 application with very well known technologies like JS (and JSON), CSS for powerful styling, HTML
  • the developed app can run also in a desktop browser so we can deploy it as a classical Web application and we can use PWA for encouraging mobile installs
  • we can rely on the ability of the Web apps to be responsive and to auto-adapt to the devices resolutions
  • because we have a web application, we can use the browser from to development environment to test and debug it
Disadvantages:
  • some very particular native functionalities are hard to be implemented comparing with a native application

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Send a Message

Sed diam nonummy nibh euismod tincidunt ut laoreet dolore magnais.