Coneix com podem ajudar-te a adaptar la teva fàbrica a la indústria 4.0.

En l'era de la transformació digital, adaptar-se a les últimes tecnologies es converteix en un imperatiu per a mantenir la competitivitat en el mercat.

Comexi, un líder en solucions per a envasos flexibles, ha demostrat el seu compromís amb la innovació en embarcar-se en un ambiciós projecte de migració i optimització cap al framework de desenvolupament React.

Acompanya'ns a descobrir com aquest cas d'èxit pot inspirar el teu propi viatge cap a la indústria 4.0.

Comexi: Un Pioner en Solucions d'Envasos Flexibles.

Fundat el 1954, Comexi és un grup empresarial amb presència global a Europa, Amèrica del Nord, Amèrica Central, Amèrica del Sud i Àsia, oferint solucions al sector de fabricació d'envasos flexibles.

Amb la seva plataforma digital, Comexi Cloud, l'empresa ha buscat oferir anàlisi i serveis de valor per a impulsar la competitivitat de les empreses del sector de la fabricació.

El Repte: Optimització sense interrupcions.

El desafiament era clar: optimitzar l'aplicació Comexi Cloud per a millorar el seu rendiment sense interrompre l'operativitat del sistema. 

En aquest cas, Comexi buscava reduir la càrrega i el pes de la seva aplicació Comexi Cloud per a augmentar la seva velocitat de funcionament, minimitzant l'impacte per als usuaris i clients.

Aquest ambiciós projecte requeria un equip de professionals experts en el desenvolupament en tecnologies com Symfony, React, Angular i experts en ciberseguretat, amb capacitats de complir els objectius a través del compliment de bones pràctiques en els diferents desenvolupaments.

Per afrontar aquest repte, l'equip de desenvolupament de Coditramuntana es va posar a la feina i va proposar migrar la plataforma basada en AngularJS  a una més moderna, en React, mantenint les funcionalitats existents i introduint noves millores.

Elements com la documentació del codi, l'ús d'eines de test automatitzat, l'optimització dels processos de desplegament de codi i l'ús de "codi net" van ser requisits indispensables per a treballar. Aquí és on entra Coditramuntana.

La solució: migració gradual i metodològica.

La plataforma original estava desenvolupada en una versió d'AngularJS que va deixar de rebre suport al gener de 2022

AngularJS, un framework creat per Google, va ser pioner a permetre'ns crear components d'interfície d'usuari de manera integral. El seu enfocament es va centrar a construir aplicacions de single-page (SPA) utilitzant HTML i TypeScript, amb l'objectiu específic de facilitar el desenvolupament de plataformes web corporatives complexes.

En contrast, React és una biblioteca extremadament popular recolzada per una sòlida comunitat en la web, que s'especialitza en el desenvolupament de components basats en JavaScript.

Els Avantatges de React: agilitat i control.

Els avantatges que trobem en realitzar la migració a tecnologies com React són múltiples:

• En React, la interfície s'actualitza automàticament quan canvia el model de dades. A diferència de AngularJS, que realitza actualitzacions bidireccionals, React simplifica aquest procés en actualitzar només la interfície quan hi ha canvis en les dades.

• React agilitza el desenvolupament d'aplicacions web en proporcionar als desenvolupadors un major control sobre l'estat de l'aplicació. Això permet una gestió més eficient de les dades i una experiència d'usuari més fluida.

• Gràcies al seu Virtual DOM, React optimitza el rendiment de les aplicacions en reduir el cost dels càlculs en el navegador. A més, aquesta arquitectura facilita la migració entre diferents versions de React, la qual cosa garanteix l'escalabilitat i l'adaptabilitat de l'aplicació a llarg termini.

• React es centra en la construcció de components d'interfície d'usuari (UI), la qual cosa permet una major modularitat i reutilització del codi. L'extensa comunitat de desenvolupadors de React col·labora constantment en la creació de noves llibreries i eines, proporcionant als desenvolupadors accés a una àmplia gamma de recursos per a millorar i personalitzar les seves aplicacions.

