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
54
Frontendライブラリの アップデートで苦労した話
akkiee76
January 31, 2022
Tweet
Share
More Decks by akkiee76
See All by akkiee76
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
240
コードレビューを支援するAI技術の応用
akkie76
5
480
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
6.5k
Jetpack Compose で Adaptive Layout に対応しよう
akkie76
0
140
Observationではじめる値監視
akkie76
3
2k
TextField 表示スタイル変更の 有効活用例 5 選
akkie76
0
320
rememberUpdatedState の使いどころを考える
akkie76
0
210
M3 NavigationBar をマスターする
akkie76
0
510
アーキテクチャを明文化して臨んだ新規アプリ開発戦略
akkie76
0
140
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Thoughts on Productivity
jonyablonski
60
3.9k
Robots, Beer and Maslow
schacon
PRO
155
8k
KATA
mclloyd
16
12k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
Designing for Performance
lara
601
67k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Into the Great Unknown - MozCon
thekraken
15
1.1k
Building a Scalable Design System with Sketch
lauravandoore
457
32k
Build your cross-platform service in a week with App Engine
jlugia
226
17k
Adopting Sorbet at Scale
ufuk
69
8.6k
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.
片手間でやらないこと(アップデートは計画的に)