Flex to HTML5 Migration: A 5-Step Assessment Framework

by Damien Scott and Mundi Morgado

Adobe Flex is dead. Now what?

Owners of Flex applications, such as product managers and IT directors, are now faced with the task of updating a long list of legacy web applications.

So, how do you move your business forward while transitioning applications to a new platform as efficiently as possible?

In this post, we’ll outline a 5-step Migration Assessment Framework that we use to help our clients prioritize applications for migration from a proprietary platform like Adobe Flex to open standards like HTML5.

Consider the Opportunity Costs of Staying with Flex

Cost will always be a major concern when transitioning platforms. However, sticking with a proprietary system can set your business back.

Adobe Flex-based applications require the installation of the Flash browser plug-in to render and display the application. At a minimum, the inability to provide a responsive UI impedes the usability of these applications via tablets and mobile devices.

Furthermore, IOS devices such as iPhones and iPads are now supported by over 90% of businesses and they don’t support Flash.

flash crash flex to html5 migration

The all-too-familiar Flash crash screen

Open Standards Provide A Better Choice

Open standard technologies, such as HTML5, allow enterprises to provide users with more device choices and tap into a larger pool of software development talent.

This means a larger ecosystem of tools and frameworks for technologies based on open standards vs. proprietary systems. With open technologies developers can often start on small servers and scale up to larger systems in production. Businesses can use the most cost-friendly hardware, software, and service vendors to meet their needs.

In short, open standards like HTML5 give users flexibility as a given business (and number of devices) grows. This ensures compatibility across different platforms.

Why is HTML5 the Better Solution?

By 2016, more than 2.1 billion mobile devices will have HTML5 browsers. Need more reasons for a Flex to HTML5 migration? Here are more incentives to make the switch:

  • Freedom from vendor lock-in. With a proprietary system, the company may go out of business or discontinue their product (e.g. Adobe Flex).
  • It’s much faster than Flash. As one popular graphic site noted, “HTML5 has been developed by many developers…On platforms such as Linux and Mac OS X, HTML5 excels, and it has been shown that HTML5 content outshines Flash by running at least 58% faster than Flash.”
  • It can easily include all varieties of media. HTML5 includes options to directly add video, audio, canvas elements, and the integration of scalable vector graphics content. This means that multimedia content can be added without plug-ins and APIs, and the interactive features of your website can display without issues.
  • A majority of app developers have already made the move and trust the platform. Sencha.com pointed out that as of 2014, over 60% of developers had already migrated over to HTML5 in a surveyed sample.
  • It can save time and money when building apps. Since HTML5 is built for responsiveness, it’s possible to create an interactive HTML, CSS, and JavaScript web app that displays properly across different devices. This will greatly reduce the cost of developing and maintaining separate desktop and mobile versions of an application.

At the end of the day, HTML5 is the native language of the web browser. HTML5 obviates the need for proprietary plug-ins. It’s supported in over 90% of all browsers, and that figure is growing every day.

A 5-Step Assessment Framework for Flex to HTML5 Migration

Now that you’re ready to start moving your applications from Flex to HTML5, how do you prioritize them for migration? We assess and quantitatively rank each application using the following five criteria.

Here’s a breakdown of each step of the migration assessment process, featuring questions that you and your team should ask yourselves.

Step 1. Estimate the value to the business. Working closely with business and technology stakeholders, the business value can be estimated using a weighting of criteria important to your business. For example, is the ability to deliver a global solution important? What about accessibility and multi-lingual support?

Step 2. Determine the value of multiple channels. What are the opportunities that would come up if you migrated your application to a modern framework? What’s the additional business value of making the application available to mobile devices (phones/tablets)? Quantify the additional revenue growth, customer adoption, or impact on customer retention.

Remember, one of HTML5’s key advantages is that it’s capable of rendering multimedia content without installing a plug-in. Its fluidity in responsive display across different devices, from IOS and Android computers, tablets, and phones, makes it a major asset and reduces cost of ownership.

