Challenge to Ionic with Riot.js

Transcript

1. Challenge to
   Ionic with Riot.js
   k-kuwahara @kuwahara_jsri clown0082
   2019/07/07 [Webٕज़ͰϞόΠϧΞϓϦΛͭ͘Δ] Ionic Meetup #12 Tokyo
   

   View Slide

2. About me
   

   View Slide

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

   View Slide

4. Communities
   collaborator
   translator
   staff
   

   View Slide

5. Communities
   github.com/k-kuwahara
   

   View Slide

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

   View Slide

7. What is “Ionic Framework” ?
   

   View Slide

8. In recently years,
   Develop applications with “WEB”
   

   View Slide

9. So, how about
   “Ionic Framework” ?
   

   View Slide

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

    View Slide

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

    View Slide

12. What is “Ionic Framework” ?
    +
    

    View Slide

13. What is “Ionic Framework” ?
    Web
    

    View Slide

14. What is “Ionic Framework” ?
    Android iOS Web
    

    View Slide

15. up to Ionic v3
    

    View Slide

16. Ionic + other frameworks
    +
    

    View Slide

17. What is “Ionic Framework” ?
    UI
    Base
    WebView
    

    View Slide

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

    View Slide

19. Ionic v4
    +
    other frameworks
    

    View Slide

20. Ionic + other frameworks
    +
    

    View Slide

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

    View Slide

22. More Details
    

    View Slide

23. More Details
    

    View Slide

24. More Details
    

    View Slide

25. What is “Capacitor” ?
    

    View Slide

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

    View Slide

27. So, I tried
    +
    

    View Slide

28. What is “Riot.js” ?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

33. Let’s try Ionic with Riot
    

    View Slide

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

    View Slide

35. DEMO
    …it was plan of
    

    View Slide

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

    View Slide

37. 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)
    

    View Slide

38. ‣ɹ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
    

    View Slide

39. Q. How do we get started?
    

    View Slide

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

    View Slide

41. with this book ↓
    

    View Slide

42. Let’s Create Mobile Application
    by Ionic Framework!!
    

    View Slide

43. Publicity
    

    View Slide

44. We’re looking for Engineers!!
    

    View Slide

45. View Slide