#Why Ionic 4 Will Be Awesome!
There are at least three reasons why Ionic 4 will be a real game changer:
#What is Ionic?
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
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.
Want to learn more about Ionic? Don't miss my Complete Guide on Ionic + Angular! You'll learn all about Ionic (with Angular) in that course! The course was recorded with Ionic 2/ 3 but will be fully updated (from scratch) to Ionic 4. You get the upgrade for free, if you enroll before it's released!
#What's the big difference to Ionic 2 or 3?
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).
#Ionic 4 is framework-agnostic
That means, it'll work with any frontend framework - or none at all!
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>
#Ionic 4 uses cutting-edge, future-proof technologies
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!
Ionic's web components are built with a tool called Stencil - which was also developed by the company behind Ionic. You don't need to use Stencil or learn anything about it to use Ionic. But if you are interested in understanding how web components are built, I got a complete course that might be interesting to you!
#It's never been easier to build cross-platform apps
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!
Related Premium Courses
Ionic - The Complete Guide
Check out my complete guide on Ionic. I am updating it to version 4, making it the best resource to learn Ionic + Angular
Angular - The Complete Guide
Knowing Angular is a pre-requisite to using it with Ionic. This course takes you from Angular novice to expert!
Web Components & Stencil.js
Ionic is built with Web Components via a tool called Stencil.js. Learn all about this exciting technology in this course!