Ionic Utah

Tutorials, demos, and full-on workshops

2015 Founded by North McCormick

2016 Todd took over as meetup admin

           Brett, Cory & Tyler joined and help host and teach

2017 Started worldwide Ionic meetups during ng-conf

2019 Ionic became our official meetup sponsor

Who is Todd?

• Graduated with programming honors from HS in Silicon Valley

• BS in Computer Science from BYU

• QA Engineer for 8 years at Novell

• Full-stack developer at Xactware/Verisk since 2000

• Trained in UI/UX (BYU, UIE conf, Fluent conf, ng-conf)

• Specialized in Accessibility, Internationalization, Mobile & Usability

• Manager of native project (Android & iOS) until 2015

• Migrated to Ionic PWA in 2015, maintained until 2021

• Part-time instructor at MTech (Angular & Ionic modules)

• Ionic Developer Expert

• Husband, dad, stepdad, grandpa, Christian, stoic philosophizer, 🏀 🏐, stereogram creator

What is Ionic?

What is Ionic, specifically?

1. CLI for every step of your project

   • npm i -g @ionic/cli && ionic start

2. UI Library ⬆️
   • Web components for any framework
   • Supports UI design from Google & Apple (in app or on a website)
     • ALL components, plus nav animations
3. Layout Tools CSS classes, theme generator, dark mode
4. Icon Library outline, filled, sharp ⬆️
5. Native Tools (Capacitor) ⬆️ bridge to native features
   • Creates sub-projects for ios and android in your web project folder
   • Easy access to phone features with plug-ins
6. Component Compiler (StencilJS) tool for building UI web components
7. Paid Services (AppFlow) build, auth, store, deploy & update services

What is Ionic, specifically?

CLI

UI Library

Icon Library

Layout Tools

Native Tools

Component Compiler

Paid Services

What is Ionic, specifically?

CLI

UI Library

Icon Library

Layout Tools

Native Tools

Component Compiler

Paid Services

What is Ionic, specifically?

CLI

UI Library

Icon Library

Layout Tools

Native Tools

Component Compiler

Paid Services

What is Ionic, specifically?

CLI

UI Library

Icon Library

Layout Tools

Native Tools

Component Compiler

Paid Services

What is Ionic, specifically?

CLI

UI Library

Icon Library

Layout Tools

Native Tools

Component Compiler

Paid Services

What is Ionic, specifically?

CLI

UI Library

Icon Library

Layout Tools

Native Tools

Component Compiler

Paid Services

What is Ionic, specifically?

CLI

UI Library

Icon Library

Layout Tools

Native Tools

Component Compiler

Paid Services

What is Ionic, specifically?

CLI

UI Library

Icon Library

Layout Tools

Native Tools

Component Compiler

Paid Services

Ionic 7 (rc4)

• Inline overlayed components ⬆️

• Event changes (ionChange)

• Simplified input syntax

• Performance improvements

• Improved Vite compatibility

• Ion-slides removal (use swiper.js)

• Ion-virtual-scroll removal

Ionic+Vue+Vite = 🚀DX

1. Why?

   • Reduce bundle from 3MB to 413KB

   • Fewer package dependencies to maintain

   • 🚀FAST dev hot-reloading

   • 🚀FAST testing with Vitest

2. How?

   • Add Ionic to Vite project, via Aaron Saunders

   • Migrate Ionic project to Vite, via Todd

   • Grab a starter that's ready to go! via Todd

   • ⚡️It's the default in all Ionic Vue starters now!⚡️

3. Sample of (free) Ionic Vue components ⬆️

4. Demo time! ⬆️

Links to everything

• Install the CLI https://ionicframework.com/docs/intro/cli
• Start a project https://ionicframework.com/docs/developing/starting
• UI Components https://ionicframework.com/docs/components
• CSS Utilities https://ionicframework.com/docs/layout/css-utilities
• Theme generator https://ionicframework.com/docs/theming/color-generator
• IonIcons https://ionic.io/ionicons
• Capacitor plugins https://ionicframework.com/docs/native
• StencilJS https://stenciljs.com/
• AppFlow https://ionic.io/docs/appflow
• Ionic Discord https://discord.gg/4qTYcaEn
• Ionic Angular Forum https://forum.ionicframework.com/c/ionic/angular/27
• Ionic 7 Changes https://ionic.io/blog/announcing-the-ionic-7-beta
• Updating from 6 to 7 https://ionicframework.com/docs/v7/updating/7-0
• Adding Ionic to Vite project Aaron Saunders' blog
• Migrating Ionic to Vite https://github.com/dolthead/vitehow
• Ionic+Vue+Vite starters https://github.com/dolthead?tab=repositories&q=vite
• Free Ionic Vue components https://ionic-vue-components.web.app/
• MTech Dev Course https://mtec.edu/programs/web-programming-development/
• Teach at MTech jfaga@mtec.edu
• Work @Verisk https://careers.smartrecruiters.com/Verisk

Q & A