ゲスト
- @AlanGDavalos
- Front-End Engineer
- LINE LIVE の開発
- Web Components が好き
- @nhayashida
- Front-End Engineer
- LINE LIVE の開発
LINE LIVE とリニューアル
デザインのリニューアル
- 元々はこれがメインの目的
- 早い段階からフロントエンドエンジニアがスペックやデザインに関わって進行
- PCとモバイルで分けられていたプロジェクトを統一することで開発工数を削減
- アナリティクスを見ても僅少であった IE 11 / MS Edge をサポート対象外に
環境やビルド改善
2015/10 から開発が行われており、技術スタックについても、現在の基準から見るとレガシーな部分も目立つようになっていた。
UI リニューアルのためにフルリグレッションテストを実施するため、リファクタリングを行うチャンスでもあり、今回は以下を実施した。
- ビルド
- babel や webpack の設定見直し
- polyfill, minify など
- es2020
- bundle analyzer で依存ライブラリのサイズを可視化
- code splitting/prefetch をちゃんと入れた
- そのページでは使われていない JS も読み込まれていた。
- LIVE アプリからアクセスするページの読み込みも早くなった
- ie11のサポートを切った
- コードのサイズは大分減らせた
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のパフォーマンス改善
- Homeのロード改善
- Skeletonとlazy load
- Top は画像がとても多い
- 複数の API からデータを取得してデータを表示しているので、Layout shift が起こりやすい
- Player自体がもっとスムーズな方に置き換えた
- もういらないようなライブラリーを削除した
Refs
- LINE 新卒採用 2024
- キャリア採用はこちらから
- BGM&SE