Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Ionic And Vue
 For Fast Mobile Apps Mike Hartington Ionic, GDE @mhartington

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

5 Million Apps Created 250,000
 Monthly Active Devs 100’s
 World-wide Meetups Top 40
 OSS GitHub Project

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

A long time ago…

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Custom Elements Core Polyfills that load on demand Support for all the frameworks Web Components Stability through Web Standards

Slide 9

Slide 9 text

＋ @ionic/vue [ALPHA]\

Slide 10

Slide 10 text

But something 
 was missing

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

Navigation hooks Tabbed-based interface CLI integration Filling the gaps in @ionic/vue

Slide 13

Slide 13 text

Routing. It's like a series of tubes. Provide Animations and gestures Handle View Caching Support vue-router

Slide 14

Slide 14 text

export default new IonicRouter({ mode: 'history', base: process.env.BASE_URL, routes: [ { path: '/', name: 'home', component: () => import('./views/Home.vue') }, { path: '/about/:id', name: 'about', component: () => import('./views/About.vue') } ] });

Slide 15

Slide 15 text

Best of Ionic and Vue Router Animations are handled in Ionic Reads vue-router config data Uses existing vue-router API

Slide 16

Slide 16 text

Tabs based navigation for native Each tab has it's own stack Maintaining parallel histories Tabbed UI If you thought navigation 
 was confusing...

Slide 17

Slide 17 text

{ path: '/tabs', component: ()  import('@/views/Tabs.vue'), children: [ { path: 'tab1', components: { tab1: ()  import('@/views/Tab1.vue') } }, ] } Tab One

Slide 18

Slide 18 text

Multiple outlets match to routes Each tab has it's own stack Maintaining parallel histories FEEDBACK IS WANTED Navigation is complex

Slide 19

Slide 19 text

Vue CLI The best part of any Vue project Easy to bootstrap a project Configurable CLI GUI

Slide 20

Slide 20 text

Add Ionic to an existing project Simplified starting process Use and much or as little vue-cli-plugin-ionic Add Ionic to an existing project

Slide 21

Slide 21 text

But wait There’s more!

Slide 22

Slide 22 text

Theming with CSS Variables. Dynamic values: NO JS Same CSS you already know Dark Mode, anyone?

Slide 23

Slide 23 text

Ionic CLI integration. Coming Soon Start up a new Ionic project Vue specific starter templates Proper Vue project set

Slide 24

Slide 24 text

Deploy to Native, web, and beyond. iOS, Android, PWA, Web, Desktop 100% open web, future-proofed 100% code reuse, runs anywhere

Slide 25

Slide 25 text

capacitor.ionicframework.com A new native bridge for cross-platform web apps.

Slide 26

Slide 26 text

There’s one more thing...

Slide 27

Slide 27 text

@ionic/vue [BETA]\

Slide 28

Slide 28 text

TL;DR Ionic and Vue are a perfect match. Vue is a great framework for great apps Simple concepts, ease of development Ionic provides great UI for great apps Ionic + Vue =

Slide 29

Slide 29 text

Thank you. github.com/ionic-team/ionic/tree/master/vue