I am beyond excited to announce Ionic Framework
4.0.0 Neutronium !
“Ionic for Everyone”
We’re calling Ionic 4 “Ionic for Everyone” as it is the most accessible and future-proof version of Ionic that we’ve ever built, while also being the fastest and most complete.
With today’s release, Ionic Framework is now distributed as a set of Web Components using the Custom Elements and Shadow DOM APIs available in all modern mobile and desktop browsers.
This means that practically every web developer in the world can now use Ionic’s components in their mobile, desktop, and Progressive Web Apps—just by using Ionic’s custom HTML tags in their app.
The Best Ionic Yet
Every one of the nearly 100 Ionic components has been evaluated for performance, theme customizability, and platform look and feel. We’ve seen significant improvements on First Meaningful Paint for developers using Angular with Ionic 4, and this is just the beginning.
Built for Customization
One of the biggest changes under the hood is the move to using native CSS Custom Properties, also known as CSS Variables, in each component. CSS Variables allow a developer to modify the look of Ionic components without knowing the internals of its Sass/CSS styles.
More on theming with CSS variables can be found in our documentation: https://ionicframework.com/docs/theming/css-variables/
Today we launched a major revamp for the official Ionic Documentation, which along with dramatically improved performance also includes a simpler design focused on content, and an easier-to-navigate organization. We’re not quite done with the documentation, but we believe the combined components and API reference make it easier for developers to find the information they need.
Check out the new docs here: https://ionicframework.com/docs/
Use your Framework’s Tooling
With Ionic 4, we now use your framework’s official tooling for building, bundling, and routing, so you can get the most out of your framework’s ecosystem and we can focus on what we do best.
That means you’ll use the Angular CLI when using Ionic with Angular, Vue CLI with Vue.js, and so on.
Read more on framework tooling on our blog here: https://blog.ionicframework.com/let-framework-do-its-job/
React and Vue, too
Our official Vue.js and React bindings are currently in alpha and you can expect them to be a big part of the Ionic 4 developer experience going forward. We are incredibly bullish on these two frameworks and expect that the majority of Ionic developers will eventually build apps with one or both.
We want to extend a huge “thank you!” to the entire Ionic community. We’ve been teasing Ionic 4 for a while now, and in an ecosystem filled with change and uncertainty, we are grateful to have had your trust and patience throughout the entire process.
We also want to thank the Ionic community members who took a big bet on Ionic 4 and shipped real apps even though it was alpha and we said very clearly it wasn’t production ready .
Last but not least, we want to thank the wonderful contributors that have stepped up to help Ionic 4, whether that was by submitting PRs, helping test new releases, or creating educational content for the community: None of this would be possible without your help.
Getting Started and Migrating
Getting started with Ionic 4 is easy. Follow the Getting Started Guide, or create a new project directly from the Ionic CLI:
npm install -g ionic # Update the Ionic CLI ionic start awesome-app
For teams looking to migrate from an older version of Ionic to Ionic 4, we can help! Along with a fully-supported version of Ionic Framework for Enterprises building mission-critical apps (including Cordova/Capacitor native plugin support!), we have Advisory Services available for teams that need assistance. Plus, we’ve also published a Migration Guide for self-directed migrations, along with some tools to help ease the process.
Looking for the old Ionic 3 documentation or source code? See the following links:
- Documentation: https://ionicframework.com/docs/v3/
- Source Code: https://github.com/ionic-team/ionic-v3/
- Documentation: https://ionicframework.com/docs/
- Migration Guide: https://ionicframework.com/docs/building/migration/
- Angular Breaking Changes: https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md