• La corba d'aprenentatge de React és més suau en comparació amb altres tecnologies, la qual cosa facilita la incorporació de nous desenvolupadors a l'equip. Donada la gran quantitat de professionals amb experiència en React, trobar talent qualificat i ampliar l'equip de desenvolupament és més ràpid i eficient.

Migració pantalla per pantalla.

Comexi Cloud presenta diverses pantalles, cadascuna amb una funció diferent i separades entre sí, la qual cosa permet dur a terme la migració de manera gradual i controlada, pantalla per pantalla.

En aquest punt crucial del projecte, l'equip havia de decidir entre mantenir la metodologia i les llibreries existents o actualitzar-les per a després procedir amb la migració. 

Finalment, es va optar per conservar la metodologia i les llibreries actuals, ja que resultava més eficient mantenir una sola base de codi. Aquesta decisió també ens va permetre analitzar de manera més exhaustiva els canvis necessaris per a l'actualització a l'última versió de React, maximitzant així l'eficiència i facilitant la incorporació de les últimes tecnologies.

A l'inici, creem una estructura web amb rutes diferenciades per paràmetre per a cada aplicació. D'aquesta manera, és possible continuar visualitzant la versió anterior per a, en cas de necessitat, tornar enrere per a revisar.

Per a començar, vam establir una estructura web amb rutes diferenciades per paràmetre per a cada aplicació, la qual cosa ens permetia continuar accedint a la versió anterior en cas de ser necessari. Després, vam procedir a copiar les funcionalitats a la nova aplicació, adaptant les parts necessàries i actualitzant la visualització de les dades conforme a les últimes  convencions de disseny responsive.

Una vegada validada la migració d'una pantalla i realitzades les proves corresponents amb èxit, vam procedir a reemplaçar totes les rutes existents per a dirigir-les a la nova URL amb el paràmetre de React. Avancem així de llarg a llarg de tota l'aplicació fins a arribar a la part d'autenticació, tancant així el cicle complet i eliminant les referències a els URL de la versió anterior.

El 13 de febrer de 2024, vam finalitzar el desplegament final de la migració. No obstant això, el nostre treball continua en curs. Actualment, estem millorant el codi mitjançant l'actualització de React de la versió 16 a la 18, i també estem transitant de Redux a Toolkit per a optimitzar encara més l'aplicació i adaptar-la als últims estàndards.

Clau de l'èxit.

El projecte ha resultat un èxit gràcies la confiança mútua entre Comexi i Coditramuntana, atesos els requeriments necessaris per a desenvolupar satisfactòriament el projecte, confiant en les solucions aportades pels nostres professionals i mostrant predisposició a implantar les tecnologies capdavanteres que des de Coditramuntana desenvolupem dia a dia per a millorar contínuament la plataforma.

Resultats tangibles: Millo usabilitat i eficiència.

Una vegada finalitzat tot el procés de migració a React, s'han aconseguit les següents fites:

• Conversió a una plataforma més útil per als usuaris i actualitzada, gràcies a la gran quantitat d'eines de les quals disposa React.

• Reducció de la càrrega de l'aplicació i un pes més lleuger, la qual cosa es tradueix en major velocitat de càrrega i millora en la usabilitat.

• Millora del manteniment de l'aplicació.

• Facilitat en la incorporació de nous professionals dedicats al manteniment, que necessiten menys temps per a aprendre tot el coneixement necessari.

• Procés de migració finalitzat amb un impacte mínim en el funcionament de l'aplicació i en la usabilitat per als usuaris.

Conclusions.

El cas d'èxit de Comexi demostra que la migració a tecnologies modernes com React pot transformar radicalment una plataforma, proporcionant una base sòlida per a la innovació contínua i el creixement empresarial en l'era digital.

En resum, la migració reeixida de Comexi a React és un testimoniatge del poder de la col·laboració, el compromís i l'adopció de tecnologies capdavanteres en l'impuls de la transformació digital en la indústria B2B. Aquest cas d'èxit serveix com a inspiració per a totes les empreses que busquen adaptar-se i prosperar en el món digital en constant evolució.

Tens un projecte? Contacta amb nosaltres i descobreix com la Transformació Digital t'ajuda a optimitzar la teva empresa cap a un futur més àgil i competitiu en la Indústria 4.0!