Announcing Ionic 6

Ionic Framework
1

Originally published at: https://ionicframework.com/blog/announcing-ionic-6/

Today I am excited to announce the release of Ionic 6! This release adds improved desktop support, overhauled components, iOS and Android design changes, and so much more! Let’s take a look at what you can expect with Ionic 6. Easy Upgrade :sailboat: While this release of Ionic does bring breaking changes, we strived to…

19 Likes
2

Hey folks! I’ll be here watching this post if you have any questions or comments! Would love to hear from you all!

4 Likes
4

This is fantastic news, and to say I’m excited is putting it too mildly, the team at Ionic has done an amazing job on this release!

One thing that I would love to see more of is documentation for those of us who are “frameworkless”. It’s always been a bit tricky to get Ionic running with vanilla js + webpack setups.

I primarily use lit-html as a renderer and vanilla web components. In the past I’ve had to do some copy steps in webpack to get css etc… working properly, and have had to jump through some interesting hoops on load:

        let ion_app = this.querySelector("ion-app");
        //wait for ionic to load
        let loading_interval = setInterval(
            async () => {
                if(!ion_app.componentOnReady) {
                    console.warn("ionic not loaded, delaying 10ms...");
                    return;
                }

                clearInterval(loading_interval);

                await ion_app.componentOnReady();
                this._ready_resolve();
            }, 10
        );

        await this.ready;

With the new emphasis on core and bundle-ready components without lazy loading, I’d love to know if things like this are still necessary?

Maybe some examples with webpack and/or rollup?

Thanks!!

1 Like
5

Thanks for the feedback @claygulick! I’ll make sure the team is aware and see what we can do.

6

Soooo exicted!!! :rocket: :tada: :rocket: :tada: :rocket: :tada: A big shout out to the Ionic team for the hard work put into v6.

Has the Ionic team heard of any more issues with upgrading a Vue app? It seems that we need to hold off as the Vue CLI has some dependency conflicts. I tried upgrading over the weekend and ran into the same issues mentioned in the issues below.

7

We pushed some updates to the Vue starters today and they should be good now. I’d use this as a starting point.

1 Like
8

Amazing work! Congrats to all team.

Just wondering if there is any news about some drag-and-drop IDE for ionic, like the ionic studio was suppost to be…

9

Thanks for the update.
A couple major issues I didn’t see addressed in the announcement:
Ionic apps look very bad on desktop, yet Ionic always promotes itself as cross platform. The apps end up looking like zoomed in mobile apps unless you re-style everything yourself. All paid or free Ionic templates look bad on desktop as well. A default style for all components for each platform would be great. We can’t use any existing Angular desktop templates because of the Ionic component names. (Open source ionic web app style sheet for desktop screens).

In Angular, OnInit isn’t available due to Ionic routing, so you need to manually call ionViewDidLoad or ionViewWillLoad from all parent components for all child components. The behavior is inconsistent, with ionViewDidLoad etc sometimes being called or OnInit sometimes being called, or sometimes both. We need a consistent way to call component init logic, preferably without requiring the call from parent components, so that a component’s logic can be properly encapsulated.

10

  • “Ionic apps look very bad on desktop”
    I’d argue that is not the case. You can design the apps to better fit larger form factors by picking the right design/components to use. For instance, my app Star Track is built with Ionic and looks great on desktop. If you think it looks bad, I’d suggest trying different layouts.

  • OnInit should work just fine, i’m using it in my app. If you have an example that can demonstrate, please share.

1 Like
11

Incredible news!!!
Looking forward to starting using Ionic 6 on my projects.
Gustavo.

2 Likes
12

I agree Star Track looks fine, but if there were desktop templates that could handle a variety of circumstances such as these : Angular Templates from ThemeForest that worked with ionic that would be a huge help. If you have an open source or paid example that would be great. All that I have found look bad on desktop.

OnInit works on first page load, but not on subsequent page loads due to :

The ionic lifecycle functions take over after the first page load and my experimentation has shown the behavior is inconsistent, with OnInit sometimes being called in conjunction with the Ionic lifecycle functions, and the lifecycle functions themselves sometimes being called and sometimes not. Plus the lifecycle functions need to be called from parent components or pages, which causes a lot of issues in terms of code quality.

13

OnInit will get called only once per-component creation.

If you load up page A, you’ll get

ngOnInit: fired
ionViewWillEnter: fired
ionViewDidEnter: fired

Navigate to page B and you’ll see similar events fired

ngOnInit: fired
ionViewWillEnter: fired
ionViewDidEnter: fired

Go Back to page A, you’ll only see the Ion Events as the component was never destroyed, which has been the default for Ionic for some time now.

14

Hey, I always come back to this great post from Simmon Gimm about desktop and mobile:

I know it is not a template, but the guidelines and the way to tackle issues expressed in his guest post have always helped me.

Cheers,
Gustavo.

15

This is super exciting!! I’ve been using Ionic for 2 years and it only continues to get better!

I love the idea of using Ionic with Vite. I had a quick search but I couldn’t find any official documentation on how to set up an ionic project with it.
Are there any docs that can assist with this? And are there any plans to be able to set up a project with Vite using the ionic cli?

Thanks and keep up the awesome work! :slight_smile:

1 Like
16

The Vue core team has announced that Vite will become the official tools for future releases, so once they make that change, we’ll update our starters to match.

1 Like
17

Wow… i have been waiting for the release…

i have been using ionic since 2017,

please the ion-loading has always had an issue when close .

sometimes it doesnt even close. even when page has finished loading…

hope this has been fixed in this release

18

So thankful for all the work done by you and the Ionic team. It literally allows me to feed my family. And having done native development before it makes more sense to use Ionic wherever possible. Between web standards, Capacitor, Typescript and VS Code it’s such a wonderful experience that continues to get better.

1 Like
19

Bottom sheet, breadcrumbs… this makes realizing my ideas as a UX designer way easier. Thank you! :slight_smile:
Hoping to migrate soon.

1 Like
20

I just love working with the Ionic Framework, thanks so much for your hard work!

1 Like