Introducing Ionic Framework to you

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