Ionic 4: All you need to know

Could it be Ionic the final answer to the question: Can I have a single code base for Android, iOS, Web and desktop? In this article I will give an overview of the Ionic framework and focus on the Ionic 4 new features.

Introduction

If you are reading this is because you already know how powerful JavaScript is. You can build Progressive Web Apps (PWA), hybrid apps or even desktop apps using these technologies. 2019 is the year where most of the innovation and development will occur on the client side.

Resultado de imagen de ionic framework

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?

Ionic Overview

What is Ionic?

Ionic is a complete open-source SDK for building performant, high-quality mobile and desktop apps using web technologies (HTML, CSS, and JavaScript). The original version was released in 2013 and built on top of AngularJS and Apache Cordova. The more recent releases, known as Ionic 3 or simply “Ionic”, are built on Angular. Ionic was one of the first Hybrid Frameworks for developing mobile applications.

What is a Hybrid Framework?

Traditionally, companies who want to compete in the mobile market had to create applications for iOS and Android, using their respective proprietary platform; this implied that you had to have separated teams with separate skills to develop and maintain two separated applications with the exact same functionality; which was very expensive. Hybrid apps came to the rescue by providing a way to develop mobile apps using known languages like JavaScript mobile apps for both platforms. A Hybrid framework is a development tool which allows developers to use a single code base and release to both, App and Play stores.

Ionic 2/3

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 gained tremendous popularity since its launch for its simplicity. Developers could develop applications for iOS and Android, with a native look using JavaScript thanks to the power of Ionic Themes, Angular and Cordova.

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.

In short, Ionic 2/3 was basically Angular + Cordova + Themes. You can find more details here and here. Ionic since it uses Angular, uses TypeScript language.

Ionic: Angular + JS/CSS/Themes + Cordova

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.

New Features

Web Components

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.

Check this video for more details about Capacitor. You can get more info here. Check Ionic blog for more details: Release Candidate and Beta.

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.

Check this quick guide for details and see this for a complete list of changes. Braking changes are explained here. Migration guide and tool.

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.

Ionic run on the WebView(browser) and hybrid native frameworks like React Native or NativeScript that use JavaScript but compile to native code which is faster.

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.

To summarize:

  • 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.

Ionic Pros

  • 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.

Ionic Cons

  • 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.
  • You don’t have native developers in your team and their main skill is JavaScript.

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.

Conclusion

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.

The Ionic team also provides enterprise support and tools such as AppFlow for DevOps and Ionic Studio IDE.

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.

I hope you liked this article, stay tuned for more posts regarding this topic. Check Ionic themes website for more details. Follow me for future updates.

Certified Java Architect/AWS/GCP/Azure/K8s: Microservices/Docker/Kubernetes, AWS/Serverless/BigData, Kafka/Akka/Spark/AI, JS/React/Angular/PWA @JavierRamosRod

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store