en
de

ngEurope 2014

20 November 2014
| |
Reading time: 4 minutes

A couple of weeks ago I attended ngEurope in Paris, a conference about the present and future of AngularJS. AngularJS, commonly referred to as Angular, is an open source  JavaScript framework, maintained by Google and a strong community, that assists with creating single-page web applications.

I have been using Angular successfully on various projects for our UK clients for the last one and a half years and was very keen to meet the team behind Angular and to hear what new features would be included in the upcoming 2.0 release of the framework. The conference featured developers from Google and the community that are actively developing Angular as we speak.

The Present: Angular 1.3

The team behind Angular had just released version 1.3 a few days prior to the event and so it made sense that some of the talks featured the new capabilities of the framework. I will highlight some of the most notable enhancements.

No more support for IE8

Much to my regret the Angular team decided to drop support for Internet Explorer 8 (IE8). Don’t get me wrong, this is the right decision because anyone who has worked in Web Development will agree that older versions of Internet Explorer are just difficult to support. On the other hand, this means that some of our clients won’t get the benefit from the performance enhancements introduced in Angular 1.3 because their corporate infrastructure only provides IE8. The team also focused on reducing the memory footprint and speeding up DOM manipulations.

Support for Accessibility

I was pleased to hear that the Angular team take accessibility very seriously and provide developers with the means to make our rich internet applications accessible for people with disabilities. Angular 1.3 now comes bundled with a new module called ngAria. The acronym ARIA stands for Accessible for Rich Internet Applications.

The ngAria module provides support for adding ARIA attributes that convey state or semantic information about the application in order to allow assistive technologies to convey appropriate information to people with disabilities. I would recommend following Marcy Stutton (@marcystutton) on that topic. She gave an overview of what we as developers need to consider to make our web applications accessible.

Applying Object Oriented Design-Patterns to the Web

Also worth mentioning is the talk about Angular design patterns. Long gone are the years where your JavaScript code was manually tested and just consisted of some thrown in JQuery functions. By using frameworks like Angular you have to treat your client facing code with the same respect as your backend Java/.NET etc. code. All the design patterns  we use on a daily basis on the backend apply for the front end as well. I must admit that I wasn’t any different in the beginning and started off by adding all of my business logic into Angular controllers. As the project’s grow in size this can easily and quite quickly turn into unreadable and hard to maintain code. One of the solutions to this issue is to use the Active Record Pattern. The active record pattern turns the model you expose through your controller into the main driver of business logic.

function OrderFactory($http) {
function Order(order) {
  angular.extend(this, order || {});
  this.toppings = this.toppings || {};
}

Order.prototype.addTopping = function(topping) {
  this.toppings.push(topping);
};

Order.prototype.submit = function() {
  return $http.post('http://pizza.example.com/orders', this)
    .then(function(response){
      return response.data;
  });
};

Order.prototype.calculatePrice = function() {
  var total = 0;
  angular.forEach(this.toppings, function(topping) {
    total += topping.price;
  });
  return total;
};

Order.getById = function(orderId) {
  return $http.get('http://pizza.example.com/orders/'+orderId)
    .then(function(response) {
      return new Order(response.data);
    });
  };
  return Order;
}

function OrderController(Order) {
  var self = this;
  self.order = new Order();

  self.addTopping = function(topping) {
    order.addTopping(topping);
  };

  self.placeOrder = function(order) {
    order.submit().then(function(savedOrder) {
      console.log(savedOrder);
    });
  };
}
angular.module('pizza-app').factory('Order', OrderFactory);
angular.module('pizza-app').controller('OrderController', OrderController);

The Future: Angular 2.0

The biggest surprise for me was the announcement that the AngularJS team had decided to do a complete rewrite of Angular for their upcoming version 2.0 and also completely change the concepts we’ve been using in Angular 1.x. There will be no more $scopes, controllers or directives. Having said that, at the moment this is not set in stone and the Angular team hopes for input from the community to finalise the specifications.

Google’s AtScript brings type safety for JavaScript

In addition to the major overhaul of the framework, the team proposes AtScript, a language extension to JavaScript, much like TypeScript from Microsoft. In the future developers will have to choose whether they want to write their Single Page Application in ECMAScript 5 (ES5), ECMAScript 6 (ES6) or AtScript. The reason for providing a language extension is to extend the current JavaScript functionality provided by browsers to make large scale application development more manageable. The extension might include Type Annotations, Field Annotations, Metadata annotations and Type Introspection.

For example, one of the proposals is to use the previously vetted syntax that was proposed in ECMAScript 4 to introduce type declarations. Notice that the translation to ES6 simply strips the type information.

// AtScript
class MyClass {
  methodA(name:string):int {
    var length:int = name.length;
    return length;
  }
}

// ECMAScript 6
class MyClass {
  methodA(name) {
    var length = name.length;
    return length;
  }
}

Example taken from: AtScript Primer (Draft) 

Although AtScript doesn’t exist yet and ES6 is not fully supported by desktop browsers at the moment you can still use ES6 features when writing your Angular applications today. By using Google’s Traceur compiler you can use all of the major ES6 features and Traceur will transpile your code to ES5, which is currently supported by all modern browsers, before you deploy your application.

Conclusion

The news that we may lose the concepts we’ve been using in our Angular 1.x applications received mixed responses from the community. A tweet from the Angular team promised a migration strategy to port existing Angular 1.x applications to 2.x. Having said that, it is up to you to read the proposed features and concepts of Angular 2.x and the Angular team is very much hoping to get input from the community. I am quite keen to use ES6 and AtScript once it has been released and looking forward to writing even better code that allows me to express what I want to say in a more concise and compact way. I would be very keen to hear your story if you’ve already had a chance to write a real Angular application in ES6 in combination with Traceur. Any other comments or feedback is welcome as well of course.

Comments (0)

×

Sign up for our Updates

Sign up now for our updates.

This field is required
This field is required
This field is required

I'm interested in:

Select at least one category
You were signed up successfully.

Receive regular updates from our blog

Subscribe

Or would you like to discuss a potential project with us? Contact us »