ゲスト

• @AlanGDavalos
  • Front-End Engineer
  • LINE LIVE の開発
  • Web Components が好き
• @nhayashida
  • Front-End Engineer
  • LINE LIVE の開発

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

• ビルド
  • 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のパフォーマンス改善
  • Web Componentを入れて効率化
• Homeのロード改善
  • Skeletonとlazy load
    • Top は画像がとても多い
    • 複数の API からデータを取得してデータを表示しているので、Layout shift が起こりやすい
• Player自体がもっとスムーズな方に置き換えた
• もういらないようなライブラリーを削除した
  • APNG Player の廃止など

Refs

• BGM&SE
  • 魔王魂/騒音のない世界/OtoLogic