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

Introducing Ionic Framework to you

kkeeth
December 14, 2019

Introducing Ionic Framework to you

kkeeth

December 14, 2019
Tweet

More Decks by kkeeth

Other Decks in Programming

Transcript

  1. Introducing Ionic
    Framework to you
    kkeeth @kuwahara_jsri clown0082
    Dec 14, 2019
    ʮIonicͰ࡞Δ ϞόΠϧΞϓϦ੍࡞ೖ໳ʯץߦه೦ Ionic Meetup #14 Tokyo

    View Slide

  2. URL: https://www.amazon.co.jp/dp/4863542925/

    View Slide

  3. URL: https://www.amazon.co.jp/dp/4863542925/
    Congratulation !!

    View Slide

  4. Has anyone already
    bought this book?

    View Slide

  5. About me

    View Slide

  6. About me
    const my_info = {
    Name: ‘܂ݪ੟ਔ’,
    Workplace: ‘Yumemi Inc’,
    Position: ‘Servant Leader’,
    Skills: ‘Riot.js, React.js, Nuxt.js’,
    PokemonGO: ‘TL40’
    }

    View Slide

  7. Communities
    github.com/riot

    View Slide

  8. Sorry... #
    This slide is made in English.
    But, I am unfamiliar using English.
    So I may have a wrong expression.
    Plz feedback for me
    called “Masakari” about my English.

    View Slide

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

    View Slide

  10. How about
    “Ionic Framework” ?

    View Slide

  11. What is “Ionic Framework”?

    View Slide

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

    View Slide

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

    View Slide

  14. What is “Ionic Framework” ?
    +

    View Slide

  15. What is “Ionic Framework” ?
    Web

    View Slide

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

    View Slide

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

    View Slide

  18. up to Ionic v3

    View Slide

  19. +
    What is “Ionic Framework” ?

    View Slide

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

    View Slide

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

    View Slide

  22. Ionic v4
    +
    other frameworks

    View Slide

  23. Ionic + other frameworks
    +

    View Slide

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

    View Slide

  25. More Details

    View Slide

  26. More Details

    View Slide

  27. More Details

    View Slide

  28. What is “Capacitor” ?

    View Slide

  29. What is “Capacitor” ?
    A tool made by Ionic Company
    for converting HTMP5 APPS to
    ɾPWA
    ɾiOS/Android (native app)
    ɾElectron (desktop app).

    View Slide

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

    View Slide

  31. What is “Capacitor” ?
    URL: https://medium.com/@sunilk/ionic-capacitor-vs-apache-cordova-
    difference-with-example-the-next-future-innovation-of-hybrid-
    93b1317e08cc

    View Slide

  32. Why “Ionic Framework”?

    View Slide

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

    View Slide

  34. There are some reasons 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. Q. How do we get started?

    View Slide

  37. See also: Tutorials
    URL: https://ionicframework.com/docs/intro/first-app

    View Slide

  38. See also: Tutorials
    URL: https://ionicframework.com/blog/announcing-ionic-devapp/

    View Slide

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

    View Slide

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

    View Slide

  41. Publicity

    View Slide

  42. We’re hiring web developers!!

    View Slide

  43. There are funny system
    ‣ Decide our salary by ourself
    ‣ Unlimited paid leave
    ‣ All members are CEO

    View Slide

  44. View Slide