Find out how we can help you adapt your factory to Industry 4.0.

In the era of digital transformation, adapting to the latest technologies becomes imperative to remain competitive in the market.

Comexi, a leader in flexible packaging solutions, has demonstrated its commitment to innovation by embarking on an ambitious migration and optimisation project to React.

Join us to discover how this success story can inspire your own journey towards Industry 4.0.

Comexi: A Pioneer in Flexible Packaging Solutions.

Founded in 1954, Comexi is a business group with a global presence in Europe, North America, Central America, South America and Asia, offering solutions to the flexible packaging manufacturing sector. 

With its digital platform, Comexi Cloud, the company has sought to provide valuable analytics and services to boost the competitiveness of companies in the manufacturing sector.

The Challenge: Optimisation without interruptions.

The challenge was clear: optimise the Comexi Cloud application to improve its performance without disrupting the operability of the system. 

In this case, Comexi sought to reduce the load and weight of its Comexi Cloud application to increase its operating speed, minimising the impact for users and customers.

This ambitious project required a team of professional experts in the development of technologies such as Symfony, React, Angular and cybersecurity, capable of meeting the objectives through compliance with best practices in the different developments.

To address this challenge, the Coditramuntana development team got down to work and proposed migrating from a platform based on AngularJS to a more modern one, with React, maintaining the existing functionality and introducing new improvements.

Elements such as code documentation, the use of automated testing tools, the optimisation of code deployment processes and the use of "clean code" were essential requirements to work with. This is where Coditramuntana comes in.

The solution: gradual and methodological migration.

The existing platform was implemented in AngularJS, which was deprecated in January 2022. 

The original platform was built on AngularJS, which was deprecated in January 2022. AngularJS, a framework created by Google, was a pioneer in allowing us to create UI components in a comprehensive way. Its focus was on building single-page applications (SPAs) using HTML and TypeScript, with the specific goal of facilitating the development of complex corporate web platforms.

In contrast, React is an extremely popular library backed by a strong web community that specialises in developing JavaScript-based components.

The React Advantages: agility and control.

There are many advantages to migrating to technologies such as React:

• In React, the UI is automatically updated when the data model changes. Unlike AngularJS, which performs the bi-directional updates, React simplifies this process by only updating the interface when data changes.

• React streamlines web application development by giving developers greater control over the state of the application. This allows for more efficient data management and a smoother user experience.

• Thanks to its Virtual DOM, React optimises application performance by reducing the cost of computation in the browser. In addition, this architecture facilitates migration between different versions of React, ensuring the scalability and adaptability of the application in the long term.

• React focuses on building user interface (UI) components, allowing for greater modularity and code reuse. React's extensive community of developers is constantly collaborating on the creation of new libraries and tools, providing developers with access to a wide range of resources to enhance and customise their applications.

• React's learning curve is smoother compared to other technologies, making it easier for new developers to join the team. Given the large pool of experienced React professionals, finding qualified talent and expanding the development team is faster and more efficient.

In conclusion, React currently offers numerous advantages over AngularJS, including an interface that updates dynamically in response to changes in the data model, improved performance thanks to its Virtual DOM, and a large developer community that facilitates the adoption and maintenance of the platform.

Screen-by-screen migration.

Comexi Cloud has several screens, each with a different function and separate from each other, allowing the migration to be carried out in a gradual and controlled manner, screen by screen.

At this crucial point in the project, the team had to decide whether to keep the existing methodology and libraries or to update them and then proceed with the migration. 

In the end, it was decided to keep the current methodology and libraries, as it was more efficient to maintain a single code base. This decision also allowed us to more thoroughly analyse the changes needed to upgrade to the latest version of React, thus maximising efficiency and facilitating the incorporation of the latest technologies.

At the beginning, we create a web structure with differentiated paths per parameter for each application. In this way, it is possible to continue viewing the previous version and, if necessary, go back to review it.

To begin with, we set up a web structure with parameter-differentiated paths for each application, allowing us to continue accessing the previous version if necessary. We then proceeded to copy the functionalities of the new application, adapting the necessary parts and updating the data visualisation according to the latest responsive design conventions.

Once the migration of a screen had been validated and successfully tested, we proceeded to replace all existing routes to the new URL with the React parameter. We moved through the entire application until we reached the authentication part, thus closing the complete cycle and eliminating references to the URLs of the previous version.

On 13 February 2024, we completed the final deployment of the migration. However, our work is still ongoing. We are currently improving the code by upgrading React from version 16 to 18, and we are also transitioning from Redux to Toolkit to further optimize the application and adapt it to the latest standards.

Key to success.

The project has been a success thanks to the mutual trust between Comexi and Coditramuntana, attending to the necessary requirements to develop the project satisfactorily, trusting in the solutions provided by our professionals and showing predisposition to implement the cutting-edge technologies that Coditramuntana develops day by day to continuously improve the platform.

Tangible results: Increased usability and efficiency.

Once the whole migration process to React has been completed, the following milestones have been achieved:

• Conversion to a more useful and up-to-date platform for users, thanks to the large number of tools available in React.

• Reduced application load and lighter weight, resulting in faster loading speed and improved usability.

• Improved application maintenance.

• Facilitating the incorporation of new maintenance professionals, who need less time to learn all the necessary knowledge.

• Migration process completed with minimal impact on application performance and usability for users.

Conclusions.

Comexi's success story demonstrates that migration of modern technologies such as React can radically transform a platform, providing a solid foundation for continued innovation and business growth in the digital age.

In short, Comexi's successful migration to React is a testament to the power of collaboration, engagement and adoption of cutting-edge technologies in driving digital transformation in the B2B industry. This success story serves as an inspiration for all companies looking to adapt and thrive in the ever-evolving digital world.

Do you have a project? Contact us and discover how Digital Transformation helps you to optimise your company towards a more agile and competitive future in Industry 4.0!