Conoce cómo podemos ayudarte a adaptar tu fábrica a la industria 4.0.

En la era de la transformación digital, adaptarse a las últimas tecnologías se convierte en un imperativo para mantener la competitividad en el mercado.

Comexi, un líder en soluciones para envases flexibles, ha demostrado su compromiso con la innovación al embarcarse en un ambicioso proyecto de migración y optimización hacia React.

Acompáñanos a descubrir cómo este caso de éxito puede inspirar tu propio viaje hacia la industria 4.0.

Comexi: Un Pionero en Soluciones de Envases Flexibles.

Fundado en 1954, Comexi es un grupo empresarial con presencia global en Europa, Norteamérica, Centroamérica, Sudamérica y Asia, ofreciendo soluciones al sector de fabricación de envases flexibles. 

Con su plataforma digital, Comexi Cloud , la empresa ha buscado ofrecer análisis y servicios de valor para impulsar la competitividad de las empresas del sector de la fabricación.

El Reto: Optimización sin interrupciones.

El desafío era claro: optimizar la aplicación Comexi Cloud para mejorar su rendimiento sin interrumpir la operatividad del sistema. 

En este caso, Comexi buscaba reducir la carga y el peso de su aplicación Comexi Cloud para aumentar su velocidad de funcionamiento, minimizando el impacto para los usuarios y clientes.

Este ambicioso proyecto requería un equipo de profesionales expertos en el desarrollo en tecnologías como Symfony, React, Angular y ciberseguridad, capaces de cumplir los objetivos a través del cumplimiento de buenas prácticas en los distintos desarrollos.

Para abordar este reto, el equipo de desarrollo de Coditramuntana se puso manos a la obra y propuso migrar de una plataforma basada en AngularJS a una más moderna, con React, manteniendo la funcionalidad existente e introduciendo nuevas mejoras.

Elementos como la documentación del código, el uso de herramientas de test automatizado, la optimización de los procesos de despliegue de código y el uso de "código limpio" fueron requisitos indispensables para trabajar. Aquí es donde entra Coditramuntana.

La solución: migración gradual y metodológica.

La plataforma existente estaba implementada en AngularJS, cuyo soporte fue depreciado en el mes de enero del 2022. 

La plataforma original estaba desarrollada en AngularJS, que dejó de recibir soporte en enero de 2022. AngularJS, un framework creado por Google, fue pionero en permitirnos crear componentes de interfaz de usuario de manera integral. Su enfoque se centró en construir aplicaciones de single-page (SPA) utilizando HTML y TypeScript, con el objetivo específico de facilitar el desarrollo de plataformas web corporativas complejas.

En contraste, React es una biblioteca extremadamente popular respaldada por una sólida comunidad en la web, que se especializa en el desarrollo de componentes basados en JavaScript.

Las Ventajas de React: agilidad y control.

Las ventajas que encontramos al realizar la migración a tecnologías como React son múltiples:

• En React, la interfaz se actualiza automáticamente cuando cambia el modelo de datos. A diferencia de AngularJS, que realiza actualizaciones bidireccionales, React simplifica este proceso al actualizar solo la interfaz cuando hay cambios en los datos.

• React agiliza el desarrollo de aplicaciones web al proporcionar a los desarrolladores un mayor control sobre el estado de la aplicación. Esto permite una gestión más eficiente de los datos y una experiencia de usuario más fluida.

• Gracias a su Virtual DOM, React optimiza el rendimiento de las aplicaciones al reducir el costo de los cálculos en el navegador. Además, esta arquitectura facilita la migración entre diferentes versiones de React, lo que garantiza la escalabilidad y la adaptabilidad de la aplicación a largo plazo.

• React se centra en la construcción de componentes de interfaz de usuario (UI), lo que permite una mayor modularidad y reutilización del código. La extensa comunidad de desarrolladores de React colabora constantemente en la creación de nuevas librerías y herramientas, proporcionando a los desarrolladores acceso a una amplia gama de recursos para mejorar y personalizar sus aplicaciones.

• La curva de aprendizaje de React es más suave en comparación con otras tecnologías, lo que facilita la incorporación de nuevos desarrolladores al equipo. Dada la gran cantidad de profesionales con experiencia en React, encontrar talento cualificado y ampliar el equipo de desarrollo es más rápido y eficiente.

