フロントエンドの独立化プロセス

企業が成長すると新しい課題に直面します。その一つがスケーラビリティです。コードベースは保守が難しくなり、新しい機能を技術的な負債を生むことなく統合することが難しくなります。この結果、プラットフォームの一部を切り離し、より独立して動作させる方法を見つける必要が出てきます。

3年以上前に、私たちはAngularJSからVue.jsへのコードベースの移行を開始しましたが、アーキテクチャの作り方が原因でAngularの全ての依存を完全に取り除くことはできませんでした。その後、フロントエンドとバックエンドのサービスを独立したリポジトリに分割することを決定しました。

懸念の分離

このプロセスでの最初のステップ は、フロントエンドのセクションを移行するために必要な全てのステップを追跡するためのリリースプランを持つことでした（例：新しいリポジトリに移行したモジュールのマージリクエストを開く、モジュールをベータフラグでリリースするために古いリポジトリにマージリクエストを開くなど）そして開発者が行う作業に一貫性を持たせることです。さらに移行されたセクションを全て追跡するための移行スプレッドシートを持っていました。

バグが導入されていないこと、コンポーネントが正しく動作していることを確認するために、ガイドラインとして移行チェックリストが作成されました。移行時に考慮すべきいくつかの例としては、翻訳を修正すること（古いリポジトリではDjangoテンプレートを使用していましたが、新しいものではvue-i18nを使用）、ルーティングの修正、インポートの修正、その他多くの依存関係を心に留める必要がありました。

どんな利点があったのか

• ユーザーにとって - Angular.jsのサポートを完全に取り除いた結果、ロード時間が明らかに短くなりました。
• 開発者にとって - ２つの別々のリポジトリを持つ結果として、パイプラインの実行時にフロントエンドとバックエンドの間の依存がなくなり、より早いデプロイが可能になりました。Angular.js関連のバックポーティングをサポートする必要もなくなりました。
• 企業にとって - 機能とバグ修正のより速いデプロイが可能になります。

私たちが学んだこと

コミュニケーションが非常に重要です。プロダクトオーナーとステークホルダーに移行の重要性と利点を伝えたことが、このプロセスを速めるのに大いに貢献しました。

また、移行リリースごとにステークホルダーに通知し、生じる可能性のあるバグに注意を払うように頼み、進捗についてもループ内に入れることを確認しました。
もっとうまくできたことの一つは、移行されたモジュールの一部を小さな部品に分割することです。例えば、最後に移行したモジュールは最も大きく重要なものでした（ユーザーの多数が使用するメインビューを含んでいました）。私たちはそれを小さな部分に分割しないことに決めたため（それをするのはかなり難しいという理由で）、はるかに多くの努力とテストが必要でした。

自分の移行を計画中ですか？

私たちが分割中に行ったことの要約：

• 移行に必要なすべてのステップを追跡するためのリリースプランのドキュメントを持つ
• 移行チェックリストのドキュメントを持つ
• 移行されたコンポーネントを追跡し、各チャプターミーティングで進捗や障害について議論するエクセルシートを持つ
• プロダクトオーナーとステークホルダーに移行の必要性と影響について伝えることで、スプリント中に移行に関連するタスクを含めることができます
• たくさんの忍耐力を持つこと :)
  
  こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
  https://dev.to/sendcloud/the-process-of-decoupling-our-front-end-h1p