jQueryまたはレガシーなReactフロントエンドを、ページごとに最新のReactまたはNext.jsに移行します。

一部の製品は機能し、収益を上げていますが、そのフロントエンドは変更が困難になっています。テンプレート全体に広がるjQuery、数年前のReactクラスコンポーネント、またはPages Routerに残っているNext.jsアプリなどです。完全な書き換えは、製品を数ヶ月間停止させます。私は別の方法をとります。古いコードと新しいコードを並行して実行し、ページを一度に1つずつ移行するため、ユーザーにとって大規模な切り替え日は決してありません。

私はNDAの下で過去のプロジェクトでまさにこれを実行しました。製品が稼働したまま、jQueryフロントエンドをページごとにReactに移行しました。

スターターでは計画を提供します。古いフロントエンドを読み込み、そのページと共有部分をマッピングし、リスクをリストアップし、アプローチの動作サンプルとして小さなページを1つ移行します。スタンダードでは最大3つのページまたは画面を移行します。アドバンストでは最大8つのページを移行し、必要な共有コンポーネントを構築し、そのデータ用のTypeScript型と主要なフロー用のテストでカバーします。

残るもの：バックエンド、URL、ユーザーが知っている動作。変わるもの：コードの構成方法。これにより、次の機能は一度に1箇所で記述されます。納品後14日間、合意どおりに機能しないものは無料で修正します。

ページの順序と計画は、通話なしで注文チャットで合意されます。移行された各ページは個別に提供され、営業日ごとに書面によるステータスノートが届きます。

プロジェクトを完了するための手順
1. 古いフロントエンドをマッピングする - テンプレート、スクリプト、コンポーネントを確認し、ページ、共有部分、グローバルステートやインラインスクリプトなどのリスクのあるものをリストアップします。
2. 順序を合意する - 書面による計画が提供されます。どのページが最初に来るか、何がそれに伴って移行されるか、そして古いコードと新しいコードが両方存在している間に製品をどのように共有するか。
3. ブリッジ - 新しいReactまたはNext.jsコードは古いコードの隣に設定され、各ページを所有する側に送信するルーティングが設定されます。
4. ページを1つずつ移行する - 各ページは再構築され、古いバージョンと比較され、個別に切り替えられます。これにより、問題が発生しても製品全体ではなく1つのページに影響します。
5. 引き渡し - 移行されたページ、残りの部分の更新された計画、および次のページで従うべきパターンに関する短いメモ。