Step 3. Assess current security risks. Where do you have significant security implications that you need to mitigate? Has your enterprise been subject to Phishing attacks?

Flex applications are vulnerable to Cross-site Scripting (XSS). As well known-developer Elrad Elrom notes, “The concept of downloading Flash applications, decompiling, modifying them, and then re-compiling them is one of the oldest and most used cross-scripting techniques out there.” Here are a few examples:

  • Account theft. Attackers can grab cookie information, which may lead to account hijacking.
  • Changing page content. This misleads the user to re-enter their information on a phony site, place incorrect content or read user’s cookies.
  • Vulnerability in Flex applications. Flash is often used on a page that includes other scripts. Your application may interact with other Web page elements, which can open a security hole, since Web pages that generate content without filtering dynamically without filtering the results first. Attackers can exploit the application and create XSS.
Cross-Scripting attack- for flex to html5 migration

From Slideshare presentation by Elad Elrom, “Top Security Threats to Flash/Flex Applications.”

Step 4. Weigh the fit to modern UI frameworks. During your assessment, think about this question: If we look at feature-functions, do existing UI frameworks (e.g. Angular, KendoUI) provide the required controls and interactions that will simplify the migration of required functionality? Is there some heavy complexity within the application there that is going to inhibit the Flex to HTML5 migration?

Step 5. Gauge the complexity of the migration. In this step, take into consideration all of the major adjustments beyond the technical side. Ask yourself and your team: what would onboarding a new platform mean from an organizational point view?

Step 6. Evaluate the overall risk vs. business value. Finally, add up your scores for the value-based steps (1 and 2) and all the risk-based steps (3, 4 and 5) plot your applications on a 2×2 grid with risk on the vertical axis and business value on the horizontal axis, as shown below.

Flex to HTML5 Migration Grid

A Migration Assessment Grid of Different Apps

  • No Brainers. Applications with high business value and low risk should be your first candidates for migration.
  • Kill/Sunset. On the other hand, an end-of-life plan should be created for applications with low business value and high risk.
  • MegaProjects. Applications with high business value, but high risk will have large payoffs, but require significant time and resources to execute, so they should be prioritized after the value of migration is proven and experience is obtained through migrating the No Brainers
  • Low Priority. Finally, applications with low business value and low risk aren’t usually worth the cost of migration. These applications aren’t typically worth spending the time to migrate until everything else on your list is done.

Create Your Own Flex to HTML5 Migration Strategy

This 5-step framework can help you to prioritize applications for migration from a proprietary platform like Adobe Flex to open standards like HTML5. Now that you know which applications are the best candidates to migrate, you can now move on to develop a plan, budget, and roadmap for these applications.

Migrate platforms with our Enterprise Re-Platforming Solutions.

Did you enjoy this post? Please let us know in the comments—we’ll be reading them all!

Photo credit: Geese-610098_640 by Foto-Rabe licensed under CC0 Public Domain. Slideshare presentation: “Top Security Threats to Flash/Flex Applications and how to Avoid them” by Elad Elrom. Adobe, Flex and Flash are either registered trademarks or trademarks of Adobe Systems Incorporated.

Damien Scott

Technology Practice Director at TandemSeven
Damien Scott has over 20 years of experience designing, architecting, and building software solutions and commercial software products for the financial services, insurance and healthcare industries.He combines his industry knowledge and technology experience to design and deliver solutions architected to meet today’s requirements and is extensible to meet future needs.

Mundi Morgado

Director, Front-End Architect at Tandemseven
With 18 years of experience, Mundi has successfully led Front-End development efforts for countless large-scale enterprise business applications. As director of TandemSeven’s Front-End Practice, he guides the development of engineering best practices, and provides leadership across projects.
He has deep expertise in all aspects of Front-End technology including responsive design techniques, open source frameworks, accessibility, performance optimization, and development operations.

Latest posts by Mundi Morgado (see all)

Related Posts