There are too many frameworks to choose from which achieve the same thing and certain key features can be crucial for the future of the framework. I do believe that the Ionic team has made really good choices for the next version of Ionic, which will be released sometime January 2019; some great features are PWA toolkit, capacitor and web components. Let’s discuss some of them… but first, what is Ionic?
What is Ionic?
What is a Hybrid Framework?
Ionic was based on a popular framework (Angular) and provided a way to access native capabilities using Apache Cordova. On top of that, it provided themes so the buttons and items look native to the platform without any code change. In a nutshell, Ionic apps run on the mobile browser; but the themes and the ability to access native hardware such the camera, make them look like native applications.
Ionic weak points were:
- Runs on the browser: There are fears that Apple may not allow WebView apps on the App Store. These are the same fears as in 2013; and as 2019, not a single Ionic app was removed from the store because of the framework.
- Performance: Because it runs on a web view (browser) it is slower. The main performance issues were fixed in Ionic 2/3 and now, for standard applications in standard devices Ionic performs very well. Unless you have huge data sets or graphic intensive applications, Ionic should perform quite well.
Ionic 4 new features
Ionic 4 brings huge improvements to the platform. Ionic has transition from a mobile Hybrid framework to an universal framework: You can build hybrid, web and desktop apps.
For me there are 3 key new features which will make Ionic a trend in 2019. Check this video explaining the new features.
I already talked about this, this is huge. Web components are a set of web platform APIs that allow you to create new custom, reusable, encapsulated HTML tags to use in web pages and web apps. Ionic uses Stencil.js library for its components which is based also in TypeScript. Web Components are here to stay. They are under the umbrella of WC3 and the main IT companies. Check this complete tutorial regarding Web Components.
React and Vue.js Support
Yes, besides the amazing Angular 7 integration now you get support for React and Vue.js. Check this article which compares React vs. Angular.
PWAs and Capacitor
Ionic now fully embraces Progressive Web Apps, which I talked on my last article. Think about PWAs like web apps which add basic native features like home screen icon, camera access, offline mode, etc; into your smartphone.
Capacitor is the natural replacement for Cordova to access native capabilities when you run on your mobile. But is is more than that:
Capacitor is a cross-platform app runtime that makes it easy to build web apps that run natively on iOS, Android, Electron, and the web. We call these apps “Native Progressive Web Apps” and they represent the next evolution beyond Hybrid apps.
The same API call can be used to access a feature on the web, desktop or mobile.
It bring performance improvements and it is backwards compatible with Cordova. On top of that, it provides PWA elements, making the dream of a single code base a reality; Capacitor APIs will detect your platform and act accordingly; for example, if you try to access the camera it will check if you are running as a PWA and use the Web API, or if you are running natively it will use the Ionic Native plugins. It will also work on the your PC thanks to Electron. Check this video for more details about Electron.
You can use the DevApp to test in real devices.
Upgrading Ionic 2/3 to 4
Despite this huge set of new features, upgrading is easy:
- Capacitor is backwards compatible with Cordova.
- Angular 7 is super easy to migrate.
- You can add Progressive App Features one by one.
For example, Ionic 4 uses the new Angular 7 navigation and new styling but it is still backward compatible with the old code; so you can migrate features one by one. You can still use your old Cordova libraries and slowly replace them with Capacitor.
Ionic vs… Flutter vs. NativeScript vs. React Native
Have a look to this great video which compares the different hybrid frameworks but bear in mind that Ionic is now an universal framework which can now be used to build web and even desktop apps using Electron.
In my opinion, if you are building just a hybrid application then do a research regarding different frameworks, there are a lot of options; but if you want to also build a website or desktop app look no further, Ionic is the way to go.
- React Native is popular and fast but harder to use and only support React.
- NativeScript supports Angular and React and is also easy to user and faster than Ionic; but still more difficult to implement and way less popular
- Flutter is getting a lot traction, it is a great framework and you can build unimaginable user experience that you can only do with real native apps. It uses Dart programming language which is meant to be the main language of Google’s next OS Fuchsia. However, it is in its infancy and learning a new programming language could be challenging.
- Easy to use and to learn.
- Angular 7 + TypeScript. Including Angular tooling.
- Universal Framework: iOS + Android + Windows Phone + Web + PWA + Desktop.
- PWA + Native Features under the same code base.
- React + Vue Support.
- Open Source and based on web standards.
- Native Themes and Material design.
- Performance. Much better and similar to NativeScript but lower than Flutter.
- Runs on the WebView. App Stores may not be happy with this.
When should I use it
- Your main focus in Web then mobile.
- You are already using Angular.
- You want to migrate to a PWA but you still have users using your App and you want to provide a soft transition.
- You have low budget and you want to build a web site and mobile apps.
- Your app doesn’t need advanced UX, graphics or does not handle lots of data.
- You want to rely on open standards. You want to avoid updating your libraries every 2 months.
When I shouldn’t use it
- Games or graphic intensive apps
- Complex apps with lots of data and complicated state machine. Use React Native or Flutter for this.
- You want to build amazing user experiences and UI design is key for your business success.
- You are already heavily using the React ecosystem and you want a great GraphQL integration using framework such as Vulcan or Gatsby.
Many people in the developer community think that Ionic is dying but with Ionic 4, the Ionic team have made important improvements that will make a Ionic a great choice for a huge number of use cases. It is widely used, has great support, has a great ecosystem, it is based on open standards, it is fast, has a great team of developers behind and it is open source.
Check this great video explaining why you should use Ionic. For me, there’s going to be a healthy competition between the React ecosystem (React Native, Gatsby…) and the Angular ecosystem with Ionic. In my opinion, if you are a modern startup with heavily front end developers and nice looking UIs, you may be more interested in the React ecosystem. If you want to be productive, focus on business value, reduce costs and create reliable apps, go with Angular/Ionic. Ionics fills the small gap left by PWAs.