Challenge to Ionic with Riot.js

Slide 1

Slide 1 text

Challenge to Ionic with Riot.js k-kuwahara @kuwahara_jsri clown0082 2019/07/07 [Webٕज़ͰϞόΠϧΞϓϦΛͭ͘Δ] Ionic Meetup #12 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

What is “Ionic Framework” ?

Slide 8

Slide 8 text

In recently years, Develop applications with “WEB”

Slide 9

Slide 9 text

So, how about “Ionic Framework” ?

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

What is “Ionic Framework” ? +

Slide 13

Slide 13 text

What is “Ionic Framework” ? Web

Slide 14

Slide 14 text

What is “Ionic Framework” ? Android iOS Web

Slide 15

Slide 15 text

up to Ionic v3

Slide 16

Slide 16 text

Ionic + other frameworks +

Slide 17

Slide 17 text

What is “Ionic Framework” ? UI Base WebView

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Ionic v4 + other frameworks

Slide 20

Slide 20 text

Ionic + other frameworks +

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

More Details

Slide 23

Slide 23 text

More Details

Slide 24

Slide 24 text

More Details

Slide 25

Slide 25 text

What is “Capacitor” ?

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

So, I tried +

Slide 28

Slide 28 text

What is “Riot.js” ?

Slide 29

Slide 29 text

URL: https://riot.js.org/

Slide 30

Slide 30 text

URL: https://riot.js.org/ In plain words, Riot.js is a react-like ui library

Slide 31

Slide 31 text

Characteristics ‣ Custom tags(Component based) ‣ Simple syntax ‣ Human-readable ‣ Small leaning curve

Slide 32

Slide 32 text

URL: https://riot.js.org/made-with-riot/ Made with Riot

Slide 33

Slide 33 text

Let’s try Ionic with Riot

Slide 34

Slide 34 text

Tasks ‣ add riot project into “ionic-cli” ‣ create “@ionic/riot” project ‣ create “starters” about riot ‣ introduce riot to ionic

Slide 35

Slide 35 text

DEMO …it was plan of

Slide 36

Slide 36 text

I couldn’t demonstrate the riot with ionic again this time…

Slide 37

Slide 37 text

Causes ‣ riot 4 is not supported by various libraries ‣ The hurdles to make @ionic/riot from full-scratch are high ‣ (I didn’t have enough time)

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

Q. How do we get started?

Slide 40

Slide 40 text

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