Ionicでモバイルアプリ開発のむずかしいを簡単に

8bc941b1868dfc680dd1e11a797ca385?s=47 puku0x
October 02, 2019

 Ionicでモバイルアプリ開発のむずかしいを簡単に

Re:Build×diffeasy ITのむずかしいを簡単にする会 - LT会 #6
https://diffeasy.connpass.com/event/147217/

8bc941b1868dfc680dd1e11a797ca385?s=128

puku0x

October 02, 2019
Tweet

Transcript

  1. Ionicでモバイルアプリ開発の むずかしいを簡単に のむずかしいを簡単にする会 会

  2. Noriyuki Shinpuku ng-fukuoka organizer VEGA corporation Co., Ltd. @puku0x 2

  3. Mobile Apps 3

  4. Native Mobile Apps • High performance • Different platforms and

    languages ◦ Android: Kotlin/Java ◦ iOS: Swift/Objective-C ◦ Your code cannot be shared 4
  5. HTML5 Mobile Apps • Multi platform • Built with HTML/CSS/JavaScript

    ◦ You can share your code across platforms ☺ 5
  6. Difficulties • Performance (Note: HTML5 apps are performant in most

    use cases) • Design system ◦ Android: Material design ◦ iOS: Human Interface Guidelines 6
  7. How can we make it easy? 7

  8. https://ionicframework.com/ 8

  9. Ionic • Mobile UI framework • Supports both iOS and

    Android • Built with Web Components (v4〜) ◦ Framework agnostic 9
  10. <ion-app> <ion-header> <ion-toolbar> <ion-title>Page</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-button>Button</ion-button> </ion-content> </ion-app>

    Template 10
  11. 11 Android iOS

  12. • Better code splitting & rendering performance • Archiving 60fps

    with <ion-virtual-scroll /> • Perceived performance improvement with skeltons Performance 12
  13. 13 https://ionicframework.com/blog/hot-take-dark-mode/ https://startrack-ng.firebaseapp.com/ Dark Mode

  14. 14

  15. Ionic CLI $ npm install -g ionic $ ionic start

    my-app $ cd my-app $ ionic serve $ ionic cordova build android --prod --release 15
  16. • Mobile debugger • Plugins included ◦ Camera, Geolocation, BLE,

    Media, InAppBrowser, AdMob, ... $ ionic serve --devapp Ionic DevApp https://ionicframework.com/docs/appflow/devapp/ 16
  17. import { Camera, CameraOptions } from '@ionic-native/camera/ngx'; constructor(private camera: Camera)

    {} ... const options: CameraOptions = { destinationType: this.camera.DestinationType.FILE_URI, encodingType: this.camera.EncodingType.JPEG, } this.camera.getPicture(options).then(imageData => { let base64Image = 'data:image/jpeg;base64,' + imageData; }); Ionic Native 17
  18. • Mobile friendly • Performance • Portability • Plugin support

    • Better tooling Why use Ionic? 18
  19. Ionic is awesome! 19

  20. Recap • Ionic makes mobile app development easy ◦ Supports

    famous frameworks ◦ “One code base, any platform” • Join Slack team https://ionic-jp.herokuapp.com/ • Try it now! 20 $ npm -g ionic && ionic start
  21. 21 https://frontend-conf.fukuoka.jp/

  22. Thank you! @puku0x Noriyuki Shinpuku