Announcing Ionic 4: Neutronium!

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/

35 Likes

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.

2 Likes

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

3 Likes

I am having issue adding plugin to my ionic v3 project

1 Like

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

1 Like

Solved already @mhartington helped with it

1 Like

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

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?

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

1 Like

Any idea when docs for Vue will be avaliable?

How to upgrade from 4.0.2 to 4.1.0?

I assume:

npm install @ionic/angular@4.1.0 --save

There used to be update instructions (v3 branch)…

Hi all,

I’m in the process of migrating Ionic 3 application to ionic 4 and my current angular version is 6.

Can we upgrade to Ionic 4 without upgrading to Angular 7?

I couldn’t find any minimum requirement information or documentation.

The Vue docs are available now in terms of usage, but we still have some work to do for things like navigation guides and such. Example of action sheet usage: https://ionicframework.com/docs/api/action-sheet#usage

Yes that is the correct way to update. You can also use the --save-exact flag if you’d like to keep the exact version. We have some information on updating dependencies in our documentation: https://ionicframework.com/docs/faq/tips#updating-dependencies

However, if you think it could be easier to find please create an issue with suggestions on our docs repo, thank you!

Hi there! Ionic 4 should work with older versions of Angular. However, we haven’t done extensive testing on older versions. So in theory the answer is yes, but if you run into any issues trying to upgrade please create an issue on our ionic repository. Thank you!

Heloo Brandy , i have a problem in a forum , any help will be appreciated , can u help me please ? Regards

To tell you the truth … I’m getting tired learning Ionic all over again on every release !! …
everytime I think I’m an expert, I need to re-learn how to do things that I learned to do in two seconds in the previous version …

Really really bad, you decided on an approach - STICK TO IT !

1 Like

Thanks for the feedback! That is basically the point of this major release. :slightly_smiling_face: With this release we are moving to web components and the latest web standards which are supported natively by modern browsers (and polyfilled for older ones). In previous versions of Ionic we were dependent on the Angular release cycle and its syntax. Ionic 1 was based on Angular 1, and with the release of Angular 2 (and the syntax changes) we had to update the syntax for Ionic 2. In addition, there weren’t many breaking changes in Ionic 3, it was mostly just updating Angular: https://github.com/ionic-team/ionic/releases/tag/v3.0.0. A lot of times we were behind in updating Angular dependencies because we needed to update our core components in order to work with the latest Angular version before we could get a release out.

The best part of Ionic 4 is the core components are simply custom elements. You can use them without a framework or inside of an Angular, React (beta), or Vue (beta) app because we add bindings to work with those frameworks. You can also take an Ionic component and throw it in any webpage or online editor without a framework: https://codepen.io/brandyscarney/pen/maOabQ

With Ionic 4 we are also becoming more strict about using Semantic Versioning. You can read up on that here: https://ionicframework.com/docs/intro/versioning. What this means is we will only release a major version (which is the only version that can include breaking changes) of Ionic a minimum of every 6 months.

Another important change we’ve made with Ionic 4 is taking a step back and letting the framework of your choice handle tooling. This will introduce some changes to your app, but this is the best way to keep up to date with the framework’s tooling.

In the end we think you’ll be happy with the move to web components. We’re using web standards decided upon by the browsers, seeing increased performance in Ionic apps, and allowing developers to choose what framework they want to use and update its versions independent of Ionic.

All of these changes did require some breaking changes, but they were necessary in order to fix some of our long outstanding issues. We’ve done our best to keep a log of the breaking changes for an Ionic Angular app. I’d be happy to answer why a breaking change was made, but we have some descriptions in that file on why they were made as well. Hopefully you’ll find our migration guide and migration linter will help in updating.

If you run into issues with our migration guide or any of the documentation, please create an issue on our ionic-docs repository. Thanks!

1 Like