Byoskill has collaborated with the company Metrixware, in the realization of a tool for the automatic transformation of Adobe Flex applications to more modern technologies such as Angular 8.

Converting Flex application into Angular web applications

Metrixware is a software publisher at the service of Key Accounts and ETI for more than 23 years. Metrixware assists companies in digital transformation and legacy management projects for their core business applications (Banks, Insurance, Industrials, Administrations, Software Publishers, ESN …).

Metrixware‘s RAPID technology offer is aimed at software publishers and major accounts to solve their most critical problems:

• Budgets under constraint
• TMA cost reduction
• Management of obsolescence, toxic applications
• Security issues
• Core business applications based on aging technical platforms, the most frequent targets of attacks
• Time to market
• Improve the ability to innovate functionally, without Bigbang
• Carry out large and complex operations

Flex is a development solution created by Macromedia in 2004 and taken over by Adobe in 2006. It enables the creation and deployment of cross-platform Rich Internet Applications (RIAs) using Flash technology. Its programming model uses MXML (based on XML) and ActionScript 3.0, based on ECMAScript.

Flex technology produces a .swf file embedded in an Html page. The richness of the graphical interface is offered through component libraries.

The challenges of modernization projects

As part of application modernization, the target solution must meet the following characteristics:

• the porting on a modern and evolutionary base in time :
  • the use of recognized frameworks and libraries (Angular or React or Vue)
  • the implementation of good architectural practices for the years to come
  • Facilitating the industrialization of the build and run of the product:
  • applying more standard development methods, more recognized by the current community of developers.
  • industrialization of developments: testing tools, deliveries, versioning, etc.
• optimization of costs and deadlines:
  • the need for transparent, deterministic, and incremental project management to limit risks.
  • the maximum reuse of the existing code: business and graphical
  • automation as a solution to reduce costs and bugs
• change management:
  • the graphical interfaces must be preserved to limit the adaptation time to the new version
  • the developers responsible for maintenance must be an integral part of the project

Features of the FlexNG tool

The advantages of this technical solution are numerous:

• Undeniable advantage ⇒ possible recovery of a part of the code: indeed, the ActionScript language (ECMAScript 3) used in Flash/Flex is close to the TypeScript language (ECMAScript 5+) used by Angular.
• The recovery and porting of the Flex code can be automated as far as possible (following the original code).
• The component approach (WebComponents) in Angular reduces migration costs and risks. The FLEX migration is then performed by components and thus facilitates code reuse.
• Performance is improved due to the fact that the modernized application will be lighter than the thick client made in Flex
• The immediate availability of resources allows the rapid constitution of a team of developers with the client’s service providers and limits the risks of dependencies.
• a simplified integration of HTML/CSS mock-ups that can be created independently by dedicated specialists
• Simplified management of internationalization

Tool Capabilities

Easy switch from ActionScript3 to TypeScript

The Flex application, developed in ActionScript 3 language, is close to the TypeScript target language (ECMAScript 5 standard). It is therefore perfectly conceivable to be able to take ActionScript and transform it (manually or automatically) into TypeScript.

Getting HTML views from MXML

HTML views can be obtained from FLEX description MXML files. However, these HTML views will only be used as mock-ups because they cannot integrate the “view controllers” part, due to the difference in philosophy (and thus implementation) between Flex and Angular technologies.

Porting Flex code to Angular

The conversion of MXML / AS files to HTML / TS is automatable because the languages are quite close to each other.

Industrialization

Javascript applications easily allow the implementation of DevOps best practices.

This part can be easily capitalized by generating and integrating CI/CD (Continuous Integration / Continuous Delivery) description files directly into the project source code (gitlab-ci.ylm for example).

Advantages of the solution and limitations

The fact that the two languages, Flex and Typescript, are close to each other (ECMAScript 3 for one, ECMAScript 5+ for the other) opens the possibility of recovering a part of the existing code, in particular all that has appeal to business rules. The migrated code can be easily integrated into an Angular application structured in a standard way, thus ensuring the maintainability and scalability of the modernized application. The code portability is, moreover, automatable since both languages are based on known and stable standards.

The reuse of Flex code requires upstream work to be carried out to detect the code inherent in Flex technology, which must not be recovered, and the code corresponding to the business that must be ported to Angular.

Finally, and this is the final objective, the GUI is entirely rewritten in HTML5/CSS3. This part, finally relatively independent, could be treated upstream with web designers specialized in UX/UI allowing a complete review of the ergonomics of the application, generally built on aging or even non-existent ergonomics.

Epilogue

The tooling makes it possible to significantly automate the transformation of a Flex application into an Angular one.

For more information or a demonstration, please contact me.

More information on metrixware.com

Donate to the blog

[wpedon id=”1721″ align=”center”]