days
0
-8
hours
-2
0
minutes
-1
-4
seconds
-4
-5
search
Better concepts, less code?

5 big changes in Angular 2 that impact developers

Thierry Templier

At the end of 2015, the AngularJS community announced the beta of Angular 2. The REST API development community followed the changes closely. Angular is one of the most popular frameworks for API developers to add a front-end to an API.

The approach of Angular 2 is better concepts, less code. To achieve this, the framework leverages a component-based approach. The syntax within associated HTML templates has evolved. Although Angular 1 users will recognize some concepts, there are many improvements to the implementation.

    DevOpsCon Whitepaper

    DevOpsCon Whitepaper 2018

    Free: BRAND NEW DevOps Whitepaper 2018

    Learn about Containers,Continuous Delivery, DevOps Culture, Cloud Platforms & Security with articles by experts like Michiel Rook, Christoph Engelbert, Scott Sanders and many more.

Foundations

  • Component 

In Angular 2 there are no more controllers or scopes. Angular 2 provides component-driven architecture and the central element is obviously the component. Components contain both state and processing, accepts parameters and can trigger events. Components can be used within other components and can react on other component events.

  • Template syntax 

Template syntax has evolved to be more efficient to use. Sure you find a way to use bindings (simple or birectional), to attach some processing on component events and leverage structural and attribute directives. Some shortcuts are also provided to make code concise at this level for example for bidirectional bindings and loops.

  • New change detection

Angular completely updates the way it detects changes and handles them. Detection is now based on the ZoneJS library that can intercept all of the asynchronous APIs in the browser. Since an Angular 2 application is a reactive system, the change detection system propagates bindings from the root component to children ones.

By default, the change detection system walks the whole tree of components in a predictable way. This allows to have good performance. In addition, you can also add some optimizations for particular uses cases. For example, if you use immutable objects or observables, you can take advantage of them and check parts of the component tree only if they really change.

Observables

Angular 2 is now based on observables. Their inputs aren’t so clear for new Angular 2 developers compared to promises. They both try to solve problems around asynchronicity, and avoid callback hell. Where they have similar semantics, observables are much more powerful. They allow to receive several values, can be canceled and can leverage operators to transform and combine observables values.

Observables correspond now to the foundations of several features in Angular 2. They take part in change detection and event support for components and HTTP.

Pipe

Pipes correspond to what was called filters in Angular 1. Pipes transform displayed values within a template. In the context of HTTP calls, this feature allows to elegantly handle asynchronous calls and update the component view accordingly. It also allows developers to build queries in a friendlier way.

HTTP support

HTTP support relies on observables. The main consequence is the ability to easily plug HTTP calls into whole processing of components. We can easily configure some transformations on data to send for a request or received data within a response. More advanced processing like retries, errors can be easily handled with a few lines of code.

Form support

Form support is based on a set of directives that allow to specify bidirectional bindings on component attributes, but also have access to form and field states. Based on the new syntax in templates, we can efficiently and easily handle validations.

Another interesting aspect is that state relies on observables. So we can check updates and plug some processing like HTTP for auto completion or asynchronous validation. Form data submissions or handling are always supported by attaching processing on events (form submission or click).

Conclusion

Angular 2 offers developers significant improvements. As the concepts are significantly different from Angular 1, developers may be hesitant to make the change. Time invested will in learning about new ideas and structure of Angular 2 will be worthwhile.

Author
Thierry Templier
Thierry Templier isn't only a server-side architect but has also been a JavaScript and CSS addict for a very long time. He co-authored a book on the subject in 2009, "JavaScript for Web 2.0". He has an in-depth knowledge of patterns, libraries and frameworks to build rich Internet applications (JQuery, Backbone, MVVM, Angular, CSS, Less) but also to implement JavaScript server-side applications with Node. Thierry is very excited by the features provided by JavaScript and the latest JavaScript technologies and frameworks (ES6, ES7, Angular 2, React, Node). He has worked with Angular since 2013, first with prototypes and contributed to the migration of Restlet’s API platform frontend from JavaScript / jQuery to Angular. He likes to make this type of applications interact efficiently with RESTful services and web APIs. Thierry also teaches classes around JavaScript, Angular and Node and contributes to Angular 2 on StackOverflow (he is one the five top answerers).

Leave a Reply

Be the First to Comment!

avatar
400
  Subscribe  
Notify of