Angular JS has become one of the most popular open source JavaScript frameworks. Since it first came on the scene, it has gained lot of followers and a large community of developers and companies who use it for developing their applications. With the arrival of Angular 2.0, the developer community is divided on whether this new version is good news or not.

A Short Background on JS Frameworks

In recent years we’ve seen the emergence of a large number of MVC frameworks for creating SPA applications using JavaScript. All of them are open source, free and in many cases truly powerful. Choosing one of them can be a really difficult decision, with many variables to consider:

  • learning curve
  • development process
  • updates
  • community
  • maintenance

However, the most important variable is whether a framework ensures a predictable and stable future direction.

Here’s Why Developers Have Loved Angular JS

In all of these aspects, Angular JS has been a shining star in a sea of competitors. The mere fact that it was created and maintained by Google meant it wasn’t going to disappear any time soon, that it was secure.  It was like Angular was the answer to all developers’ prayers: free, open source, a powerful platform, and maintained by one of the most important names in this field, Google. For developers, all of those things meant security, and this was one of the main reasons why Angular was widely adopted.

Nevertheless, for all its good points, Angular is now outdated. The first release of Angular was back in 2009 and the web has evolved significantly in those 7 years. Unfortunately, the way its creators chose to approach this problem has created a little bit of a stir in the developer community.

The Reasoning Behind How Angular 2.0 Was Created

For the developers of Angular, it would have been very difficult to implement all the necessary new developments without destroying the original framework.  They figured, if they have to break Angular to make it “modern”, why not simply create it from scratch?

That way they could also fix all the major existing problems. These included 1) an overly-complex syntax for creating directives and 2) writing code in the wrong scope.  And this is how Angular 2.0 came to be what it is today. Angular 2.0 was officially announced at the ng-conference in October, 2014 and is now in BETA stage.

Not surprisingly, the announcement was not very well received by developers. The reason? The new version will not be compatible with Angular 1.x, meaning there is no migration plan in the works. Angular 2.0 is not just a “new version” of Angular, is a completely new framework.

In the meantime, what does this mean for developers? There is no official date about the release: maybe around the middle of 2016, maybe not. And of course when that happens, the new version will not have the stability that Angular 1 has right now. Google has stated that they will continue maintaining the Angular 1.x versions for at least 2 years after the RTM of Angular 2.0 becomes available.

So, let’s see what Angular 2.0  is all about.

What Exactly Gave Rise to Angular 2.0?

There are a couple of motivations that compelled the Google team to create Angular 2.0. Here are a few of them:

The Evolving Web:

As we said in the introduction of this post, in the seven years since Angular was released, the web has changed. We now have HTML5, CSS3, new specifications, new JS libraries and new technologies.

Mobile Priority

In the last few years, smartphones and tablets have become a major focus for creating new applications. The first version of Angular was not designed with mobile in mind. Angular 2.0 was designed as a solution to this, making mobile a priority.

Improved Performance

Angular JS was created more for designers than for developers. The main purpose was to solve the need to quickly build persistent HTML forms. The Google team modified Angular to support more features and then developers began using it. Over the years, the incremental changes that were added to Angular created problems in terms of performance. Most of these performance problems are a consequence of binding and templating and the incorrect use of the $scope.

Web Components as First Class Citizen

Web Components are a suite of specifications that help with implementing custom HTML elements.

The standards body W3C divides the specs into three pieces:

  • Shadow DOM: Encapsulates and hides the innards of a custom element inside a nested document. The most important part of Web Components and hardest to polyfill.
  • Custom Elements:  an API for registering your own implementations for HTML elements.
  • HTML Imports:  Lets you import other HTML documents into the current one. That way, HTML documents become bundles of HTML, CSS and JavaScript. You need such bundles to distribute custom elements and all of their dependencies.
  • HTML templates
  • DOM Mutation Observers

Angular 2.0 Features

Let’s take a look at a few of the new features that make Angular 2.0 rock:

1. Typescript.  TypeScript (previously known as AtScript) is the language used to build Angular 2.0. It is a superset of ES6 (ECMAScript 6), which means that we can use TypeScript without writing a single line of TypeScript.

The only problem with TypeScript is that it’s not yet supported in all the browsers, so it’s necessary to compile the TypeScript code into Javascript ES5. There are good transpiler tools around that you can use to code ES6 today, like Babel and Traceur (used by the Google team for Angular).

2. Dependency Injection (DI).  Dependency injection was one of the main features that Angular 1.x incorporated, making it stand out from all the other JS frameworks. DI is useful for modular development and component isolations for example, but its implementation results in a lot of problems for Angular 1.x. Angular 2.0 will will try to solve all these problems and also add some missing features. like child injectors and lifetime/scope control.

3. Dynamic Loading. This is a feature which is missing from the current version of Angular 1.x and will be implemented with Angular 2.0. The main idea is to allow developers to add new directives or controllers on the fly.

4. Directives.  Angular 2.0 will have 3 different types of directives:

  • Component Directives: These will create reusable components by encapsulating logic in JavaScript, HTML or an optional CSS style sheet.
  • Decorator Directives: These directives will be used to decorate elements (for example adding a tooltip, or showing/hiding elements using ng-show/ng-hide).
  • Template Directives: These will turn HTML into a reusable template. The instantiating of the template and its insertion into the DOM can be fully controlled by the directive author. Examples include ng-if and ng-repeat.

5. Logging.  Angular 2.0 contains a logging service called diary.js, a useful feature that provides high resolution timing details of where time gets spent in your application.

6. No More $scope. $scope will be removed in Angular 2.0 in favor of ES6 classes.

7. Components.  Angular 2.0 decided to go with user components instead of directives. Components are directives that are always associated with a direct template. The main point of this connection is to resolve some problems that Angular 1.x has, particularly with the $scope and transclusion.

8. Router. The new router on Angular 2.0 manages all the basic scenarios that you will need on an application:

  • Simple JSON-based Route Config
  • Optional Convention over Configuration
  • Static, Parameterized and Splat Route Patterns
  • Query String Support
  • Use Hashchange
  • Navigation Model Document Title Updates
  • 404 Route Handling
  • History Manipulation

Conclusion

There are a lot of hopes and expectations pinned on Angular 2.0. It shows promise: it is simpler than Angular 1 so it’s easier to learn, directives are much easier to understand, no more $apply and many other good features. Even though the release is not yet defined, a large body of tutorials, books and websites can already be found around the web, providing resources for developers to begin using it.

Meanwhile, opinions in the developer community remain divided about the breaking changes. Some developers say that it would have been better to improve Angular 1.x instead of creating a completely new version that forces them to migrate their existing applications.

So, what do you have to say? Given all that’s taking place with Angular JS, the recent developments and the upcoming switch to the new framework, what do you think? We’d like to hear your experience with Angular 2.0 or your thoughts on this, or both!