En conclusión,  actualmente, React ofrece numerosas ventajas sobre AngularJS, incluyendo una interfaz que se actualiza dinámicamente en respuesta a cambios en el modelo de datos, un rendimiento mejorado gracias a su Virtual DOM, y una amplia comunidad de desarrolladores que facilita la adopción y el mantenimiento de la plataforma.

Migración pantalla por pantalla.

Comexi Cloud presenta diversas pantallas, cada una con una función distinta y separadas entre sí, lo que permite llevar a cabo la migración de manera gradual y controlada, pantalla por pantalla.

En este punto crucial del proyecto, el equipo debía decidir entre mantener la metodología y las librerías existentes o actualizarlas para luego proceder con la migración. 

Finalmente, se optó por conservar la metodología y las librerías actuales, ya que resultaba más eficiente mantener una sola base de código. Esta decisión también nos permitió analizar de manera más exhaustiva los cambios necesarios para la actualización a la última versión de React, maximizando así la eficiencia y facilitando la incorporación de las últimas tecnologías.

Al inicio, creamos una estructura web con rutas diferenciadas por parámetro para cada aplicación. De esta forma, es posible seguir visualizando la versión anterior para, en caso de necesidad, volver atrás para revisar.

Para comenzar, establecimos una estructura web con rutas diferenciadas por parámetro para cada aplicación, lo que nos permitía seguir accediendo a la versión anterior si fuera necesario. Luego, procedimos a copiar las funcionalidades a la nueva aplicación, adaptando las partes necesarias y actualizando la visualización de los datos conforme a las últimas convenciones de diseño responsive.

Una vez validada la migración de una pantalla y realizadas las pruebas correspondientes con éxito, procedimos a reemplazar todas las rutas existentes para dirigirlas a la nueva URL con el parámetro de React. Avanzamos así a lo largo y ancho de toda la aplicación hasta llegar a la parte de autenticación, cerrando así el ciclo completo y eliminando las referencias a las URL de la versión anterior.

El 13 de febrero de 2024, concluimos con el despliegue final de la migración. Sin embargo, nuestro trabajo continúa en curso. Actualmente, estamos mejorando el código mediante la actualización de React de la versión 16 a la 18, y también estamos transitando de Redux a Toolkit para optimizar aún más la aplicación y adaptarla a los últimos estándares.

Clave del éxito.

El proyecto ha resultado un éxito gracias la confianza mutua entre Comexi y Coditramuntana, atendiendo a los requerimientos necesarios para desarrollar satisfactoriamente el proyecto, confiando en las soluciones aportadas por nuestros profesionales y mostrando predisposición a implantar las tecnologías punteras que desde Coditramuntana desarrollamos día a día para mejorar continuamente la plataforma.

Resultados tangibles: Mayor usabilidad y eficiencia.

Una vez finalizado todo el proceso de migración a React, se han conseguido los siguientes hitos:

• Conversión a una plataforma más útil para los usuarios y actualizada, gracias a la gran cantidad de herramientas de las que dispone React.

• Reducción de la carga de la aplicación y un peso más ligero, lo que se traduce en mayor velocidad de carga y mejora en la usabilidad.

• Mejora del mantenimiento de la aplicación.

• Facilitación en la incorporación de nuevos profesionales dedicados al mantenimiento, quienes necesitan menos tiempo para aprender todo el conocimiento necesario.

• Proceso de migración finalizado con un impacto mínimo en el funcionamiento de la aplicación y en la usabilidad para los usuarios.

Conclusiones.

El caso de éxito de Comexi demuestra que la migración a tecnologías modernas como React puede transformar radicalmente una plataforma, proporcionando una base sólida para la innovación continua y el crecimiento empresarial en la era digital.

En resumen, la migración exitosa de Comexi a React es un testimonio del poder de la colaboración, el compromiso y la adopción de tecnologías punteras en el impulso de la transformación digital en la industria B2B. Este caso de éxito sirve como inspiración para todas las empresas que buscan adaptarse y prosperar en el mundo digital en constante evolución.

¿Tienes un proyecto? ¡Contacta con nosotros y desccubre como la Transformación Digital te ayuda a optimizar tu empresa hacia un futuro más ágil y competitivo en la Industria 4.0!