2020-05-20 PWA Night vol.16 ~オンラインLT大会!~ 発表資料
Ionic V3 ー> V5 アップデートのツラミ2020/5/20 PWA Night加藤翼 @acnaman
View Slide
自己紹介● 加藤翼● インフォテック株式会社新規事業T プログラマー● GitHub : acnaman● Twitter : acnaman_dev● コミュニティ運営メンバー2
おことわり● スライドはアップ済みです● 基本ツイート等OKですが、1スライドのみダメなやつがあります→該当スライドのときにアナウンスします● ハッシュタグは #pwanight で!● お酒片手(or両手)にお聞きください3
アジェンダ● Ionicとは● V3→V5へバージョンアップした話● バージョンアップのツラミ(裏話)4
アジェンダ● Ionicとは● V3→V5へバージョンアップした話● バージョンアップのツラミ(裏話)5
知ってる人〜?Twitterアンケートに反応もとむ!6
Ionicとは● モバイル向けJavaScriptフレームワーク● PWAの作成● iOS/Androidネイティブアプリへの変換● TechFeedとかで使われてます7
メジャーバージョンの変遷V3 2019年1月V4 V52020年1月8
メジャーバージョンの変遷V3 2019年1月V4 V52020年1月独自路線の単体フレームワーク(Angularベース)他フレームワークとの連携が可能※Vue対応はbeta9
アジェンダ● Ionicとは● V3→V5へバージョンアップした話● バージョンアップのツラミ(裏話)10
Ionic V3で構築したPWA● 新規事業のプロトタイプ● モバイル利用を想定したPWA● Ionic + Firebase● 新規事業のため詳細は非公開です11
V3に限界がきた● TypeScriptのバージョンアップに追随しない○ プロダクションビルド時のエラー○ Jestのエラー→V5出たしアップデートしよう!12
npmで最新落とせばいけるっしょー> npm install ionic/angular@latestこんな感じ?アップデート舐めてたぼく13
npmで最新落とせばいけるっしょー> npm install ionic/angular@latestこんな感じ?アップデート舐めてたぼく14否
メジャーバージョンの変遷V3 2019年1月V4 V52020年1月独自路線の単体フレームワーク(Angularライク)他フレームワークとの連携が可能大アップデート破壊的な変更※Vue対応はbeta15
「破壊的変更」の説明資料1962行分の「破壊的変更」@IonicのGitHub16
公式の移行ガイドさらっと「プロジェクト作り直せ」って書いてある17
つらすぎるので移行方法書いた18
一部抜粋19
CLIのバージョンアップ新しいCLIをインストールパッケージ名すら変わっているという罠20V3 V5CLIパッケージ名 ionic @ionic/cli
チェックツールを使う「破壊的な変更」のチェックツールチェックツール:https://github.com/ionic-team/V4-migration-tslint21V3のソースファイル チェックツール レポートログ
ソースの移行方法旧プロジェクト(チェックツール分修正済み)> ionic generate XXX新プロジェクト生成されたファイルに中身をコピペする新Ionic用のファイルを生成22新プロジェクト作成+ionic generate→生成されたファイルに中身をコピペ
続きはQiitaで!https://qiita.com/acnaman/items/b44b09b1f0c0c341c08123
アジェンダ● Ionicとは● V3→V5へバージョンアップした話● バージョンアップのツラミ(裏話)24
ツラミ1:開発が止まる● ぼっち開発者● アップデート作業中は機能追加ができない25機能追加 アップデート
どうすべきだったか?● 機能が多くなる前にバージョンアップすべきだった26対象ファイル少ない 対象ファイル多い
ツラミ2:重くなる● アプデ後の初期ロードが遅い○ ファイル数の増加■ 79ファイル → 1122ファイル○ Angularの最適化できてない27
どうすべきだったか?● Angularのチューニング○ service-workerでキャッシュ制御○ Lazy Load28ただし頻繁に更新する時期だとやりづらい学習コスト高いのが悩み…
もちろん良かったことも● TypeScriptのエラーは消滅● Angularの恩恵を受けられる○ V3はAngularの機能を使い切れない○ ドキュメント豊富29これから新しく作る場合はIonic V5で作りましょう
まとめ● IonicはPWAを作れるフレームワーク● V3→V4で大きなアップデートがあった● アップデート手順はQiitaにまとめた● アップデートしても全てが良くなるわけではない(重くなるなど)30