Ionic Framework v4 with any other frameworks

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