Announcing Ionic 6

Hello,

When we will get the hot reload feature in ionic. Like Flutter and react.

Ionic 6 looks great.
Any chance of a Kitchen Sink app demonstrating best practice for real-world apps? Ideally this would be Ionic only i.e. no framework, just pure JS.

Kind Regards, Garry @ TriSys

First a big THANK YOU for the whole ionic team :+1:
I was waiting for the ion-input style updates for a long time now.
Yet Iā€™m still stuck trying to use the outline style as youā€™re showing in the window.
Can someone help me out ? Documentation doesnā€™t give me any hint.
I already tried but no luck :frowning:

3 Likes

Really looking forward to try this out after the holidays!

Just a thought, in the name of ā€œensuring that Ionic is easy to useā€. The ion-label.ion-text-wrap, ion-label[text-wrap] is far from natural to use, and poorly documented. A dedicated @Prop({ reflect: true }) textWrap: boolean; would produce much better documentation and ease of use.

To me this use-case is comparable with ion-button[fill][expand][size] or ion-*[color].

Ionic 6 :heart_eyes: Thanks to the team for a great job :clap: :muscle::+1:

Looks so great!
The new Ion-Datetime is always inline and not as a popover. Am I missing something?

so excited!, big applause to the ionic team :raised_hands:

Yuhooo. So excited. Big shout out to the team. Particularly very excited about the esbuild support. Will it be enabled by default for all ionic angular apps? or something has to be done.

Also, whatā€™s going to be ionicā€™s plan for Cordova, as capacitor grows popularity, will ionic continue to support Cordova in the future?

Im Hyped and i will migrate my ionic5 App asap to 6. Are the Docs updated too? They are lacking much Infos especially about Ionic React.

Gladfully leaving Xamarin behind and using Ionic. Canā€™t wait to see the benefits!

2 Likes

Hey Mike,

what are the instructions I need to follow to upgrade my whole setup?
I mean how to upgrade the global installation of Ionic on my computer.

Example:
If I create a new project today I get this (below).
Did I create an ionic 6 app, hence it looks like I have Ionic 6 already installed?

$ ionic info

Ionic:

   Ionic CLI                     : 6.18.1 (/usr/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.0.1
   @angular-devkit/build-angular : 13.0.4
   @angular-devkit/schematics    : 13.0.4
   @angular/cli                  : 13.0.4
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

   Capacitor CLI      : 3.3.3
   @capacitor/android : not installed
   @capacitor/core    : 3.3.3
   @capacitor/ios     : not installed

Utility:

   cordova-res (update available: 0.15.4) : 0.15.3
   native-run                             : 1.5.0

System:

   NodeJS : v14.17.5 (/home/me/.nvm/versions/node/v14.17.5/bin/node)
   npm    : 6.14.14
   OS     : Linux 5.4


Thanks!
Gustavo.

There isnā€™t an upgrade you need to do on your system in order to create Ionic 6 projects. The Ionic CLI uses the starter projects as a base. Since those have been upgraded to Ionic 6 by the Ionic team, whenever you run ionic start youā€™ll by default get an Ionic 6 project.

1 Like

Havenā€™t noticed this before! Iā€™d say update and test it out. If you still have issue, try to open a new forum post with more details and a reproduction.

The frameworks you use (Angular, react, and Vue) all have their own reload/hmr experience that you can make use of.

So Ionic does have hot reloading.

We have the conference apps that people can look at for reference. As for no-framework examples, we donā€™t have any as we suggest folks use a framework for proper structure and scalability.

Nope, youā€™re not missing anything. Datetime has been designed to be inline by default now, which follow how the design guidelines from apple/google state they should be used. If you want to present the datetime in an overlay, you can wire that part up yoursef.

Docs are updated and have the same information across Angular, React, and Vue.

Please note that you are referring to the CLI, which is not the same as the UI framework. Your app that was created is using @ionic/angular@6.0.1. This is the correct version.

1 Like

We already have a ā€˜proper structureā€™ and built our own internal, proprietary pure JavaScript industrial-strength framework long before Ionic or the other frameworks existed. I was really looking to see how to plug Ionic into our code base, but your comment suggests that it will not be possible for the reasons I outlined?

The mere absence of a demo app to your requirements does not imply the UI framework wonā€™t be able to work according to those same requirements, right? At least, if I read your reasoning correctly.

The best way to try and see if it works in your proprietary way-of-working, is by doing a simple proof-of-concept. And using CDN makes it quite easy to plug-in UI components and then play with it. Pretty sure no Kitchen sink demo will beat such a test!

If you by then are still interested using the Ionic UI, then the individual component documentation as well as the demo app source code op github, likely gives all you need in vanilla js, to enjoy the full potential to its max.

At least, that is how I would look at it if I am compelled to use UI components of Ionic in existing apps.

Thanks for your comment. Of course the ā€˜kitchen sinkā€™ app, if you had one, would allow non-developer decision makers, and indeed busy developers with little time, to evaluate whether our business should invest in Ionic quickly and effectively with minimal effort on our part. This is the view of potential customers Iā€™m afraid who value convenience.

@mhartington very nice release, now it is time to be productive again after stalled in beta and RC for several months :smiley:

btw, any chance to make ion-datetime component more friendly for desktop usage? day selection is fine but month and year selection is not so friendly IMHO for desktop usage. I have to scroll to change the value but scrolling up or scrolling down would not get exact value+1ā€¦ I donā€™t know if other member feel the same about this component in Desktop mode.

edit: I know it can be controlled using arrow on keyboard, but I am referring to mouse usage

anyhow, great releaseā€¦ and it will be better if above comment can be addressed so I (and other Ionic user) donā€™t have to use external library or build our own component to achieve better datetime picker in desktop

Two questions;

  • Can I use Ionic 6 purely as a tool to compile my own Javascript / HTML?
  • Theoretically could I use Ionic 6 to compile a game built using the phaser framework?