Migrating Adobe flex based UI to newer frameworks

Question

With adobe flex reaching end of life, i was wondering what procedures did you follow or can think or to migrate to latest UI (HTML5 , AngularJS) ?

All the links point out pros and cons of doing it. However I am having trouble understand what steps are required while migration UI tech.

Answer 1

We migrated two Flex modules to AngularJS a few years ago. Here is the procedure we followed:

• moved business logic code from Flex frontend to backend so that it can be reused from AngularJS frontend (yes, we had that kind of code!)
• Flex is using BlazeDS framework to communicate with backend. It allows the server to push information to client. If you are in this case you need to find a replacing technology like web sockets or server sent events. We just did long polling
• Backend: almost all business logic code was comprised in Service layer. We wrote a REST API on top of this layer to expose an API to AngularJS. Flex was using the same Service layer exposed via BlazeDS
• Frontend: If your frontend is complex you need to find JS frameworks which provide similar functionality with Flex. We had pie/bar charts in Flex; we draw these charts with D3.js

We had to do this migration because marketing decided we had to run frontend app on mobile devices on both OSes: Android and iOS.

Answer 2

I am in the process of migrating a massive enterprise web app from Flash / Flex to Apache-Royale. For a large app with complex business logic, the Apache-Royale framework has been a huge help. Although some of the component logic is different, it is similar enough that you can swap pretty easily once you are on top of the learning curve. The fact that I was able to save most of the business logic and application structure saved my project from being a deep rewrite that would've taken much longer. I would say that if you app is big and complex, Apache-Royale might be your best solution for an economic port.

Answer 3

We've done a few of these migrations now and the simple answer is "it depends". There are some questions you'd need to answer:

• Is it feasible for end users to install your application locally, rather than accessing it via a web browser? (Implies little or no interaction between your Flex app and its containing HTML/JS page..). This the answer is yes then the migration becomes a lot simpler as you can either use AIR (per another answer) or you can use a packaged solution to contain and deploy your application as-is (next-to-no work for you, but it's a commercial solution so costs money..)

• Are you happy keeping the source code in MXML/AS3, or would you prefer to move all of this to another language (TypeScript or JavaScript)? If you want to keep the code in MXML/AS3 - and reuse most of it - then Apache Royale is the choice as this has the transpiler to turn MXML/AS3 into JavaScript. If you don't want to use MXML/AS3 then you need to choose a new TS/JS framework..

• Do you have a lot of calls to the Flash APIs, or just to the Flex APIs? Apache Royale do support a lot of functionality that is equivalent to things in Flash (events, utils etc) but mostly it's focussed on the Flex APIs. There are even efforts to try to get a near 1:1 mapping between the Flex components and new Royale ones so that the porting effort is even less. But Flash APIs will often need to be manually converted (e.g. we created a number of implementations in Royale for the flash.media.* classes).

The more I've used Royale, the more I've come to like it. There's a bit of a learning curve to start with but when you realise that any JavaScript component can also be accessed from this, it becomes quite powerful. It's best to provide wrappers for these sorts of things (in the same way that you can get TypeScript definitions for them) as then you get the benefits of the type checking etc from the toolchain.

Answer 4

I think Flex died a few years ago I am afraid. I was a flex developer back in the day. I must say the transition for me from Flex /Actionscript to React was tough. I did find the similarity between mark up langauge (e.g. MXML or JSX (React)) and coding language (Actionscript or Javascript(React)) helped a bit. If you have a good handle on Javascript that will help, if you don't learn the basics. Using React or another framework means using the tooling as well, a bundler (usually webpack) , you'll need a working knowledge of Babel as well. I'd go for React because I am biased and its very very popular. Let me know if you'd links any links I found useful. Finally, I would say , just avoid Flex -> JS tools , just suck it up, smile and learn the stuff that's eating the web....

Answer 5

Another option for you might be Apache Royale. This is the evolution of Flex Framework, which allows AS3 code transpile to Javascript/HTML5. Although not perfect, it is an easy way to migrate legacy projects, to keep them running.

For now you will only have to change your UI from the old Flex tags to the new ones, although people are trying to make the old Spark components emulate in the new system.

So basically your is a

If you still prefer to use a new js framework, I found that the easiest for me to adapt was VUE.js

Answer 6

It is a big undertaking to migrate a Flex project to HTML/Javascript. First, if your user base is ok with a desktop application (rather than running your app in the browser), you could skip the migration and use Adobe AIR to package the app.

If the app is required to run in a browser, you need to translate it to a modern framework such as Angular, React or Vue. I investigated these frameworks in detail and concluded that Angular/Typescript was the closest to Flex and the best choice for my migration project, however part of this choice is personal preference. My experience is:

1. The ActionScipt code (AS3) translates easily to Typescript
2. The mxml code translation is the hard part. All the components that come 'out of the box' in Flex (from simple UI elements to charts and datagrids) have to be replaced with third party libraries. More investigation/choice required.
3. Layout in Flex is dead easy. In HTML, things are trickier with CSS/flexbox. No simple translation here

It is a big learning curve unfortunately. As a first step, learn/write a small project in either Angular or Vue. Both have TypeScript native and it is close to AS3. From there, you will understand better how to strategize your migration.