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

Ionic Framework v4 with any other frameworks

kkeeth
June 02, 2019

Ionic Framework v4 with any other frameworks

kkeeth

June 02, 2019
Tweet

More Decks by kkeeth

Other Decks in Programming

Transcript

  1. Ionic Framework v4
    with any other frameworks
    k-kuwahara @kuwahara_jsri clown0082
    2019/06/02 [Webٕज़ͰϞόΠϧΞϓϦΛͭ͘Δ] Ionic Meetup #11 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. It has been a few years
    since being said mobile first.

    View Slide

  8. Mobile first example
    ‣ Design tailored to each terminal

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  12. PWA examples
    ‣ Offline Experience ‣ Push Notifications

    View Slide

  13. 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

    View Slide

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

    View Slide

  15. So, how about
    “Ionic Framework” ?

    View Slide

  16. What is “Ionic Framework”?

    View Slide

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

    View Slide

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

    View Slide

  19. What is “Ionic Framework” ?
    +

    View Slide

  20. What is “Ionic Framework” ?
    Web

    View Slide

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

    View Slide

  22. up to Ionic v3

    View Slide

  23. Ionic + other frameworks
    +

    View Slide

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

    View Slide

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

    View Slide

  26. Ionic v4
    +
    other frameworks

    View Slide

  27. Ionic + other frameworks
    +

    View Slide

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

    View Slide

  29. More Details

    View Slide

  30. More Details

    View Slide

  31. More Details

    View Slide

  32. What is “Capacitor” ?

    View Slide

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

    View Slide

  34. Other features of Ionic

    View Slide

  35. 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

    View Slide

  36. So, let’s try
    +
    I think

    View Slide

  37. DEMO
    …it was plan of

    View Slide

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

    View Slide

  39. ‣ 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

    View Slide

  40. Q. How do we get started?

    View Slide

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

    View Slide

  42. with this book ↓

    View Slide

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

    View Slide

  44. Publicity

    View Slide

  45. We’re looking for Engineers!!

    View Slide

  46. View Slide