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
Frontendライブラリの アップデートで苦労した話
Search
akkiee76
January 31, 2022
0
71
Frontendライブラリの アップデートで苦労した話
akkiee76
January 31, 2022
Tweet
Share
More Decks by akkiee76
See All by akkiee76
Meet the Translation API
akkie76
0
320
コードレビューで開発を加速させるAIコードレビュー
akkie76
1
520
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
4.5k
コードレビューを支援するAI技術の応用
akkie76
5
870
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
8.3k
Jetpack Compose で Adaptive Layout に対応しよう
akkie76
0
690
Observationではじめる値監視
akkie76
4
4.5k
TextField 表示スタイル変更の 有効活用例 5 選
akkie76
0
640
rememberUpdatedState の使いどころを考える
akkie76
0
490
Featured
See All Featured
Code Review Best Practice
trishagee
67
18k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Thoughts on Productivity
jonyablonski
69
4.5k
RailsConf 2023
tenderlove
29
1k
A better future with KSS
kneath
238
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Building Adaptive Systems
keathley
40
2.4k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
52k
Typedesign – Prime Four
hannesfritz
41
2.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
BBQ
matthewcrist
87
9.5k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Transcript
〜 UI 系ライブラリメジャーアップデートの TIPS 〜 Vuetifyのメジャーアップデート で苦労した話 Akihiko Sato
自己紹介 Akihiko Sato 株式会社ラクス / Lead Engineer / Mobile Team
SaaS 開発 (Backend, Frontend) / Mobile 開発 (iOS, Android) 読書 / コーヒー / HHKB / 機械式時計
今日伝えたいこと プロジェクトで影響力が大きい ライブラリのアップデートのTIPS
Vuetify ってどんなライブラリ Vue.js 上に構築された UI フレームワークで、表現力豊かな Material Design に基づいて設 計されたコンポーネントが特徴です。
学習コストが低いことも特徴で、少ないコードで Frontend デザインを構築することができま す。 参考:https://vuetifyjs.com/ja/introduction/why-vuetify
直前に迫ったELO(サポート終了) Vuetify は発展途上のライブラリでリリースも頻繁に行われているため、 使う側は、ライブラリのリリース状況をウォッチして行く必要があります。 一方、機能開発が中心のチームでは、ライブラリのアップデートに掛けるコストもあ まりない状況で、ついに v1 系の EOL が迫ってきました。
( 現在の主流は v2 系 )
アップデートを担当することに 影響範囲 ・Vuetify のアップデート & 関連する依存ライブラリ ・100 位の vue ファイル(
Vuetify で実装されている component ) ・Unit Test 対応期間 ・2 週間程度(テスト込み)
着手前の作業イメージ ・Vuetify のアップデート & package.json の依存関係を修正 ・.vue ファイルの error, warning
を修正 ・全機能テスト この手順で行けば期間に余裕でしょう!
いざ着手! 0.5 d で完了 👍 0.5 d で完了 👍 http://localhost:8080
にアクセスしてみると・・・ ① package.json の依存関係解消 ② build error の解消
破壊的な UI 崩れが発生
当時の状況 ・ほぼ全ての画面で UI 崩れ( Vuetify 2 系の componet の変更 )
・真っ白な画面 〜 部品の数 px のズレ ・.vue での多数の error, warning ・Unit Test が期待通りに動かない 結局のところ仕切り直しになった
失敗要因 ① 影響調査(技術調査)が甘かった ・実際の影響範囲を把握できていなかった ・見積もりの正確さが欠けていた
方針変更 この失敗を巻き返すべく、チームとして方針を変更することに 1. vue ファイルリストを作成して、状況を整理 2. 対応方針、修正工数、優先度を各 vue ファイルごとに検討 3. Unit Test の優先度は低めに設定
2 の優先度「高」から修正を開始
大変だったこと 修正方針を決めて、チームで合意を取る点に一番のパワーを使うことになった ・各パーツの数 px のズレ → 直す・直さない? ・微妙に変わった色調 → 戻す・戻さない?
・フォント変更による印象の変化 → 直す・直さない? 最終的な協議結果 component に閉じた CSS の対応はしない方針になった
失敗要因 ② 事前に対応方針をチーム合意していなかった ・メジャーアップデートによりUIの印象がかなり変わる ・場合によって、ステークホルダーとの調整(コスト)も必要
結果として 何とかリリース延期は避けることができたが ・対応に 3 週間かかってしまった(残業含めて) ・一部の component で局所的な対応になった ・Unit Test
の一部の warning は対応を見送ることに
まとめ UI 系のライブラリのメジャーアップデートはとても影響度が大きいです 1. 事前に各画面の具体的な影響範囲を調査しておくこと 2. 修正方針をチームで FIX させておくこと(調整しておくこと) 3.
片手間でやらないこと(アップデートは計画的に)