July 6, 2015

2038 Views

The Evolution from Flex to AngularJS

Introduction

Flash has been ruling the Web world for quite some time now when it comes to Rich Internet based applications. Flex has also played an instrumental role in designing enterprise applications where the app was more data-centric and report oriented. Domains like Banking/Finance and HealthCare have continued to use the rich internet features of Flex like Charting and UI controls, where layouting a bunch of controls was quite easy with MXML (XML based language) integrated with Flex. Another very nice aspect of Flex is the two-way data binding to and fro with the model-view. The best aspect of Flex is that it is based out of ActionScript 3.0, which is a partial object oriented scripting language. Unlike Javascript, it is a more semantically and syntactically evolved scripting language.

Summary

As the current demand continues to focus on responsive design layout, and with the introduction of data on the move technologies that can be enabled on devices like Tablets and mobile phones, it has become much more important to have a language that can support both “Responsive Design” and “Cross Device” compatibility.

AngularJS by Google has delivered a Javascript framework which is well supported across all platforms (cross-device compatibility) and browsers (different browsers support). AngularJS is a framework which wraps around Javascript and works on DOM model. This helps with the introduction of HTML5, where we have many tag-based controls like Audio and Video DOM components. And secondly, it is made to be cross-browser compatible with support for all the latest browsers. AngularJS uses its directive feature to customize HTML5 DOM elements.

Example

<div class="container-fluid .col-md-12" ng-if =””>
<label ng-repeat="opt in  controller.optsObj" >
<input type="radio" ng-value="opt.value" ng-model="controller.ngModel">Example</label>
</div>

The example above shows how a DOM element can be customized to treat it as a different control. The type says ‘radio’, which treats an input element as a radio button. And then we have the ng-model as a directive, which acts on the data to display on the element.

Ref:http://www.w3schools.com/html/html_form_input_types.asp

The Findings

Things that I liked the most about Flex:

  1. Two-way data binding and support in both MXML and Action Script Format.
  2. Modular approach, where independent modules can be made and integrated in a single container.
  3. Support for new frameworks like Parsley and RobotLegs that are based on the dependency injection design pattern.
  4. The code-behind style of coding technique, which is made possible by using MXML for Views and screen elements, and having code classes that add dynamic behavior to the controls.
  5. Good support of Flash Builder IDE which has several plugins that can be integrated for code management like SVN plugin.

Where I find Flex lacking:

  1. Bad Garbage Collection techniques and no direct way for garbage collection. The best example would be Flex module loader which has severe garbage collection issues; here, the events and objects are not cleared when a module is unloaded.
  2. It is a closed system when it comes to integrating other open source frameworks written in different languages.
  3. Poor CSS and HTML iframe integration support.
  4. The component library APIs are nascent and less scalable when compared with the JavaScript component libraries.
  5. The plugin needs to be installed in all OS to make Flash work on a browser.
  6. Asynchronous data handling does not work properly as it freezes the screen, since Flash works on a single thread.
  7. No responsive design frameworks available to fit the screen aspect ratio.
  8. Testing the screen element is another grey area where none of the testing frameworks support the functional and screen aspect together. Also, we do not have a standard integration testing framework.
  9. As its popularity decreases, there is a shortfall in online support and blogs for Flex. On the other hand, due to the growing demand of JS based libraries, we have a huge pool of online support.

A more detailed take on the comparison and important and useful finds will be discussed in my next blog.

Reference