Hace algún tiempo, hubo una tarea para actualizar el monolito de front-end de un sistema grande y de alta carga que funciona las 24 horas del día, los 7 días de la semana, para transferir del obsoleto marco Knockout al moderno React. El desafío surgió cuando la arquitectura antigua ya no coincidía con los requisitos comerciales. El equipo tenía la tarea de implementar nuevas funciones, pero en la arquitectura existente resultó casi imposible hacerlo. Nos gustaría compartir nuestra experiencia sobre cómo hacer más fácil un proyecto de este tipo.
La parte principal de nuestro producto es un escenario empresarial único, cuyos módulos individuales están estrechamente interconectados. No puede simplemente tomarlo y reescribirlo limpiamente, es un proyecto separado con su propio presupuesto. Y durante el desarrollo, tendrá que mantener dos versiones paralelas, una de las cuales, además, no funcionará: ninguna parte de la aplicación tiene valor en sí misma, sin comunicación con otras partes. Por lo tanto, comenzamos a reescribir su módulo por módulo, ventana por ventana.
Uno de los requisitos clave del proyecto era que la transición pasara desapercibida para los usuarios. Por lo tanto, todos los cambios estaban ocultos en el interior: nuestros desarrolladores crearon el intercambio de datos entre el marco antiguo y el nuevo, limpiaron muchos errores que surgen en las pruebas debido a una arquitectura tan no estándar.
A continuación, le contaremos más sobre las principales tareas que tuvimos que resolver durante la migración y cómo las afrontamos.
Cómo hacer amigos entre dos generaciones del framework.
React es una de las herramientas de desarrollo front-end más populares del mundo. Interactúa perfectamente con otras herramientas que puedan ser necesarias en cada proyecto específico, le permite crear aplicaciones web escalables de cualquier nivel de complejidad.
Knockout y React manejan los datos de manera fundamentalmente diferente. La tarea es garantizar que todos los módulos, sin importar en qué estén escritos, comprendan a tiempo lo que está sucediendo con los datos y cómo cambian.
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.