ビジネス クリティカルな製品のモノリシック フロントエンドのシームレスな移行

少し前に、24 時間年中無休で動作する大規模で高負荷のシステムのフロントエンド モノリスを更新するタスクがありました。これは、時代遅れの Knockout フレームワークから最新の React に移行するためです。古いアーキテクチャがビジネス要件に適合しなくなったときに、課題が発生しました。チームは新しい機能の実装を任されましたが、既存のアーキテクチャでは、それを実行することはほとんど不可能であることが判明しました。このようなプロジェクトをより簡単にする方法について、私たちの経験を共有したいと思います。

当社の製品の主要部分は単一のビジネス シナリオであり、その個々のモジュールは密接に相互接続されています。それを受け取ってきれいに書き直すことはできません。それは、独自の予算を持つ別のプロジェクトです。また、開発中は、2 つの並行バージョンを維持する必要があります。さらに、そのうちの 1 つは機能しません。アプリケーションのどの部分も、他の部分と通信しない限り、それ自体に価値はありません。したがって、そのモジュールをモジュールごとに、ウィンドウごとに書き直しました。

プロジェクトの重要な要件の 1 つは、移行がユーザーに気付かれないようにすることでした。したがって、すべての変更は内部に隠されていました.開発者は、古いフレームワークと新しいフレームワークの間のデータ交換を構築し、そのような非標準アーキテクチャのためにテストで表面化した多くのエラーを取り除きました。

次に、移行中に解決する必要のある主なタスクと、それらにどのように対処したかについて詳しく説明します。 

フレームワークの 2 世代間で友達を作る方法

React は、世界で最も人気のあるフロントエンド開発ツールの 1 つです。特定のプロジェクトごとに必要となる可能性のある他のツールと完全に相互作用し、あらゆるレベルの複雑さのスケーラブルな Web アプリケーションを作成できます。

Knockout と React は、データを根本的に異なる方法で処理します。タスクは、すべてのモジュールが、何が書き込まれているかに関係なく、データに何が起こっているのか、どのように変化するのかを時間内に理解することです。

Knockout- React-, . Knockout, React. , :

1. Knockout React.

   
   
   
   
   

2. React, Knockout, React.

   
   
   
   
   

, Knockout React, React Knockout.

HTML- . React- Knockout, , view- Knockout, React- JavaScript .

React «», , - , , .. , .

, API MutationObserver. React- , React.

React Knockout-. . - , , . . , « ».

, ( – Knockout). React- , , . – React, . – Knockout. , -, , . 

UI- 

UI-. Storybook. - , UI-. Storybook . , -, , -, .

, . , , , . , , . 

Storybook , , . Faker. , , . , .

, Storybook . UAT-, . Storybook, , , .

, , . :

• , , .

  
  
  
  
  

• , Storybook.