Ionic Framework v4 RC Shipped, Paving the Way for 4.0 Final
We’re thrilled to announce that the release candidate for Ionic 4.0 (codenamed “Neutronium”) has shipped!
This release brings many performance improvements and bug fixes for issues in our alpha and beta releases, along with (and most importantly) stabilizing the API and paving the way for the final version of 4.0, expected in early 2019.
What’s in a codename anyway?
In the spirit of components and elements, we’ve codenamed the fourth major release of Ionic Framework “Ionic Neutronium.”
Neutronium, neu·tro·ni·um, noun:
The hypothetical chemical element of atomic number zero at the head of the periodic table.
Each minor release will follow the periodic table by atomic number 🤓 (Ionic 4.1 Hydrogen, Ionic 4.2 Helium, 4.3 Lithium, etc). Additionally, now that the API has stabilized and we’re confident in patch and minor releases, you can expect scheduled and predictable releases to help better plan your app development.
Performance Improvements
From the ground up, Ionic v4 was built to improve app startup times, especially on mobile devices. With smaller file sizes and faster startup times, Ionic v4 ushers in a new wave of performance-minded apps on iOS, Android, Electron, PWAs, and all things web!
The Ionic team has maintained a mock “Conference” app for internal testing, and we use this as a consistent feature-equivalent app for comparisons across Ionic and framework versions. Here are a few small samples of improvements seen when upgrading to Ionic Neutronium:
Here we see the Ionic Conference App on iOS with V3 on the left (before) and V4 on the right (after).
And here is the Ionic Conference App on Android with V3 on the left (before) and V4 on the right (after).
As you can see in the above examples, Ionic has made some significant improvements between versions. But what I’m most excited about is that this is just the beginning of significant improvements to come from Ionic and from the frameworks Ionic integrates with.
For example, for Angular users, the new Ivy Renderer, Angular’s fastest and smallest renderer yet, will be a big win for all Angular and Ionic developers, especially on mobile when it lands. Impressively, a simple Ivy “Hello World” app reduces down to a size of 2.7kb. This is one example of the improvements that Ionic users can expect now that Ionic integrates with official framework tooling. We’re really excited about Ivy and can’t wait for it to ship.
Beyond Angular Ivy, the Ionic components themselves also have a lot of potential for additional performance improvements that will further reduce their size and improve startup times. We’ve only just begun!
Rethinking UI Library Distribution
One of the biggest challenges for Ionic developers is how specific versions of Ionic have always been locked into specific versions of Angular. For example, many users were locked into AngularJS projects while the Ionic core team was busy making improvements and fixing issues for Ionic v2. And, even though new features or fixes were made to v2, ultimately those changes were not available to AngularJS users.
The opposite dilemma also occurred. For example, when Angular shipped a new version, but Ionic hadn’t yet made the necessary updates to the core of our components, users were stuck on our supported version of Angular. In either direction, this issue often left applications and developers stuck on certain versions of Angular, which caused them to miss out on new features and performance improvements.
For all of these reasons and more, we decided to rethink how a UI library should be built and how Ionic could step outside of the framework’s runtime in order to overcome some of these problems. With the introduction of Ionic Neutronium, the core of our components now use standard Web APIs like Custom Elements and are capable of lazy-loading themselves on-demand. The ultimate goal is that both Angular and Ionic, or any framework for that matter, can iterate and improve independently, while developers can take advantage of these improvements with fewer restrictions.
Supporting Angular Tooling
Back when Ionic v2 first launched as a companion to Angular v2, both the Angular CLI and Router were still under heavy development. However, Ionic users still needed to ship apps, so the Ionic team had to build custom solutions for routing and building Angular apps.
Fast-forward to today, and both the Angular CLI and Router have become production ready and capable of native-style navigation that Ionic apps require. With this latest major release of Ionic, we felt it was a good time to shift gears and adopt official tooling in order to better serve Angular developers.
Additionally, we recently added support for Angular schematics, so Angular developers can run ng add @ionic/angular to add Ionic directly to their app! It’s never been easier to use Ionic and Angular together.
Angular, React, and Vue—OH MY!
We often receive feedback from developers that they enjoy using Ionic within their Angular projects, but would also love to continue using Ionic in their other projects based on React or Vue. This, too, was a driving force behind Ionic Neutronium and our move to decouple Ionic from any specific version of one single framework’s runtime and component model, and to focus on standard Web APIs that work everywhere.
In fact, this vision was actually the one we started Ionic with way back in 2013, but the web platform and frontend ecosystem wasn’t quite ready for it yet.
Our current release for @ionic/angular is a great example of this today. And with the help of the amazing Ionic community and Modus Create, we’ve already released our alpha version of @ionic/vue. (Our very own Josh Thomas did a great walkthrough on using Ionic + Vue together).
And yes, absolutely, 110%, @ionic/react is well underway, so expect more news on this front very soon!
On the subject of frameworks, something that’s very important to us is that Ionic fits right in with any framework’s developer experience and tooling (which, also further explains why we transitioned to use ng-cli and ng-router). While Ionic v4 may be using Custom Elements under the hood, we’ve worked hard to ensure developing with Ionic, in any framework of choice, works exactly how the developer would expect it to work.
All of this is a testament to the powerful APIs already built directly into the browser, which Ionic has been able to leverage and take full advantage of since our inception. The best part is: Any features and bug fixes released within @ionic/core (the reusable web components everything is built on top of) is immediately available in each framework.
What’s Next
Obviously, the final 4.0.0 release is our top priority. We’re already confident with the current release candidate, but we’re ensuring the release is good to go before we finalize it. No API changes or new features are planned between now and the final release.
All of that said: We need your help before we finalize v4! As you begin to test the RC, please open issues and provide us with any feedback necessary to help us ensure that v4 is working well for your applications. Any critical issues will be fixed, and a new release candidate will be shipped and tested again.
And like I said, this is just the beginning! After the 4.0.0 release ships, we’ll get back to work and focus on continued stabilization, predictable release schedules, closing out issues, shipping patch releases, and continued improvements to the design and components. We can’t wait to hear what you think about the release and see what you build.
Thanks again to the wonderful Ionic community for your support, and happy coding!
Ionic Framework Resources
– Getting Started: Building Your First v4 App
– Migration Guide
– Framework Docs
– RC Release Issue Tracking
