Announcing Ionic 4: Neutronium!


#1

Hello Ionites! :wave:

I am beyond excited to announce Ionic Framework 4.0.0 Neutronium ! :balloon:

“Ionic for Everyone” :globe_with_meridians:

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 :zap:

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 :art:

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/

Revamped Documentation :spiral_notepad:

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 :a:

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 :scream:

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.

If you’d like to try the alpha versions today, take a look at the React README and the Vue README in our repo. Don’t worry, we will make it way easier to use these projects soon.

Thank you :heart:

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.

Ionic 3

Looking for the old Ionic 3 documentation or source code? See the following links:

Useful Links

https://blog.ionicframework.com/introducing-ionic-4-ionic-for-everyone/


#2

#3

congrats ! :champagne: :partying_face: game changing stuff!

i’m hoping at some point you will get some time to pad out the docs around the really cool ionic generate . As a bit of a noob, i’d really like to be able to know the differences between ionic features that are being generated and how they work and differ. For example I can’t find anything about what a directive is and how it works.


#4

Thank you for the feedback! I created an issue on our documentation site to get this added in: https://github.com/ionic-team/ionic-docs/issues/343


#5

I am having issue adding plugin to my ionic v3 project


#6

this is because of updating plugin versions you can solve your problem by downgrade versions of plugin.


#7

Solved already @mhartington helped with it


#8

#10

what happened to " Instance Members" in docs.
Can’t find it.


#11

Is Ionic 4 using Angular Ivy rendering? According to this blog https://blog.ionicframework.com/ionic-framework-4-0-rc-shipped-paving-way-for-final/, it seems it will use Ivy. If yes, do I need to set a flag to use Ivy, or it is by default?


#12

@qxu99in When Ivy will be production ready is up to Angular, not Ionic. In the blog post you can see:

We’re really excited about Ivy and can’t wait for it to ship.

(meaning that it has not shipped yet, by default at least)

Based on what I know, Ivy is still not production ready and is not enabled by default, although you can enable some flags to use it. You can see it and track the current state of Ivy subscribing to the official angular issue: