July 7, 2015

2134 Views

AngularJS for Single Page Applications

When we decided to explore the JavaScript world, we tried to overcome most of the shortcomings we had experienced in Flex.

Findings in AngularJS

  • Support of two-way data binding with “ng-model” that can be passed as expression in angular.
E.g. <input type="radio" ng-value="opt.value" ng-model="controller.ngModel">Example</label>

When the data changes in the control, the “controller.ngModel” gets updated and vice versa.

Instead in Flex

<s:TextInput id="input3" text="@{input4.text}"/>

<s:TextInput id="input4"/>

Or

<s:Label text="Use the Binding tag."/>

<s:TextInput id="input5"/>

<s:TextInput id="input6"/>

<fx:Binding source="input5.text" destination="input6.text" twoWay="true"/>

It seemed clearer and straight forward to bind a variable in AngularJS than in Flex.

  • Extensive use of directives which can be related with Flex components. But, directives have more to them; they can be a control or can be a behavior to a control.

E.g.

<arc-content-form template="template.fields" content-record="form"

name="template.displayName"

readonly="controller.ngReadonly" is-parent-nested="true">

</arc-content-form>

In the above example “arc-content-form” is an element directive and “content-record” is an attribute directive. An element directive can be called a component, but an attribute directive is a behavior that we add to a control. A behavior can be a property or functional aspect that can be computed during the runtime.

  • CSS usage and the available AngularJS bootstrap library that makes responsive designing much simpler. CSS has seriously evolved in the past few years with the advent of LESS and SASS styles of writing functional code. This has made theme-based customization quite simple.
  • Better use of singleton instances like factories, services, and controller

E.g.

module.exports = angular.module("module", ['module1’])

.factory("XYZ",[‘$scope’,function($scope){

// code goes here

}])

.service("ABC", ",[‘$scope’, ‘service1’, ‘service2’,function($scope, service1, service2){

// code goes here

}])
  • We have many unit testing frameworks like Jasmine, Chai and Mocha which make the functional testing along with UI testing simpler. To perform end-to-end testing, we have frameworks like Protractor.

Example of Jasmine Script for unit testing:

describe('Test Module directive', function() {

var $compile, $rootScope, scope, compiledElement,innerScope, elementCtrl;

beforeEach(angular.mock.module('TestModule'));

beforeEach(inject(function(_$compile_, _$rootScope_){

$compile = _$compile_;

$rootScope = _$rootScope_;

scope = $rootScope.$new();

scope.model = "testVal";

scope.label = "test label";

compiledElement = $compile("<text-line-field ng-model='model' label='\"test\"'>")(scope);

scope.$digest();

}));

it('should compile', function() {

expect(compiledElement).toBeDefined();

});});

Other discoveries while exploring the AngularJS framework

AngularJS is a framework that is all about modularization. This means that a small portion of the webpage can be an AngularJS module. It therefore has more flexibility when it comes to web page development, as an independent module can be made out of AngularJS framework in a whole page. As the world is fast moving towards Open Source Technologies, this aspect comes real handy, as the code can be shared and extended by others with the support of GIT subversion. Anybody can make a fork in the branch and make changes to the existing code, which can later be merged in the master/dev branch with pull requests.

AngularJS uses DI (Dependency Injection) architecture to make the dependency available to the dependent client code. All dependency injection classes created, are singleton. So, we just have a single instance of a service or a factory or a controller, which gets injected to another.

Another very important and well accepted feature demanded in the current trend is the “Single Page Application”, and AngularJS page life cycle provides full support to this feature. Instead of clogging the web server with multiple static web pages, we may have multiple modules being created dynamically with AngularJS web application development.

Last, but not the least, the accessing data with JSON/XML is quite extensive with a lot of API support that makes the whole data access layer very simple for developers. Also async operations have never been so simple with the use of $q promise service.

E.g.:

// code in controller

var schemaLoadPromise = ContentTypeSchemaCache.getSchema(data);

schemaLoadPromise.then(function(schema) {

// code goes here

})

// code in ContentTypeSchemaCache service

getSchema: function(data) {

var deferred = $q.defer();

$http(urlData).success(function(data) {

_deferred.resolve(data);

}).error(function(data, status) {

var error = {};

error.status = status;

error.errorData = data;

_deferred.reject(error);

});

return deferred.promise;

}

The above is a good example of an async operation where we make a request to the database for data but can still do other things while the async request is in the pending state.

Self-Comparison

 

Features

Angular JS

Flex

 

 

 

Cross-Browser

Yes

No

Cross Platform

Yes

No

One Page Application

Yes

Yes

Modular

Yes

Yes

Scalable

Yes

Not much; because a developer needs to know ActionScript to add or remove functionalities from an existing codebase. Whereas, open source JavaScript can work with each other. E.g. A jQuery developer can integrate a component in Angular JS app or vice versa

Object Oriented

No

Yes

Responsive Design

Yes

Yes, but cannot be handled by an external framework e.g. Twitter Bootstrap in Angular JS

Plugin Based

No

Yes

CSS and Less Support

Yes

No (very minimal CSS support)

Test Driven Development Support

Yes

Hard to accomplish as we have very limited numbers of build frameworks like Gulp or Grunt, which provide us the tools to create tasks that fit our specific needs.

Testing Frameworks

Yes

Support of functional Unit Testing like Flex Unit, but integration Testing frameworks are less popular

Huge online support

Yes support is big and code is available to everybody on GIT/Stash, so anybody can branch or fork the master copy and can ask for a merge with a pull request

There is support but very restricted to the Apache site. And the turnaround time for a bug fix is huge.

 

Conclusion

Flex as a technology has decreased in importance. This was especially prominent after its shift from Adobe to Apache, due to the introduction of Tablets and Mobile-based devices. Flex had its good times when the whole world appreciated its good component library and its data access layers LCDS (Life Cycle Data Services). But now, as web applications move towards open source and standards, and with the emergence of HTML5, JavaScript and its frameworks have more or less captured the spotlight from Flash and Flex, mainly because of its open source support and scalability aspects. Flex will still be favored by some who want to make data-driven applications allowing limited users, but AngularJS and other Javascript-based frameworks will rule the web world, at least for some time, in the current context.

References