Ionic Framework v4 with any other frameworks

Slide 1

Slide 1 text

Ionic Framework v4 with any other frameworks k-kuwahara @kuwahara_jsri clown0082 2019/06/02 [Webٕज़ͰϞόΠϧΞϓϦΛͭ͘Δ] Ionic Meetup #11 Tokyo

Slide 2

Slide 2 text

About me

Slide 3

Slide 3 text

About me const my_info = { Name: ‘܂ݪ੟ਔ’, Workplace: ‘Yumemi Inc’, Skills: ‘Riot.js, Ionic, Nuxt, Node.js’, PokemonGO: ‘TL39’ }

Slide 4

Slide 4 text

Communities collaborator translator staff

Slide 5

Slide 5 text

Communities github.com/k-kuwahara

Slide 6

Slide 6 text

Let’s start the today’s Ionic talks !!

Slide 7

Slide 7 text

It has been a few years since being said mobile first.

Slide 8

Slide 8 text

Mobile first example ‣ Design tailored to each terminal

Slide 9

Slide 9 text

Mobile first example 'JSTU1BJOU 'JSTU$POUFOUGVM1BJOU 'JSTU.FBOJOHGVM1BJOU 'VMMZ-PBEFE ‣ First view optimized for mobile

Slide 10

Slide 10 text

For more mobile first ⚡AMP (Accelerated Mobile Pages) PWA (Progressive Web Apps)

Slide 11

Slide 11 text

‣ Served over HTTPS PWA examples ‣ Add to home screen APP

Slide 12

Slide 12 text

PWA examples ‣ Offline Experience ‣ Push Notifications

Slide 13

Slide 13 text

How to make it PWA? See “Progressive Web App Checklist”. URL: https://developers.google.com/web/progressive-web-apps/checklist See “Your First Progressive Web App”. URL: https://codelabs.developers.google.com/codelabs/your-first-pwapp/ index.html?index=..%2F..%2Findex#0

Slide 14

Slide 14 text

In recently years, Develop applications with “WEB”

Slide 15

Slide 15 text

So, how about “Ionic Framework” ?

Slide 16

Slide 16 text

What is “Ionic Framework”?

Slide 17

Slide 17 text

What is “Ionic Framework” ? image by: https://ionicframework.com/

Slide 18

Slide 18 text

What is “Ionic Framework” ? image by: https://ionicframework.com/

Slide 19

Slide 19 text

What is “Ionic Framework” ? +

Slide 20

Slide 20 text

What is “Ionic Framework” ? Web

Slide 21

Slide 21 text

What is “Ionic Framework” ? Android iOS Web

Slide 22

Slide 22 text

up to Ionic v3

Slide 23

Slide 23 text

Ionic + other frameworks +

Slide 24

Slide 24 text

What is “Ionic Framework” ? UI Base WebView

Slide 25

Slide 25 text

What is “Ionic Framework” ? UI Base WebView Ionic Native Native API Cordova API

Slide 26

Slide 26 text

Ionic v4 + other frameworks

Slide 27

Slide 27 text

Ionic + other frameworks +

Slide 28

Slide 28 text

What is “Ionic Framework” ? UI Base WebView + Any FWs

Slide 29

Slide 29 text

More Details

Slide 30

Slide 30 text

More Details

Slide 31

Slide 31 text

More Details

Slide 32

Slide 32 text

What is “Capacitor” ?

Slide 33

Slide 33 text

What is “Capacitor” ? URL: https://www.rdlabo.jp/article/973

Slide 34

Slide 34 text

Other features of Ionic

Slide 35

Slide 35 text

Summary of Ionic features 1. PWA(by default) 2. It's fun to develop 3. Support of slack is profound 4. Clean, simple, and functional 5. Abundant API to native function

Slide 36

Slide 36 text

So, let’s try + I think

Slide 37

Slide 37 text

DEMO …it was plan of

Slide 38

Slide 38 text

I wasn’t in time my riot demo for today’s talk…

Slide 39

Slide 39 text

‣ https://github.com/ionic-team/ionic-cli/pull/3951/files ‣ https://github.com/ionic-team/starters/commit/ 1d95f8de91c0f35b2b067258c555bd0bd7ed0ee5 How to introduce other FW to Ionic

Slide 40

Slide 40 text

Q. How do we get started?

Slide 41

Slide 41 text

See also: for details URL: https://qiita.com/clown0082/items/5405c53eb955f985edda