レガシーフロントエンドとの戦い方

リプレイスや、リアーキテクチャ、リファクタリングを通して考えたことや学んだことについてメモっていく備忘録

対象

• 古いNode
• gulp webpackが古い状態でメンテナが不在
• 複数のアプリケーションが動作している

問題点

• 開発速度が出ない
• アプデする際全てのアプリが操作対象なので、コストが大きくなりがち
• より使いやすいライブラリなどに移行できない
• 世の中のドキュメントがなくなりつつある状態、あるいは存在しない

やったこと

• 各タスクが何を行ってるのかを洗い出した
  • gulp task
  • webpack の構成やloaderの見直し
  • CIやテストへの影響
  • 各アプリケーションに使われているライブラリおよびフレームワークの現行バージョンと既存のものの差分、破壊的変更の有無

やったこと2

• チームや関係者への問題提起と説明
  • 何が起こってて何がこれから起こるのか
  • それを解消すると何を得られるのか

やったこと3

• もっとも問題が薄い部分に対し小さく作り何が起こるのか具体の調査
  • 調査結果を記す

意識したこと

• 最新のものをなるだけ使うこと
  • ただしアプリケーションに直接的に影響のあるものについては意思決定を遅延させる
• とにかくconfigを薄く書く
  • まずトランスパイル
  • やりたいことの順番を明記しながら動くものを1週単位で小さくリリースする

おもむろにフレームワークやライブラリを突っ込まない

いわゆる静的解析を整える

TypeScript をとりあえず入れるだけ入れる。
書き換えない

フレームワークなどを入れる場合も既存のリクエストに該当する処理部分だけを切り出して型を入れてあげるだけで、随分と見通しやすくなる

フレームワークを入れるなら部分導入を検討する。

グレーな状態を許容した上でチームならみんながかかる状態を目指す

主要な画面や複雑な画面を洗い出す。
調査だけ、行数数えるとかそんなのからでおっけい