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
66
Frontendライブラリの アップデートで苦労した話
akkiee76
January 31, 2022
Tweet
Share
More Decks by akkiee76
See All by akkiee76
Meet the Translation API
akkie76
0
230
コードレビューで開発を加速させるAIコードレビュー
akkie76
1
350
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
2.8k
コードレビューを支援するAI技術の応用
akkie76
5
700
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
7.7k
Jetpack Compose で Adaptive Layout に対応しよう
akkie76
0
510
Observationではじめる値監視
akkie76
4
4.4k
TextField 表示スタイル変更の 有効活用例 5 選
akkie76
0
510
rememberUpdatedState の使いどころを考える
akkie76
0
370
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
The World Runs on Bad Software
bkeepers
PRO
65
11k
Testing 201, or: Great Expectations
jmmastey
38
7k
The Invisible Side of Design
smashingmag
297
50k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Automating Front-end Workflow
addyosmani
1365
200k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
4.9k
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.
片手間でやらないこと(アップデートは計画的に)