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

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

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

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

acnaman

May 20, 2020
Tweet

More Decks by acnaman

Other Decks in Programming

Transcript

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

    View Slide

  2. 自己紹介
    ● 加藤翼
    ● インフォテック株式会社
    新規事業T プログラマー
    ● GitHub : acnaman
    ● Twitter : acnaman_dev
    ● コミュニティ運営メンバー
    2

    View Slide

  3. おことわり
    ● スライドはアップ済みです
    ● 基本ツイート等OKですが、1スライドの
    みダメなやつがあります
    →該当スライドのときにアナウンスします
    ● ハッシュタグは #pwanight で!
    ● お酒片手(or両手)にお聞きください
    3

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. メジャーバージョンの変遷
    V3 2019年1月
    V4 V5
    2020年1月
    独自路線の単体
    フレームワーク
    (Angularベース)
    他フレームワークとの
    連携が可能
    ※Vue対応はbeta
    9

    View Slide

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

    View Slide

  11. Ionic V3で構築したPWA
    ● 新規事業のプロトタイプ
    ● モバイル利用を想定したPWA
    ● Ionic + Firebase
    ● 新規事業のため詳細は非公開です
    11

    View Slide

  12. V3に限界がきた
    ● TypeScriptのバージョンアップに追随
    しない
    ○ プロダクションビルド時のエラー
    ○ Jestのエラー
    →V5出たしアップデートしよう!
    12

    View Slide

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

    View Slide

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

    View Slide

  15. メジャーバージョンの変遷
    V3 2019年1月
    V4 V5
    2020年1月
    独自路線の単体
    フレームワーク
    (Angularライク)
    他フレームワークとの
    連携が可能
    大アップデート
    破壊的な変更
    ※Vue対応はbeta
    15

    View Slide

  16. 「破壊的変更」の説明資料
    1962行分の
    「破壊的変更」
    @IonicのGitHub
    16

    View Slide

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

    View Slide

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

    View Slide

  19. 一部抜粋
    19

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  23. 続きはQiitaで!
    https://qiita.com/acnaman/items/b44b09b1f0c0c341c081
    23

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  27. ツラミ2:重くなる
    ● アプデ後の初期ロードが遅い
    ○ ファイル数の増加
    ■ 79ファイル → 1122ファイル
    ○ Angularの最適化できてない
    27

    View Slide

  28. どうすべきだったか?
    ● Angularのチューニング
    ○ service-workerでキャッシュ制御
    ○ Lazy Load
    28
    ただし頻繁に更新する時期だと
    やりづらい
    学習コスト高いの
    が悩み…

    View Slide

  29. もちろん良かったことも
    ● TypeScriptのエラーは消滅
    ● Angularの恩恵を受けられる
    ○ V3はAngularの機能を使い切れない
    ○ ドキュメント豊富
    29
    これから新しく作る場合はIonic V5で作りましょう

    View Slide

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

    View Slide