Q1 Ionic Show Recap

From the live fireworks display to Mike’s interpretive dance segment, the first Ionic Show of the year was truly one to remember. Okay, maybe that’s not quite how it went – but it DID feature Max, Mike, and our product teams talking about where we’re taking Ionic in 2023. Our team talked about new features, new products, and new ways to use Ionic’s suite to do more with less in the coming year. 

Couldn’t make the live show? Fear not – we recorded the whole thing (and have a handy recap for you). 

The theme of 2023 is…

Saving money, something we can all get behind. The Ionic Show opened with CEO Max talking about how 2023 is all about saving costs by betting on the Web. Due to the expense of maintaining independent native teams, we’ve seen a rise in the number of cross-platform apps, with organizations increasingly trying to get more out of their web apps. This has led to a newfound interest in Capacitor (hey, we’re not complaining), so Max wrote this handy blog with everything you could ever want to know. 

Ionic 7 is (almost) here

And it’s packed with new features to make your life easier. Around 11 minutes in, Mike and Framework Team Lead Liam walked through some of the changes you can see in Ionic V7, including:

• Inline Overlays – We’re extending the declarative overlay feature from Ionic v6 to the rest of the overlay components (action sheets, alerts, toasts, etc). You can now use every single Ionic overlay component in your template without relying on controllers.
• Consistent Event Emissions –  Events used to fire whenever value prop changed which caused ionChange to fire at unexpected times. Now Events only fire as a result of user interaction to align more closely with the behavior found in native input elements.
• Simplified Form Control Syntax – Less code boilerplate, improved compatibility with assistive technologies. Developers can continue to use the old syntax until they are ready to migrate.
• Performance improvements – Tab switches are up to 70% faster in Ionic React and Ionic Vue. Ionic components initialize quicker in Ionic Angular thanks to optimizations in Stencil.
• Improved Vite Compatibility – Ionic 7 removed CommonJS entry points for Ionic React and Ionic Vue, which makes Ionic easier to use with Vite and Vitest.
• IonSlides removed in favor of using Swiper.js directly.
• IonVirtualScroll removed in favor of using solutions provided by JS Frameworks – IonVirtualScroll was an angular-only solution, so this change enables all developers to use virtual scrolling.

You can learn more about how to update and migrate in our docs. 

Stencil v3!

Sean Perkins, Engineering Manager for Stencil, took us on a grand tour of Stencil-Land (22:19) as he walked through some of the updates in the latest release, Stencil v3. The primary focus with Stencil v3 was to modernize the codebase, by deprecating support for Safari 10, IE11 and updating the minimum node version to v14. We’ve also updated the Stencil config defaults for an improved developer experience. Source maps are now generated by default and type declaration files will be generated for the dist-custom-elements output. These defaults are configurable and can be overridden if developers run into issues or don’t require these features. 

Stencil’s documentation site has also been updated, with a fresh new design, versioning, updated code snippets and a complete migration guide for upgrading to Stencil v3. 

Capacitor keeps getting better

Around 28 minutes in, Mike decided he’d had enough screen time and turned it over to Product Marketing Manager Conner Simmons and Web Native Solutions PM Dallas James to talk all things Capacitor. 

Auth Connect, our single sign-on and secure user authentication solution, has been entirely re-architected in version 4. Auth Connect 4 marks the first plugin available from Ionic that supports building a Capacitor plugin that can work both in Capacitor and Cordova applications. Auth Connect is also moving to a more stateless plugin architecture, allowing us to give more control to the developers implementing the plugin. 

The team also built a new SSL Pinning Plugin which adds an additional layer of security to your apps by guarding against man-in-the-middle attacks using a certificate handshaking process. Ultimately it strengthens your app’s security and makes it less vulnerable to attacks.

But wait, there’s more! A Background Tasks Capacitor Plugin is coming soon! Background Tasks will open up new possibilities for what Web Native applications can accomplish. Use it to run tasks such as background syncing or updating location data without the user needing to actively interact with the app, making the app more efficient and user-friendly.

Appflow for everybody

We then handed things off to the Appflow team, Cecelia, Ashwini, and Matt, to talk about the latest for Ionic’s Mobile CI/CD solution. Piggybacking off of the support for React Native that we announced in the last Ionic Show, Appflow now has support for traditional native apps as well. With support for Cordova, Capacitor,, React Native and traditional native apps, we are really excited about what Appflow can offer to the developer community and large organizations with multiple codebases..

We’ve also made some recent improvements to the integration of Trapeze within Appflow. Trapeze is Ionic’s native and cross-platform mobile project configuration tool. Using a simple YAML-based configuration file format, you can automate your project configuration for all types of mobile apps, including traditional iOS and Android apps and those built with cross-platform frameworks like Capacitor, React Native, and Flutter. Recent changes to Appflow ensure that using Trapeze is a smooth experience, including the ability to use one Trapeze file for both your iOS and Android builds in Appflow.

There are lots of exciting things coming down the pipeline as well. First, we are working towards bringing our Capacitor-based Live Updates plugin up to parity with the original Cordova-based one. Next, we’ll update the user experience of Ionic Portals in Appflow through some Portals-specific UI and UX changes to Appflow. Finally, our teams are always focused on the safety and security of the Appflow platform and our customer’s data.  As a follow-up to Type 1, we expect to earn SOC 2 Type 2 certification this summer.

A window into Portals

Portals experts Vivek and Josh hopped on around 47 minutes in to talk about all things micro frontends, superapps, and Portals..

With a major community interest in micro frontends, our team is committed to helping organizations get up and running as quickly and smoothly as possible. Recently, we’ve been creating web starters to help get Portals projects moving faster than ever. Native developers no longer need to build a web app to test out Portals connectivity and functionality. Instead, they can grab a pre-canned ready-to-run application and  spin up a quick proof-of-concept for further internal discussions.

We’ve also made some big improvements to Portals itself.  Organizations can now reuse assets across multiple Portals projects with Asset Maps. Now, you can update an asset (like an image) in one location, and multiple locations will update that asset automatically. 

The team also discussed micro frontends for Capacitor apps, which we’re now calling Federated Capacitor. Josh commented how the initial use case was for large organizations with multiple (5+) development teams contributing to the same Capacitor application. In this use case, the presumption was that these teams would take advantage of a monorepo. What we’ve since learned is that these Capacitor features might reside in distinctly different repositories, so we’ve added polyrepo support to Federated Capacitor! Now, companies can reuse existing micro frontends that live in separate repositories. 
We wrapped the show with a live Q&A where the community was able to chat with our experts directly. Thank you all for another great Ionic Show, and we’ll catch you at the next one! You can see the full recording here.