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.
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 two parts:
- A short review, the idea what it is actually for and its comparison to React Native.
- A review of UI-libraries and a built-in API to access Hardware API.
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.
