FlexNG: Adobe Flex to Angular 8+ Code Transformation Tool

RAPID FlexNG
RAPID FlexNG

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

Converting Flex application into Angular web applications

Metrixware is a 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, Publishers, ESN …).

Metrixware‘s RAPID 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.

Next to read  Quest for a CMS in 2018 : KeystoneJS Feedback

The challenges of modernization projects

As part of an 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 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.
  • optimisation of costs and deadlines:
    • the need for a 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

Fonctionnalités de l'outil FlexNG

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 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 of HTML/CSS -ups that can be created independently by dedicated specialists
  • Simplified management of internationalization
Next to read  How I switched my blog from OVH to Google Container Engine

Tool Capabilities

Flex to Angular process
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 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.

Next to read  Java In Production : some useful tools for profiling and diagnostic.

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

About Sylvain Leroy 68 Articles
Senior Software Quality Manager and Solution Architect in Switzerland, I have previously created my own company, Tocea, in Software Quality Assurance. Now I am offering my knowledges and services in a small IT Consulting company : Byoskill and a website www.byoskill.com Currently living in Lausanne (CH)