Ionic V3 ー> V5 アップデートのツラミ / The pain of Ionic update

Ionic V3 ー> V5 アップデートのツラミ / The pain of Ionic update

2020-05-20 PWA Night vol.16 ~オンラインLT大会!~ 発表資料

6a4236da3537f00c88766581621babbb?s=128

acnaman

May 20, 2020
Tweet

Transcript

  1. Ionic V3 ー> V5 アップデートの ツラミ 2020/5/20 PWA Night 加藤翼 @acnaman

  2. 自己紹介 • 加藤翼 • インフォテック株式会社 新規事業T プログラマー • GitHub : acnaman

    • Twitter : acnaman_dev • コミュニティ運営メンバー 2
  3. おことわり • スライドはアップ済みです • 基本ツイート等OKですが、1スライドの みダメなやつがあります →該当スライドのときにアナウンスします • ハッシュタグは #pwanight

    で! • お酒片手(or両手)にお聞きください 3
  4. アジェンダ • Ionicとは • V3→V5へバージョンアップした話 • バージョンアップのツラミ(裏話) 4

  5. アジェンダ • Ionicとは • V3→V5へバージョンアップした話 • バージョンアップのツラミ(裏話) 5

  6. 知ってる人〜? Twitterアンケートに反応もとむ! 6

  7. Ionicとは • モバイル向けJavaScriptフレームワーク • PWAの作成 • iOS/Androidネイティブアプリへの変換 • TechFeedとかで使われてます 7

  8. メジャーバージョンの変遷 V3 2019年1月 V4 V5 2020年1月 8

  9. メジャーバージョンの変遷 V3 2019年1月 V4 V5 2020年1月 独自路線の単体 フレームワーク (Angularベース) 他フレームワークとの

    連携が可能 ※Vue対応はbeta 9
  10. アジェンダ • Ionicとは • V3→V5へバージョンアップした話 • バージョンアップのツラミ(裏話) 10

  11. Ionic V3で構築したPWA • 新規事業のプロトタイプ • モバイル利用を想定したPWA • Ionic + Firebase

    • 新規事業のため詳細は非公開です 11
  12. V3に限界がきた • TypeScriptのバージョンアップに追随 しない ◦ プロダクションビルド時のエラー ◦ Jestのエラー →V5出たしアップデートしよう! 12

  13. npmで最新落とせば いけるっしょー > npm install ionic/angular@latest こんな感じ? アップデート舐めてたぼく 13

  14. npmで最新落とせば いけるっしょー > npm install ionic/angular@latest こんな感じ? アップデート舐めてたぼく 14 否

  15. メジャーバージョンの変遷 V3 2019年1月 V4 V5 2020年1月 独自路線の単体 フレームワーク (Angularライク) 他フレームワークとの

    連携が可能 大アップデート 破壊的な変更 ※Vue対応はbeta 15
  16. 「破壊的変更」の説明資料 1962行分の 「破壊的変更」 @IonicのGitHub 16

  17. 公式の移行ガイド さらっと 「プロジェクト作り直せ」 って書いてある 17

  18. つらすぎるので移行方法書いた 18

  19. 一部抜粋 19

  20. CLIのバージョンアップ 新しいCLIをインストール パッケージ名すら変わっているという罠 20 V3 V5 CLIパッケージ名 ionic @ionic/cli

  21. チェックツールを使う 「破壊的な変更」のチェックツール チェックツール:https://github.com/ionic-team/V4-migration-tslint 21 V3のソースファイル チェックツール レポートログ

  22. ソースの移行方法 旧プロジェクト (チェックツール分修正済み) > ionic generate XXX 新プロジェクト 生成されたファイルに 中身をコピペする

    新Ionic用の ファイルを生成 22 新プロジェクト作成+ionic generate →生成されたファイルに中身をコピペ
  23. 続きはQiitaで! https://qiita.com/acnaman/items/b44b09b1f0c0c341c081 23

  24. アジェンダ • Ionicとは • V3→V5へバージョンアップした話 • バージョンアップのツラミ(裏話) 24

  25. ツラミ1:開発が止まる • ぼっち開発者 • アップデート作業中は機能追加ができ ない 25 機能 追加 アップ

    デート
  26. どうすべきだったか? • 機能が多くなる前にバージョンアップ すべきだった 26 対象ファイル少ない 対象ファイル多い

  27. ツラミ2:重くなる • アプデ後の初期ロードが遅い ◦ ファイル数の増加 ▪ 79ファイル → 1122ファイル ◦

    Angularの最適化できてない 27
  28. どうすべきだったか? • Angularのチューニング ◦ service-workerでキャッシュ制御 ◦ Lazy Load 28 ただし頻繁に更新する時期だと

    やりづらい 学習コスト高いの が悩み…
  29. もちろん良かったことも • TypeScriptのエラーは消滅 • Angularの恩恵を受けられる ◦ V3はAngularの機能を使い切れない ◦ ドキュメント豊富 29

    これから新しく作る場合はIonic V5で作りましょう
  30. まとめ • IonicはPWAを作れるフレームワーク • V3→V4で大きなアップデートがあった • アップデート手順はQiitaにまとめた • アップデートしても全てが良くなるわ けではない(重くなるなど)

    30