Angularjs framework

Infrastructure concerns

Every application has various concerns. One classification of these concerns is application infrastructure concerns and business concerns. The business concerns are specific to an application and differ with each one of them. On the other hand infrastructure concerns are somewhat similar and with right parameterization we can reuse them across applications.

Various libraries and frameworks exist in any technology space to help us with the infrastructure concerns. Writing infrastructure code is (when it is solved by someone else already) is stealing from your employer / client (http://codebetter.com/jeremymiller/2008/11/07/how-to-design-your-data-connectivity-strategy/)

A sample list of such infrastructure concerns in a modern JavaScript application

• Routing, Navigation & History
• Template Engines
• Data-binding
• Communicate with the server to read / update the model
• Responsive Web-design
• DOM manipulation
• Asynchronous Programming
• UI Widgets
• Feature detection
• AJAX

Code Organization

Another level of reuse is the reuse at the conceptual level / design level / idea level. Frameworks excel in this form of reuse. Frameworks are opinionated. They enforce or provide some default architecture / structure to your application. Frameworks have inversion of control. That means frameworks may enforce a life-cycle and typically the framework calls your application code and not vice versa.

UI Architectural patterns are all about Separation of Concerns and having more maintainable code – Divide and Conquer. Frameworks may typically follow (an) UI Architectural pattern(s)

Let us now see how angularjs helps in Code Organization and Infrastructure concerns

What is AngularJS?

I will use and elaborate a slightly modified version of  Amit’s answer to What is AngularJS? When is it needed? on Quora http://www.quora.com/What-is-AngularJS-When-is-it-needed/answer/Amit-Asthana

AngularJS is a JavaScript MVW (Model View Whatever – A term from http://coding.smashingmagazine.com/2012/07/27/journey-through-the-javascript-mvc-jungle/) framework developed by Google that lets you build well structured, easily testable, declarative and maintainable front-end applications which provides solutions to standard infrastructure concerns.

Let us see each one of these

Structure

Angularjs code you write typically falls into one of these buckets

Services –

If you are talking to the outside world, this is a perfect use case for a service – from (http://nathanleclaire.com/blog/2014/03/15/angularjs-isnt-mvc-its-sdc/)

Directives –

Directives are a declarative (Some call this functional, but i believe this is declarative) way of manipulating / working with the DOM. The Web standards too are polarizing in this direction – Example: Web Components. Directives are one of the key aspects of angular (often misunderstood and under used)

Directives are either completely new HTML elements, or attributes that you can throw on existing elements, to perform some kind of DOM manipulation. They can have their own scope and they can be reused, which is one of their most useful properties. – from http://nathanleclaire.com/blog/2014/03/15/angularjs-isnt-mvc-its-sdc/

Views –

The html templates written using angularjs directives and standard html elements

Model –

Angular lets you write non intrusive POJO model objects. Angularjs implements its own dirty checking http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933#9693933 which means you can write your models as POJO objects, but it does come with a performance hit.

Controllers –

“glue” of your application. Controllers use model (methods and data) provided by the services and provide them to the directives. – adapted from http://nathanleclaire.com/blog/2014/03/15/angularjs-isnt-mvc-its-sdc/

Testable

Angularjs is designed for ease of unit testing. It is made easier by

• Dependency Injection
• Standard Mock Service Providers

The whole of Angular is linked together by Dependency Injection (DI). It’s what it uses to manage your controllers and scopes. Because all your controllers depend on DI to pass it information, Angular’s unit tests are able to usurp DI to perform unit testing by injecting mock data into your controller and measuring the output and behavior. In fact, Angular already has a mock HTTP provider to inject fake server responses into controllers. – from http://www.sitepoint.com/10-reasons-use-angularjs/

Declarative

See the discussion on directives above.

Infrastructure Concerns

In addition to these angular provides solutions to these infrastructure concerns

• Template Engine – Angular provides a DOM based template engine.
• Data-binding – Bidirectional reactive data-binding
• Routing
• A context aware pub-sub system
• GUI widgets

It will be interesting to see Polymer custom elements and angularjs directives against each other.

References:

http://martinfowler.com/eaaDev/uiArchs.html

http://www.quora.com/What-is-AngularJS-When-is-it-needed/answer/Amit-Asthana

http://nathanleclaire.com/blog/2014/03/15/angularjs-isnt-mvc-its-sdc/

http://www.sitepoint.com/10-reasons-use-angularjs/

http://stackoverflow.com/questions/9682092/databinding-in-angularjs/9693933#9693933