We hear this question over and over from clients wanting to replace their front-end technology with Angular, but are confused whether the time is right or perhaps they should wait for Angular 2.0.
This question would never have been an issue if Angular 2.0 was backward compatible, unfortunately this is not the case and the upcoming version is a major release which will include significant and incompatible changes.
Angular 2.0 Release Date
I hope the title did not mislead you. No one really knows when Angular 2.0 will actually be out, and the popular guesstimate is end of 2015.
Angular 2.0 as you may know relies on the ES6 standard which the next version of ECMAScript standard code named Harmony. Angular 2.0 is thus dependent upon the next JavaScript version which will comply with ES6. The release date for ES6 is estimated June 2015 however guesstimates talk about at the end of 2015 as well here.
Given the nature of this standard to linger (a little history reveals that it took more than ten years to release the current version of ES5), I’d not be surprised if ES6 release date will be delayed to unknown date. Of course I’d be the first person to cheer if they do stick with their scheduled release date mid 2015.
On top of all that let’s not forget that once the standard is out, it could take a while from the time everyone hits the streets to party and until all major browsers actually support the new standard.
If you catch my drift, the release date of ES6 and Angular 2.0 which relies on it is not yet in stone and it might just take quite a while until it is actually usable on all major browsers (at this point I am really proud of myself for not saying something nasty about Internet Explorer. Wink).
Do We Wait?
Every business should obviously take into consideration the aspects most important to them, however in general our recommendation is to go with current Angular version 1.x and not to wait.
The rationale behind our recommendation is primarily as explained above that no one knows when Angular 2.0 will be actually available (released+ ES6 supported on all major browsers) – could be end of 2015, Q1 2016, end of 2016 or perhaps even later?
Secondly, if the right development practices are followed with Angular 1.x as explained later, then when 2.0 comes out the transition would be possible and relatively easy. Also, there is another plus side for teams that have not yet taken the dive into Angular: most of the experience gained would be applicable in Angular 2.0 as well.
Good Angular Coding Practices
There are two good coding practices that would serve you well not only with your current application but would also greatly decrease the pain when migrating to version 2.0. They are really easy to follow but they require discipline:
Don’t Heavily Rely on $scope
Relying on the $scope is bad practice since it leads to what is known as “scope soup” which is mess of tangled code glued on the $scope object: listeners, objects, variables, functions, which is not only messy and unreadable/testable but also will be very hard to get rid of when we want to move on to Angular 2.0 which entirely removes controllers.
In Angular 2.0 ES6 classes will be used instead of $scope, so getting used to not using $scope now will make our transition smoother.
So what do we do? eliminate scope by using the ControllerAs syntax in your HTML and ui-router states, and a vm (View-Model) variable in your JS Controller. Note how in all the following examples the $scope variable is not referenced or used at all.
Controller as in HTML
<div ng-controller="MainController as vm">
<h1>{{vm.caption}}</h1>
<section ng-controller="SectionController as vm">
<h2>{{vm.name}}</h2>
<ul ng-repeat="i in vm.items">
<li>{{i.details}}</li>
</ul>
</section>
</div>
Set this to vm
(function() {
'use strict';
function SectionController(sectionDataService) {
var vm = this;
vm.name = 'Section Placeholder';
vm.items = sectionDataService.getDataItems();
}
angular
.module('MyModule')
.controller('SectionController', SectionController);
SectionController.$inject = ['sectionDataService'];
})();
In ui-router States
function config($routeProvider) {
$routeProvider
.when('/users', {
templateUrl: 'Users.html',
controller: 'UsersController',
controllerAs: 'vm',
resolve: {
usersManageService: function(usersService) {
return usersService.getUsers();
}
}
});
}
Keep Your Controllers Thin
Controllers should only serve as a thin layer to provide the view layer access to the data models. The models should be exposed by underlying services and the controller’s sole purpose should be to externalize them to the HTML (view) layer.
With thin controllers we are getting ready for Angular 2.0 where controllers are totally eliminated, but also get the bonus of not needing to test our controllers since they do not contain any logic anymore.
So how do we do that? just follow few simple rules.
Delegate Data Operations to Services
Carve out data handling logic into a service(s). Have all data CRUD / REST operations done exclusively in a service. This also elevates hiding implementation details by using the facade design pattern. For example your service can make use of $http or Restangular internally so in the future you could easily replace the underlying wrapped services while keeping your own service’s API intact.
Use UI-Router Resolves
If your application is designed as a state machine and you’re using a ui-router then you could use the state’s resolve function to retrieve the required data automatically for you prior to switching to the new state. In fact, other logic could be put into the resolve function, for example validation whether switching from state X to state Y is allowed (e.g. does the user have enough privileges to switch from Users View state to Users Edit state?).
Leveraging the UI-Router’s state resolve function is an ideal place to put data retrieval and validation operations, instead of otherwise putting that logic into the controller.
Summary
It is unclear how soon Angular 2.o and its underlying ES6 would be available, which raises the big questions whether new projects should be put on ice until then or should we go with version 1.x after all.
Our general recommendation is not to hold off projects since it could take quite a while before Angular 2.0 is really available and ES6 supported on major browsers, as long as you make sure to follow some guidelines that would make the transition smooth: Make as little use of the $scope and keep your controllers lightweight.
If you follow our recommendations then you’re already writing better, more correct code, but also laying the grounds for easy migration to the much anticipated Angular version 2.0.
Leave A Comment