Ionic 6

Ionic 6 is a CodingCat.dev podcast episode featuring Mike Hartington alongside Alex Patterson and Brittney Postma focused on HTML, Storyblok, React. Mike tells us all about himself and starting at Ionic. Mike gives us a full demo of Ionic 6 and the new components. Watch the full video breakdown on YouTube or explore the architectural notes, chapters, and official documentation links below.

Questions

1. Can you tell us more about yourself?
2. How did you get involved with Ionic?
3. What is the difference between Ionic now and before?
4. How did you use Stencil to build out some of the components?
5. Is there an advantage to using web components over framework components?
6. Is this considered a design system?
7. Web vs Mobile - Capacitorjs.com
8. What is new in Ionic 6?
9. Demo

Additional Links

• Capacitor.js
• Stencil.js

Setting up an Ionic Project

Installing the CLI

npm i -g @ionic/cli

To crate your application you can run the below command.

Choose option no if you would like to remain in the console.

ionic start

You can choose any project type but Mike covered how to start with a blank project. This will automatically enable capacitor and install all of the correct packages.

Warning this will run a long time when installing dependencies

At the very end you should see this message

Technical Overview: Ionic 6

2.32 - Ionic 6 with Mike Hartington: Mike tells us all about himself and starting at Ionic. Mike gives us a full demo of Ionic 6 and the new components. https://codingcat.dev/podcast/2-32-ionic-6 Sponsors: Storyblok
Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 + developers & marketers use it to del

When applying the concepts from Ionic 6 in a production codebase, teams working with HTML, Storyblok, React should align their implementation with the MDN HTML Reference (Semantic markup, accessibility attributes, and document structure). Structuring your workflow around repeatable patterns, automated verification, and clear separation of concerns helps prevent regressions as your application scales.

Key Engineering Takeaways

• Core Topic Focus: Practical strategies for HTML, Storyblok, React covered in "Ionic 6" (Mike tells us all about himself and starting at Ionic. Mike gives us a full demo of Ionic 6 and the new components.).
• Production Implementation: Combine the architectural patterns demonstrated in this podcast with the official MDN HTML Reference for type safety, performance, and long-term maintainability.
• Hands-On Video Walkthrough: Follow along with the live coding demos and discussion on YouTube (Ionic 6) and subscribe to CodingCat.dev on YouTube for weekly deep dives.

Video Chapters & Timestamps

Jump directly to any segment of Ionic 6 on YouTube using the timestamped chapters below:

• 00:00: PM (EDT)
• 00:00: Intro
• 00:00: Hello
• 00:00: Ionic Description
• 00:00: Stencil
• 00:00: Write Web Components
• 00:00: React wrapping web components
• 00:00: Storyblok Ad
• 00:00: Ionic UI Components
• 00:00: Capacitor
• 00:00: How Capacitor iterates faster
• 00:00: Ionic 6 and Mike's fav new components
• 00:00: Is Brittney into Ionic for all things mobile, web, desktop
• 00:00: Mike Demo's Ionic
• 00:00: Purrfect PIcks
• 00:00: Thank you

Resources, Links & Official Documentation

• Watch on YouTube: Ionic 6 Full Video (plus Subscribe to CodingCat.dev)
• storyblok.com: https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=&utm_content=purrfect-podcast
• Show Pick: Angular v14 (picked by Alex Patterson)
• Show Pick: Operator Lookup Search Operators by Josh Comeau (picked by Alex Patterson)
• Show Pick: Synergy (picked by Brittney Postma)
• Show Pick: React Summit (picked by Brittney Postma)
• Show Pick: Shorsey (picked by Mike Hartington)
• Mike Hartington Guest Profile & Episodes on CodingCat.dev
• Mike Hartington on GitHub
• Episode Sponsor: Storyblok
• MDN HTML Reference: Semantic markup, accessibility attributes, and document structure
• Storyblok Headless CMS Documentation: Component-based headless CMS and visual editor APIs
• React Official Reference: Hooks, Server Components, and UI state patterns

Related CodingCat.dev Tutorials & Podcast Episodes

• Design Systems with Web Components: How Stencil can build Web Components for any Design System. This is a developers view into how a design system will work in any size organization.
• How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI): Curious about OAuth, MCP servers, and building cool ChatGPT apps? Hear from Max of Stytch as we dive deep, break down the tech, and build a Tamagotchi together!
• Angular 16 Hydration, Signals, Vite: Angular 16 is a major release of the Angular framework that introduces several new features.

Frequently Asked Questions (FAQ)

What are the main takeaways from Ionic 6?

Mike tells us all about himself and starting at Ionic. Mike gives us a full demo of Ionic 6 and the new components. 2.32 - Ionic 6 with Mike Hartington: Mike tells us all about himself and starting at Ionic. Mike gives us a full demo of Ionic 6 and the new components. https://codingcat.dev/podcast/2-32-ionic-6 Sponsors: Storyblok
Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 + developers & marketers use it to del Throughout this podcast, Mike Hartington breaks down real-world implementation details for HTML, Storyblok, React so developers can apply these patterns directly in production.

How do you implement HTML best practices in production?

When adopting HTML and Storyblok in a production stack, start by validating your configuration against the MDN HTML Reference (Semantic markup, accessibility attributes, and document structure). Focus on incremental adoption, automated testing, and observability so your team can measure performance and developer velocity improvements at each stage.

Where can I watch the full Ionic 6 walkthrough and find related code resources?

You can watch the complete video session for Ionic 6 on the CodingCat.dev YouTube channel. For a deeper dive into HTML, check out our related guide: Design Systems with Web Components.