> Canonical URL: https://codingcat.dev/podcast/2-32-ionic-6

# Ionic 6

🎧 Podcast Episode · S2E32July 20, 2022

# Ionic 6

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/aa33dbdbb99fcf18e007e339648e03e7b230a76b-1920x1080.jpg?w=1920&h=1080&q=82&fit=max&auto=format)[@CodingCatDev62.5K / 100K Subscribers Goal](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Subscribe on YouTube→](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Watch on YouTube App ↗](https://www.youtube.com/watch?v=z21vYzGCN_g&list=UUnKZ8gEb78zXKMi1ns-IQ2g)[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Brittney Postma](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/f25e504779cb6ebb7c0dd7df367f2c7490e17784-735x735.png?w=96&h=96&q=82&fit=max&auto=format)Brittney Postma](/author/brittney-postma)[![Mike Hartington](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/be9303bd97800ee9c125d69293ecc17207d0913f-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Mike Hartington](/guest/mike-hartington)🎧 Listen & Subscribe[Spotify](https://open.spotify.com/episode/7yFp386XGq03g3lbFFXq89)[Apple](https://podcasts.apple.com/us/podcast/2-32-ionic-6-with-mike-hartington/id1491655542?i=1000571365560)[YouTube](https://www.youtube.com/watch?v=z21vYzGCN_g&list=PLUKgAjyG9B0ZhUEXp9eVa7h4L__FDW3uV)[Subscribe on YouTube (62.5K / 100K) →](https://www.youtube.com/@codingcatdev?sub_confirmation=1)[Pocket Casts](https://pca.st/episode/bfebb096-43a2-476e-931d-0039b8528128)[Castbox](https://castbox.fm/episode/id2508485-id517054243)[Castro](https://castro.fm/episode/NladEo)[Overcast](https://overcast.fm/itunes1491655542)[RSS](https://anchor.fm/s/115b203c/podcast/rss)

## Episode Sponsors.

[![CodingCat.dev tutorial cover image](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/1564a576c0c19e1b857c9bfba3cfb6364e7af223-2400x1350.jpg?w=1920&q=82&fit=max&auto=format)Partner & Sponsor

### Storyblok

Have you already discovered Storyblok? They have an official Svelte SDK! 74,000 + developers & marketers use it to deliver powerful content experiences on any frontend: Websites, eCommerce, mobile apps, AR/VR, or voice content!](https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast)✏️ Visual Architecture Diagram

## how this episode connects together.

Follow AJ from first principles to production-ready architecture.

Let’s build it!✏️ Visual Diagram: Ionic 6✓ Good PatternVISUAL DIAGRAM[Diagram Walkthrough]Step-by-step diagram breakdown for Ionic 6: start with Mike Hartington, implement Architecture & Patterns, and ship to production.AAA Contrast Verified

**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**](https://www.youtube.com/watch?v=z21vYzGCN_g) or explore the architectural notes, chapters, and official documentation links below.

## Questions

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

## Additional Links

- [Capacitor.js](https://capacitorjs.com/)
- [Stencil.js](https://stenciljs.com/)

## Setting up an Ionic Project

Installing the CLI

Copied! 🐾

```
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.

Copied! 🐾

```
ionic start
```

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/291a083d66a53dbebe1b364d2c0125784d2a0a10-1760x796.png?w=1600&q=82&fit=max&auto=format)

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.

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/d867c3e54c462d2a33c86ecbf41c18767961ce13-2444x884.png?w=1600&q=82&fit=max&auto=format)

> Warning this will run a long time when installing dependencies

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/5ef20cc1e4faa2d6d42d2e9e8f64c6181c4fdc4e-2456x898.png?w=1600&q=82&fit=max&auto=format)![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/3cacdb2b6ecafe6e092f32b925083389f66ef944-2426x946.png?w=1600&q=82&fit=max&auto=format)

At the very end you should see this message

![](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/0991fe024a78cd2dfb2d745cf3da1b7a5eb1074f-2414x740.png?w=1600&q=82&fit=max&auto=format)

## 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**](https://developer.mozilla.org/en-US/docs/Web/HTML) (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](https://developer.mozilla.org/en-US/docs/Web/HTML) 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)](https://www.youtube.com/watch?v=z21vYzGCN_g) and subscribe to [CodingCat.dev on YouTube](https://www.youtube.com/@CodingCatDev?sub_confirmation=1) for weekly deep dives.

## Video Chapters & Timestamps

Jump directly to any segment of [**Ionic 6**](https://www.youtube.com/watch?v=z21vYzGCN_g) on YouTube using the timestamped chapters below:

- [**00:00**](https://www.youtube.com/watch?v=z21vYzGCN_g&t=0s): PM (EDT)
- [**00:00**](https://www.youtube.com/watch?v=z21vYzGCN_g&t=0s): Intro
- [**00:00**](https://www.youtube.com/watch?v=z21vYzGCN_g&t=0s): Hello
- [**00:00**](https://www.youtube.com/watch?v=z21vYzGCN_g&t=0s): Ionic Description
- [**00:00**](https://www.youtube.com/watch?v=z21vYzGCN_g&t=0s): Stencil
- [**00:00**](https://www.youtube.com/watch?v=z21vYzGCN_g&t=0s): Write Web Components
- [**00:00**](https://www.youtube.com/watch?v=z21vYzGCN_g&t=0s): React wrapping web components
- [**00:00**](https://www.youtube.com/watch?v=z21vYzGCN_g&t=0s): Storyblok Ad
- [**00:00**](https://www.youtube.com/watch?v=z21vYzGCN_g&t=0s): Ionic UI Components
- [**00:00**](https://www.youtube.com/watch?v=z21vYzGCN_g&t=0s): Capacitor
- [**00:00**](https://www.youtube.com/watch?v=z21vYzGCN_g&t=0s): How Capacitor iterates faster
- [**00:00**](https://www.youtube.com/watch?v=z21vYzGCN_g&t=0s): Ionic 6 and Mike's fav new components
- [**00:00**](https://www.youtube.com/watch?v=z21vYzGCN_g&t=0s): Is Brittney into Ionic for all things mobile, web, desktop
- [**00:00**](https://www.youtube.com/watch?v=z21vYzGCN_g&t=0s): Mike Demo's Ionic
- [**00:00**](https://www.youtube.com/watch?v=z21vYzGCN_g&t=0s): Purrfect PIcks
- [**00:00**](https://www.youtube.com/watch?v=z21vYzGCN_g&t=0s): Thank you

## Resources, Links & Official Documentation

- **Watch on YouTube: ** [Ionic 6 Full Video](https://www.youtube.com/watch?v=z21vYzGCN_g) (plus [Subscribe to CodingCat.dev](https://www.youtube.com/@CodingCatDev?sub_confirmation=1))
- **storyblok.com: ** [https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=&utm_content=purrfect-podcast](https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=&utm_content=purrfect-podcast)
- **Show Pick: ** [Angular v14 (picked by Alex Patterson)](https://blog.angular.io/angular-v14-is-now-available-391a6db736af)
- **Show Pick: ** [Operator Lookup Search Operators by Josh Comeau (picked by Alex Patterson)](https://www.joshwcomeau.com/operator-lookup/)
- **Show Pick: ** [Synergy (picked by Brittney Postma)](https://symless.com/synergy)
- **Show Pick: ** [React Summit (picked by Brittney Postma)](https://reactsummit.com/)
- **Show Pick: ** [Shorsey (picked by Mike Hartington)](https://www.imdb.com/title/tt18249282/)
- [**Mike Hartington Guest Profile & Episodes on CodingCat.dev**](/guest/mike-hartington)
- [**Mike Hartington on GitHub**](https://github.com/mhartington)
- [**Episode Sponsor: Storyblok**](https://www.storyblok.com/?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast)
- [**MDN HTML Reference:**](https://developer.mozilla.org/en-US/docs/Web/HTML) Semantic markup, accessibility attributes, and document structure
- [**Storyblok Headless CMS Documentation:**](https://www.storyblok.com/docs?utm_source=codingcat&utm_medium=sponsor&utm_campaign=AWA_SPON_PURRFECT_TRA&utm_content=purrfect-podcast) Component-based headless CMS and visual editor APIs
- [**React Official Reference:**](https://react.dev/reference/react) Hooks, Server Components, and UI state patterns

## Related CodingCat.dev Tutorials & Podcast Episodes

- [**Design Systems with Web Components**](/post/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)**](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences): 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**](/podcast/3-19-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**](https://developer.mozilla.org/en-US/docs/Web/HTML) (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**](https://www.youtube.com/watch?v=z21vYzGCN_g) on the [**CodingCat.dev YouTube channel**](https://www.youtube.com/@CodingCatDev?sub_confirmation=1). For a deeper dive into HTML, check out our related guide: [**Design Systems with Web Components**](/post/design-systems-with-web-components).

## ✏️ Episode Summary

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

## episode picks.

### 🐾 Alex Patterson

- [Angular v14](https://blog.angular.io/angular-v14-is-now-available-391a6db736af)
- [Operator Lookup Search Operators by Josh Comeau](https://www.joshwcomeau.com/operator-lookup/)

### 🐾 Brittney Postma

- [Synergy](https://symless.com/synergy)
- [React Summit](https://reactsummit.com/)

### 🐾 Mike Hartington

- [Shorsey](https://www.imdb.com/title/tt18249282/)

## recent episodes.

[All Episodes→](/podcasts)[![GenAI for Engineers, What](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/3e48f44739be2aabf3aaa805e51b3a6328979153-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)November 19, 2025[AI & MCP Agents](/topic/ai)

### [GenAI for Engineers, What's Real, What's Not and What's Coming](/podcast/genai-for-engineers-what-s-real-what-s-not-and-what-s-coming)

Curious about GenAI for engineers? Learn what's real, what's not, and what's next in AI.

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Balki Kodarapu](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/25fd44884e232394eb74b776fcec7e8d13330ca0-1060x794.png?rect=133,0,794,794&w=96&h=96&q=82&fit=max&auto=format)Balki Kodarapu](/guest/balki-kodarapu)[![How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/0beb99900f4c24e284df2dee3e2d740062c6ce96-1920x1080.png?w=1920&q=82&fit=max&auto=format)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)November 4, 2025[AI & MCP Agents](/topic/ai)

### [How OAuth, MCP, and the OpenAI Apps SDK, Power the Next Generation of Interactive AI Experiences (with Stytch & OpenAI)](/podcast/how-oauth-mcp-and-the-openai-apps-sdk-power-the-next-generation-of-interactive-ai-experiences)

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!

[![Alex Patterson](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/a606dfaa381aab08ddbe16a33fe1d3e1fb37c927-400x400.jpg?w=96&h=96&q=82&fit=max&auto=format)Alex Patterson](/author/alex-patterson)[![Max Gerber](https://cdn.sanity.io/media-libraries/mlttp0BZbCpV/images/4497bb7ada0e39b4cd13b0e3ca00c930389dab02-1292x1088.png?rect=102,0,1088,1088&w=96&h=96&q=82&fit=max&auto=format)Max Gerber](/guest/max-gerber)