Why Ionic 4 Will Be Awesome!

There are at least three reasons why Ionic 4 will be a real game changer:

1. Ionic 4 can be used with any frontend framework (or none at all)

2. Ionic 4 is built on cutting-edge yet established web standards

3. It's never been easier to build performant cross-platform apps

Before we dive into any of these reasons, it's crucial that we all have the same understanding of what Ionic is. Because it's more than just a set of nice-looking components and it's also more than a "turn Angular apps into native mobile apps" solution. And in case both these possible definitions were news to you, you should definitely read on and understand what Ionic is about :-).

In the end, Ionic is a collection of technologies or tools (offered by a company also named "Ionic") that help you build beautiful cross-platform (web, native mobile, desktop) apps with little effort.

This is achieved with three main building blocks:

• A suite of beautiful, platform-adjusting (style-wise) web components with rich functionality

• A technology named Capacitor (replaces Cordova) to wrap your web app into a native mobile app (by using a Web View) and provide access to native device APIs

• The Ionic CLI to create and manage Ionic projects and run + build Ionic projects for different platforms

All these different parts can be combined to build web and native mobile apps (which can really be distributed through the Apple AppStore and the Google Play Store) that look and feel like "regular" native mobile apps.

And in case you don't need a mobile app, you can stick to a normal web app and still use the good-looking and feature-rich components from the Ionic component suite.

I'm glad you asked!

As I wrote at the beginning of the article, Ionic 4 has the potential to become a real game changer - here are the three reasons why that's the case (which also answers what the differences compared to Ionic 2 or 3 are).

That means, it'll work with any frontend framework - or none at all!

No matter if you prefer Angular (the only framework that was supported historically by Ionic 2 and 3), React or Vue, or if you want to work with vanilla JavaScript - you can now do that and still integrate Ionic into your application.

This is a HUGE win because you can now start using all these powerful components offered by Ionic - which are not just beautiful but actually contain a lot of JavaScript logic.

This code works, no matter how you're writing the rest of your user interface:

<ion-list>
  <ion-item>Apples</ion-item>
  <ion-item>Bananas</ion-item>
</ion-list>
<ion-button color="primary">Add Item</ion-button>

In the past, with Ionic 1 - 3, Ionic was built upon Angular. It was essentially a library of Angular components and also provided all the tools you needed to turn your Angular web app into a native mobile app (by using Cordova to wrap your web app).

With Ionic 4, that web-to-mobile tooling is still provided - though via Ionic's own technology, Capacitor.

But the first part, the component library was completely overhauled.

Instead of shipping a suite of Angular components, Ionic now uses web components for all its components.

Since the web component specification is supported by all modern browsers, these custom HTML elements work out of the box. And in places where they wouldn't work, Ionic automatically loads required polyfills. That's simply amazing!

The big advantage of this approach is not only that the components can be slimmer (only JavaScript is required to build web components, no framework!) but also that there no longer is any dependency on Angular. You can now start using the Ionic components in ANY kind of web app, no matter which framework you might be using (if any).

So Ionic makes the creation of good-looking user interfaces easy.

It doesn't stop there though!

As mentioned before, Ionic also gives you the tools to take your web app and convert it into a native mobile app - it always did that!

In the past, it used Cordova as a web-to-mobile wrapper. And you can still use that with Ionic 4.

But the Ionic team also worked on its own solution: Capacitor.

Generally, Capacitor does the same Cordova did but it simplifies the process and the API you can use inside of your Ionic web app to tap into native device features.

Therefore, the process of turning your web app into a mobile app (which then is able to use native-device features like the camera) is also made simple.

But what about performance? Isn't it a problem that the web app simply gets wrapped by a native app instead of being compiled to real native code?

The thing is: A compiled app of course has a higher performance cap - code that's closer to the platform it runs on will naturally be faster than code that's wrapped by native shell and bridge.

But there are three things that have to be kept in mind:

• Modern devices are pretty fast. The vast majority of Ionic apps you'll be building will very likely come nowhere near the performance limit of the device

• Bad-written compiled code will not be faster than well-written wrapped code

• If your app is really performance-critical, you might want to consider going full native (i.e. use ObjectiveC/ Java)

The second argument is not to be overlooked: All the approaches that compile parts of your web app into native code come with their own problems. If you ever worked with React Native or NativeScript, you have been in these situations where you have a lot of problems implementing a certain feature that would've been a breeze to implement in a web app.

You will run into WAY less such situations when using Ionic - and therefore, your code typically will be cleaner. Hence, you might even gain some performance!

There has never been a better time to start working with Ionic! It gives you so many possibilties, you should definitely check them out!