Hey folks… It took very long time for me to set up my blog site back on block (and my laziness too :D)… So here is my first post in 2013.
As most of you know me, I’ve been working as a Hard Core Flex Developer for the past few years, however the latest buzz around the block is HTML 5 and it is getting momentum nowadays, so thought of post something useful to the people like me who want a smooth transition from Closed Web (Flex) to Open Web (HTML5). This has given me a great chance to explore the wide variety of open web technologies and frameworks including the some which I had experience on.
When we talk about Flex to HTML 5 application migration or portability, the first thing comes to most of the developer’s mind is “INSTANT CONVERSION TOOL”, meaning MXML to HTML and Action Script to Java Script and make them work as it is across the browsers, sounds simple, isn’t it ??? But the answer is difficult. The output may not give the complete set of features from the actual Flex Application or may not convert based on the complexity of the application, but some extent the conversion could happen a bit (say 1%). So what about Flex / Flash developers who have been working so long and look for the opportunity to move to a platform where he / she can survive for the future? There is been a number of questions floating around the Flash Platform community over the last 15 months on transition, supports and features and so on and on… During the early stage of the movement the community has come up with many conversion tools and frameworks, to name some – SWIFFY, Wallaby, FalconJS, Jangaroo…
However, talking from enterprise application perspective the code should adhere to many things mainly Standards, Portability, Feature Persistence and Ease of Use Development, but those conversion tools have failed to achieve these essential things. So when it comes to migration preserving every aspect of the existing application we need a powerful framework to complete the migration without any hurdles. At the same time, the framework should allow the developer to use their existing skills – meaning very small learning curve.
So far, we talked about the facts behind the migration / conversion. Based on my experience, reading articles, and analysis I have come up with some set of findings
Discover The Features
- Connectivity needs
HTML 5 has great advantage in working offline because of the introduction of Offline Data Storage and Local Storage features. Look for the existing connectivity based features in Flex Application and go for it.
Code wise, moving from Flex to HTML5 takes some significant analysis, which includes the complexity of UI components, models, delegates, services, and data workflow across the application.
- Usage of Assets (images, sounds, videos, PDFs…)
Again, it depends on the application’s new design whether we can go with existing set of assets or not. Generally, people prefer new design. So, obviously one cannot use all the assets from the existing application. In other case, if the same design is going for migration, one can use existing set of assets. However, most of the Flex applications have huge number of assets in .SWF format (to reduce the size and increase the quality), in this case new assets creation will be the only choice. Here, if the source (.fla) file is in place it will reduce some significant amount of time in re-creating all the assets from scratch.
- Architectural dependencies
If the Flex application is developed using some MVC frameworks like Parsley, SWIZ, Mate or Cairngorm, then the amount of effort in analyzing and moving the code would take more time. We have many options to migrate such MVCs. (some of them are listed below). One important point to note, it requires significant knowledge of the existing application architecture (say an Architect or Tech Lead).
Available JS frameworks which supports the results of discovery,
- Ext JS enables apps to leverage features like infinite scrolling and widgets for high performance grids, trees and menus. Flex developers can easily adopt the migration because of the usage of components and models as same as Action Script and MXML.
- As of now, this is the best framework available for moving applications to HTML 5. It has numerous features comparatively same as Flex, and more over the problem with other frameworks are handling server side data especially binary data, but the upcoming version of ExtJS has powerful feature for transferring the same binary (AMF) data between client and server.So the amount of effort in migrating the code when it comes to client-server communication will reduce significantly. Due to this feature, it would be the best ever option for huge data transfer applications. No other framework has this feature as of now, however AMF.js has some set of features for binary data transfer (can use this for low budget application). After Flex, ExtJS community is growing. And moreover it has industry leading support.
- The best testing suite JASMINE JS is part of this framework, makes the testing of application is easier than ever. Alternatively, we also have QUnit, JSUnit… for testing.
- It has in-built Build JS files, which is highly essential for enterprise application. Since I everyday interact with Build Engineers here, I know the importance of Build Scripts. Like Ant and MAVEN build frameworks, it also has super cool features.
jQuery UI — jQuery UI builds on jQuery to provide user interface behaviors (including drag and drop, resizing, selection and sorting); animations and transitions; advanced effects; and high-level, themeable user interface controls (e.g.: accordion, auto-complete, date picker, tabs, etc.).
Bootstrap UI – One of the powerful UI frameworks for building excellent User Interfaces with super simple customizations. This would be the better option for application which is mainly targeting User Interfaces.
Kendo UI – Kendo UI is JQuery-based framework for rich UI, builds HTML5 apps that look native on any device, and builds desktop and mobile applications for any browser. Like Sencha ExtJS, this framework has numerous UI components for different set of devices. And moreover this framework is part of TELERIK (one of the leading UI components kit in the market).
jQTouch — jQTouch is a jQuery plugin from Sencha Labs targeting mobile web development and offering native animations, navigation and history management, and user interface themes for mobile WebKit browsers such as the iPhone, Nexus One, and Palm Pre. While jQTouch is well documented and easy to use, development has all but stopped and initial sample applications show that it is a bit buggy and even the sample applications has some performance issues.
KnockoutJS — Knockout simplifies the development of complex web application user interfaces by applying the Model-View-View Model pattern. It offers declarative bindings in the DOM; automatic wiring of these bindings to their backing view models; automatic UI refresh based on observable and dependent observable model properties; easy extensibility through custom bindings; and the ability to generate sophisticated nested UIs from templates dynamically based on model data. Knockout integrates with many popular web frameworks, supports all mainstream browsers, and allows developers to use their choice of template engines.
Angular JS — Angular is a web application framework similar to KnockoutJS. It provides declarative UI templates; two-way data binding; implements the MVC pattern; integrates with RESTful JSON services; and offers dependency injection. Developed by Google, its ambitious goal is to re-imagine HTML markup as if it had been originally designed with dynamic applications in mind. Like KnockoutJS (and unlike Sencha Touch), it does not provide a library of user interface controls, but instead focuses on generating and updating HTML from templates driven by application data. Google’s favorite framework now.
Yepnope JS – Yepnope is an asynchronous conditional resource loader that is super-fast, and allows you to load only the scripts that your users need. For critical asset management purpose this would be the ideal option.
- Sencha Ext JS
- Adobe Edge & CreateJS
- Knockout and Angular JS
- Backbone JS
- Bootstrap UI
- Yepnope JS and more …
So in conclusion, we have many options to go with for migration. However, choosing frameworks and technologies is purely based on the set of features, the implementation of client-server communication available in the existing application and last but not least developer’s learning curve and their skills (costly as it goes).
Disclaimer: The views / thoughts expressed on this blog are entirely mine.
3 thoughts on “Flex to HTML 5 – My Thoughts”
is there any way or some scripting with which we can easily migrate our code to angularjs
Are you talking about moving your Action Script 3.0 code?