Algum tempo atrás, houve uma tarefa para atualizar o monólito de front-end de um grande sistema de alta carga que funciona 24 horas por dia, 7 dias por semana - para transferir da estrutura Knockout desatualizada para o React moderno. O desafio surgiu quando a arquitetura antiga não atendia mais aos requisitos de negócios. A equipe foi incumbida de implementar novos recursos, mas na arquitetura existente, tornou-se quase impossível fazê-lo. Gostaríamos de compartilhar nossa experiência sobre como tornar esse projeto mais fácil.
A parte principal do nosso produto é um cenário de negócios único, os módulos individuais dos quais estão intimamente interligados. Você não pode simplesmente pegar e reescrever de forma limpa - é um projeto separado com seu próprio orçamento. E durante o desenvolvimento, você terá que manter duas versões paralelas, uma das quais, aliás, não funcionará - nenhuma parte da aplicação tem valor em si mesma, sem comunicação com outras partes. Portanto, começamos a reescrever seu módulo por módulo, janela por janela.
Um dos principais requisitos do projeto era que a transição passasse despercebida para os usuários. Portanto, todas as mudanças foram escondidas dentro - nossos desenvolvedores construíram a troca de dados entre o antigo e o novo framework, limpou muitos erros que aparecem em testes devido a uma arquitetura não padrão.
A seguir, contaremos a você mais sobre as principais tarefas que precisávamos resolver durante a migração e como lidamos com elas.
Como fazer amigos entre duas gerações do framework
React é uma das ferramentas de desenvolvimento de front-end mais populares do mundo. Interage perfeitamente com outras ferramentas que possam ser necessárias em cada projeto específico, permite criar aplicações web escaláveis de qualquer nível de complexidade.
Knockout e React tratam os dados de maneira fundamentalmente diferente. A tarefa é garantir que todos os módulos, não importa em que estejam escritos, entendam a tempo o que está acontecendo com os dados, como eles mudam.
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.