ep.60 UIリニューアルは技術的負債改善のチャンス！LINE LIVEのリニューアルの裏話

このエピソードについて

@potato4d が @AlanGDavalos と @nhayashida に、 LINE LIVE のリニューアルについて話を聞きました。

LINE のライブ配信サービス
- https://live.line.me/
Web / ネイティブアプリ両方で展開
- 長らくアプリ優先で開発が進められていた
古い状態のデザインが続いているなど、アプリの進化に追従できていなかった
- Web 側も UI リニューアルが入ったので、開発環境もまとめてアップデートすることに
規模感
- フロントエンドエンジニア: JS 2, Markup 1
  - 開発期間: 1~2ヶ月
  - コミット数: 400
  - 変更ファイル数: 797
  - 追加/削除: +34,174/-29,907

元々はこれがメインの目的
- 早い段階からフロントエンドエンジニアがスペックやデザインに関わって進行
  - PCとモバイルで分けられていたプロジェクトを統一することで開発工数を削減
  - アナリティクスを見ても僅少であった IE 11 / MS Edge をサポート対象外に

2015/10 から開発が行われており、技術スタックについても、現在の基準から見るとレガシーな部分も目立つようになっていた。

UI リニューアルのためにフルリグレッションテストを実施するため、リファクタリングを行うチャンスでもあり、今回は以下を実施した。

2019/11

pc: 871 + 353 = 1,224 KiB
sp: 661 + 353 = 1,014 KiB

2020/08 (entrypoint)

pc: 294 KiB
sp: 303 KiB

開発環境
- CIを入れた
  - CircleCI による Build, Test, Deploy
  - 期間がそんなに長くなかったので開発と並行して機能単位での QA を行うことになり頻繁にデプロイが必要だったが、これのおかげでとても助かった
- Unit Test をもっと書くようにした
  - Karma => Jest
    - Vue test utils との相性がいいとか。パフォーマンスとか。だったかな。
  - 新たに変更をいれた部分はなるべくテストを書くようになった。なんとなく。
  - Coverage (Stmts): ほぼ 0 => 33% (as of 2020/8/31)。もっとがんばりたい。
  - リニューアル時だけでなく、その後の機能追加時などにも役だった(はず)。仕様の把握。リファクタリング。など。
- Lint/Prettier周りの設定をちゃんとした
  - VSCode 連携も。
  - 統一することでコードレビューしやすくなった。ケアレスミスがなくなった。など。
Player Chatのパフォーマンス改善
- Web Componentを入れて効率化
Homeのロード改善
- Skeletonとlazy load
  - Top は画像がとても多い
  - 複数の API からデータを取得してデータを表示しているので、Layout shift が起こりやすい
Player自体がもっとスムーズな方に置き換えた
もういらないようなライブラリーを削除した
- APNG Player の廃止など