$30 off During Our Annual Pro Sale. View Details »

Challenge to Ionic with Riot.js

kkeeth
July 07, 2019

Challenge to Ionic with Riot.js

kkeeth

July 07, 2019
Tweet

More Decks by kkeeth

Other Decks in Programming

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