Ionic framework - a retrospective toolkit review (part 1)

Here comes a series of articles from Andrey, a developer from Noveo, about his experience with Ionic Framework for cross-platform development.

Frontend is developing like crazy nowadays. There are new frameworks and libraries appearing each week and old ones are losing their hype or even getting deprecated. At such a pace it is hard to find what you should learn first and what you should leave for later.

Noveo Ionic Framework expirience

Once we glimpsed Ionic Framework which granted us the possibility of cross-platform development with a single codebase. In this article I am going to walk you through the basics and you will be able to see for yourselves if it's worth learning.

The article consists of several parts:

  1. A short review, the idea what it is actually for and its comparison to React Native. 
  2. A review of UI-libraries and a built-in API to access Hardware API.
  3. A tale about gotchas and if it is a worthy solution for your product.

I. Ionic React. Review

Ionic Framework is an open-source product consisting of a cross-platform UI library and some built-in functions for creating iOS, Android, Electron and Progressive Web Apps using JS framework and standards- based web technologies.

Ionic Framework has support for Angular, React, Vue.

The application works with WebView  - a special built-in browser implementation within a native application. WebView offers a great number of HTML5-API (cameras, GPS, Bluetooth etc.). There is a need sometimes to access some specific Hardware (API - provided by this or that OS). It can be accessed through a bridge layer.

I.1 Killer feature

In today's world a product can run on different platforms: Web, Desktop, Mobile. And often to support the three platforms it takes 3-4 teams. And even worse than that, each team has its own codebase and they will have to ship same features 3-4 times.

And here comes  Ionic Framework shouting out loud "Hold my beer!" and chanting "Write once, run anywhere".

The developers of the framework promise that the following can be built from a single codebase:

— SPA (Web Application);

— PWA;

— Electron-based application for a desktop;

— Native-like applications for iOS and Android.

It seems like a silver bullet and the framework will allow to save a lot of money during the development phase and make sure the features are shipped to all platforms at the same time.

Capacitor - a hybrid app runtime created by the team enables developers to build one app regardless of the platform from a single codebase. 

Capacitor - it is where an Ionic application runs which makes it easier to deploy  web-applications on their own platforms such as iOS, Android etc.

Ionic already contains all the scripts which compile and decompose the builds to the required folders. Although there is still some room for imperfections. These scripts carry out the build through their native IDE for each platform. So, it won't work out if you want to have an iOS build out of windows thus you need xCode.

The rest is easy - copy the commands from the official guide - CLICK.

I.2  What about React Native? 

A careful reader might ask "What about React Native? Isn’t it what it is actually doing right now?"

There are some pros and cons of both React Native and Ionic React.

Let's start with the downside of Ionic React:

- Fake nativity: the use of WebView, web technologies, slower applications

- Use of native-like UI components not the actual ones (it may be inconvenient)

 Now the advantages: 

+ React-stack under the hood, you can easily create your first ionic application in the evening and in the morning you will have your Web-app ready, native iOS and Android applications, also PWA and Electon versions.

+ If a component from the native UI library doesn't suit for some reason you can create your own one or use one from hundreds of thousands of packages. It will easily with no beating around the bush transfer itself to all your applications.

+ A single codebase. Development costs optimization, faster feacher delivery to a user etc. 

+ Easy project onboarding.

  React Native

Ionic Framework

Stars on GitHub

91.3k

42.9k

Tech stack Profound JS  knowledge and specific React+React Native knowledge is required

Basic HTML+CSS + JS knowledge is enough. It can be used for any framework: React, Angular, Vue, Stencil

Learning curve Pretty steep in case of a junior React  developer. Java/ Kotlin/ Swift  knowledge might be needed Flat. Basic knowledge is enough. A familiar framework can be chosen
Codebase Common for Android and iOS. It can’t be reused for Web-app/Electron App/PWA

Common base for any platform with any OS

Testing

A device or an emulator is needed

Browser testing during the development phase

Performance

Performance is close to the one of a native application

WebView is used. There is performance loss
Community Developed by Facebook, a big community A very responsive community but not a big one

Instead of a conclusion

Ionic framework seemingly is making a big statement and promise to solve all our problems with multi platform development decreasing its costs alongside and speeding up feature delievery. 

At least this candidate is worth being considered. Have a look at their demos (https://stackblitz.com/edit/ionic-react-demo  - a music player demo) to make up your mind if it is a convenient tool for you.

We will go on to look at the UI library and API to access hardware functionality. I will also share my own development experience and the list of "gotchas" (which are not often evident ones).