Il y a quelque temps, il y avait une tâche de mettre à jour le monolithe frontal d'un grand système à charge élevée qui fonctionne 24h/24 et 7j/7 - pour passer du framework Knockout obsolète au React moderne. Le défi s'est posé lorsque l'ancienne architecture ne correspondait plus aux besoins de l'entreprise. L'équipe a été chargée de mettre en œuvre de nouvelles fonctionnalités, mais dans l'architecture existante, il s'est avéré presque impossible de le faire. Nous aimerions partager notre expérience sur la façon de rendre un tel projet plus facile.
La partie principale de notre produit est un scénario commercial unique, dont les modules individuels sont étroitement interconnectés. Vous ne pouvez pas simplement le prendre et le réécrire proprement - c'est un projet séparé avec son propre budget. Et lors du développement, vous devrez maintenir deux versions parallèles, dont l'une, de plus, ne fonctionnera pas - aucune partie de l'application ne porte de valeur en elle-même, sans communication avec d'autres parties. Par conséquent, nous avons commencé à réécrire son module par module, fenêtre par fenêtre.
L'une des exigences clés du projet était que la transition passe inaperçue pour les utilisateurs. Par conséquent, tous les changements étaient cachés à l'intérieur - nos développeurs ont construit l'échange de données entre l'ancien et le nouveau framework, nettoyé de nombreuses erreurs qui font surface dans les tests en raison d'une telle architecture non standard.
Ensuite, nous vous en dirons plus sur les principales tâches que nous devions résoudre pendant la migration, et comment nous y avons fait face.
Comment se faire des amis entre deux générations du cadre
React est l'un des outils de développement front-end les plus populaires au monde. Il interagit parfaitement avec d'autres outils pouvant être nécessaires dans chaque projet spécifique, vous permet de créer des applications Web évolutives de tout niveau de complexité.
Knockout et React gèrent les données de manière fondamentalement différente. La tâche est de s'assurer que tous les modules, peu importe ce dans quoi ils sont écrits, comprennent à temps ce qui se passe avec les données, comment elles changent.
Knockout- React-, . Knockout, React. , :
Knockout React.
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.