UIT INSIDE

LINE UIT室の開発者による「最新のフロントエンド」をキャッチアップできる Podcast

  • オープニング
    00:00
  • 1. リニューアルの背景
    01:32
  • 2. リニューアル企画の進め方
    04:28
  • 3. リニューアルをすることで気づいた良いことと悪いこと
    19:39
  • 4. これからリニューアルをするリスナーへ一言
    26:34
  • 5. クロージング
    31:35

ep.50 AngularJSからVue.js - 大型リニューアルの学び

2020/06/19
1170 views
Davalos Alan 緑豆はるさめ kimulaco

ゲスト紹介

  • @kimulacoさん
    • フロントエンド開発センター UIT 1室
    • LINE GIFTのフロントエンドをメインに担当

リニューアルの背景

  • LINE GIFT
    • 友達や自分宛てに、Eギフトやお取り寄せギフトを贈れるサービス
    • 住所を知らない友達にギフトを送ることも可能
  • LINE アンケート
    • ユーザーにアンケートを配信し、回答を受け付けるサービス

リニューアル企画の進め方

  • GIFTとアンケートのリニューアル
    • 似たような状況からのリニューアル
    • AngularJS (Angular v1.x)からVue.js
    • Grunt から Webpackやコードスプリットなどのビルド改善
  • リニューアルを始めたきっかけ
    • GIFT
      • リソースに余裕ができていた
      • フロントエンドエンジニアから他のチームに推薦
    • アンケート
      • 元々計画はあったがなかなか始められなかった
      • はるさめさんが入ったことなどをきっかけに企画が動き出した
  • リニューアルの進め方
    • GIFT
      • ページ数は60-70ぐらい
      • 季節イベントが多い
      • フェースに分けてイベントと重ならないようにする
        • フェース 1 - 決済以外
        • フェース 2 - 決済周り
    • アンケート
      • 何段階に分けて実装中
          1. ビルドスタック改善
          1. テンプレートをバックエンドからフロントエンドに
          1. AngularJSからVue.js
      • リニューアルと平行するリリース作業はほとんどなかった

リニューアルをすることで気づいた良いことと悪いこと

  • まだ使われているかどうかがわからないコードの対処
  • 依存ライブラリーでの困りごと
    • OSSライブラリの社内ラッパー
      • 理由がわからないからとりあえず普通のOSSの最新版に
    • CSSのビルドツールをWebpackにするのが難しかった
      • わざわざWebpackにしなくてもいい場合もある

これからリニューアルをするリスナーへ一言

  • Sentryなどのエラートラッキングをできるだけ早く入れた方がいい
    • エラーの原因を突き止めやすくなる
  • 一気に書き換えるのではなく、ステップを踏むことが大事
    • 最初に手順を計画すると後々楽
  • リニューアルしやすい設計もありなのでは?
    • Micro ServicesやMicro Front Endなど

PR

10秒前へ 10秒次へ