Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Ionic V3 ー> V5 アップデートのツラミ / The pain of Ionic u...
Search
acnaman
May 20, 2020
Programming
1
670
Ionic V3 ー> V5 アップデートのツラミ / The pain of Ionic update
2020-05-20 PWA Night vol.16 ~オンラインLT大会!~ 発表資料
acnaman
May 20, 2020
Tweet
Share
More Decks by acnaman
See All by acnaman
問いのデザイン2章 / "The Design of Questions" Chapter 2
acnaman
0
610
ABDで勉強会したらそれがチームビルディングになった話 / ABD is one of team-building method
acnaman
1
520
違和感 それはカイゼンのチャンス / Discomfort is an opportunity for Kaizen.
acnaman
0
500
オンライン登壇で意識したいこと / What online speakers should be aware of
acnaman
0
120
元読書嫌いが読書会を始めるまでの歩み
acnaman
0
210
カイゼンを始めて変わったこと
acnaman
1
1.5k
Other Decks in Programming
See All in Programming
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
2024/11/8 関西Kaggler会 2024 #3 / Kaggle Kernel で Gemma 2 × vLLM を動かす。
kohecchi
4
470
現場で役立つモデリング 超入門
masuda220
PRO
14
3.1k
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1.1k
Amazon Qを使ってIaCを触ろう!
maruto
0
350
約9000個の自動テストの 時間を50分->10分に短縮 Flakyテストを1%以下に抑えた話
hatsu38
24
12k
ECSのサービス間通信 4つの方法を比較する 〜Canary,Blue/Greenも添えて〜
tkikuc
11
2.4k
アジャイルを支えるテストアーキテクチャ設計/Test Architecting for Agile
goyoki
9
3.1k
Identifying User Idenity
moro
6
9.2k
Outline View in SwiftUI
1024jp
1
260
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
17
4.3k
Hotwire or React? ~Reactの録画機能をHotwireに置き換えて得られた知見~ / hotwire_or_react
harunatsujita
8
4.8k
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
The Language of Interfaces
destraynor
154
24k
RailsConf 2023
tenderlove
29
890
Testing 201, or: Great Expectations
jmmastey
38
7.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Statistics for Hackers
jakevdp
796
220k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
Making the Leap to Tech Lead
cromwellryan
133
8.9k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.7k
Transcript
Ionic V3 ー> V5 アップデートの ツラミ 2020/5/20 PWA Night 加藤翼 @acnaman
自己紹介 • 加藤翼 • インフォテック株式会社 新規事業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 V5 2020年1月 8
メジャーバージョンの変遷 V3 2019年1月 V4 V5 2020年1月 独自路線の単体 フレームワーク (Angularベース) 他フレームワークとの
連携が可能 ※Vue対応はbeta 9
アジェンダ • 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 V5 2020年1月 独自路線の単体 フレームワーク (Angularライク) 他フレームワークとの
連携が可能 大アップデート 破壊的な変更 ※Vue対応はbeta 15
「破壊的変更」の説明資料 1962行分の 「破壊的変更」 @IonicのGitHub 16
公式の移行ガイド さらっと 「プロジェクト作り直せ」 って書いてある 17
つらすぎるので移行方法書いた 18
一部抜粋 19
CLIのバージョンアップ 新しいCLIをインストール パッケージ名すら変わっているという罠 20 V3 V5 CLIパッケージ名 ionic @ionic/cli
チェックツールを使う 「破壊的な変更」のチェックツール チェックツール:https://github.com/ionic-team/V4-migration-tslint 21 V3のソースファイル チェックツール レポートログ
ソースの移行方法 旧プロジェクト (チェックツール分修正済み) > ionic generate XXX 新プロジェクト 生成されたファイルに 中身をコピペする
新Ionic用の ファイルを生成 22 新プロジェクト作成+ionic generate →生成されたファイルに中身をコピペ
続きはQiitaで! https://qiita.com/acnaman/items/b44b09b1f0c0c341c081 23
アジェンダ • Ionicとは • V3→V5へバージョンアップした話 • バージョンアップのツラミ(裏話) 24
ツラミ1:開発が止まる • ぼっち開発者 • アップデート作業中は機能追加ができ ない 25 機能 追加 アップ
デート
どうすべきだったか? • 機能が多くなる前にバージョンアップ すべきだった 26 対象ファイル少ない 対象ファイル多い
ツラミ2:重くなる • アプデ後の初期ロードが遅い ◦ ファイル数の増加 ▪ 79ファイル → 1122ファイル ◦
Angularの最適化できてない 27
どうすべきだったか? • Angularのチューニング ◦ service-workerでキャッシュ制御 ◦ Lazy Load 28 ただし頻繁に更新する時期だと
やりづらい 学習コスト高いの が悩み…
もちろん良かったことも • TypeScriptのエラーは消滅 • Angularの恩恵を受けられる ◦ V3はAngularの機能を使い切れない ◦ ドキュメント豊富 29
これから新しく作る場合はIonic V5で作りましょう
まとめ • IonicはPWAを作れるフレームワーク • V3→V4で大きなアップデートがあった • アップデート手順はQiitaにまとめた • アップデートしても全てが良くなるわ けではない(重くなるなど)
30