Angular 2.0 Overview
Since the beta 0 release of Angular 2 last December, we’ve been eager to get our hands dirty and see what this new version was all about. We decided to build a sample app consuming the Rotten Tomatoes API in both Angular 1 and Angular 2, to really understand the differences between the two.
Diving into Angular 2, we quickly realized that with Angular 2, there is more to learn than just Angular 2. This becomes obvious as you’re building Angular components. We found the Angular 2 part is really not all that difficult, however, there are a lot of assumptions in place that you have a solid understanding of several other things.
- Reactive Extensions / Observables - This is popular with a lot of the Angular core contributors. The observables support is based on RxJS. Observables provide an even more flexible API for handling async processing than the $q promise based support found in Angular 1. You’ll encounter observables when you make http requests using Angular 2’s HTTP support. Angular 2 also supports Async pipes which allow you to subscribe to observable streams of data updates directly in a template. Observables are another key area in the Angular 2 learning curve that developers will need to work on. The good news is that you don’t need to be fluent with observables out of the gate in order to use Angular 2. As your knowledge of observables grows over time you’ll be able to leverage them in Angular 2 applications.
Beyond these assumptions, we found there were several distinctions, differences, “ah-ha” moments, and lessons learned between Angular 1 and Angular 2.
- Heavy component focus - Angular 2 components are easier to create vs. Angular 1 directives. You no longer have the directive definition object that you had to use to describe your components.
- Nearly 50 directives were eliminated in favor of using property/event bindings.
- Heavy use of decorators over providers.
- Services / Factories are now really just classes.
- Components - These are the things that consume templates; they are the most common type of Angular 2 directive.
- Attribute Directives - These can be thought of almost as a behavioral type of directive. They can be added to other elements. Generally, they are manipulating attributes/events on existing elements; they’re not creating any new elements, they’re not destroying elements or showing them or hiding them. They’re merely toggling things on or off. Examples are ngStyle and ngClass.
- Structural Directives - These are things that actually change the structure of the DOM. It might add or remove DOM elements. Examples of this include ngFor, ngIf, and ngSwitch.
- ngFor is basically a loop iterating over a collection. ngFor creates a series of DOM elements based on the contents of a collection.
- ngIf is an ‘if’ statement that puts that element and its children in the DOM or removes it based on a boolean expression.
Unlike ng1, we found that bindings will fail if nulls in the property path are encountered. To fix this, use ngIf or the safe navigation operator. As well, it’s important to note that components won’t appear if they are not properly imported and placed in the Directives array of the parent component. We also experienced some problems with custom components generating table rows. The custom components insert additional elements into the DOM that break up theand result in multiple tables being generated. The runtime for Angular 2 is still being optimized. There are several 3rd party dependencies including ES6 shims, reflection, and the module loader which all increase the runtime size of the solution. The Angular team continues to work on this and it’s one of the reasons Angular 2 is still not officially released.
Angular 2 Documentation
This has been a focus of the Angular team early on. There is a dedicated team of contributors working in this area and their efforts are very visible:
- Angular.io continues to improve and in general, the team has done a great job on this.
- API documentation still has some undocumented portions. This continues to improve as well, but it’s not quite as far along as the tutorials and developer guides.
Angular 2 with Typescript
The following is a code snippet of Angular 2 code written in Typescript
As a means of comparison, you can write the app in ES5 as well. You will lose the typescript decorators and instead, you have to make these annotations yourself:
As can be seen from the above we are still applying annotations to the class, but the process of doing so requires more complex syntax than with Typescript itself.
Angular 2 provides some significant advantages over Angular 1, but along with these changes comes a learning curve that requires developers to familiarize themselves not only with Angular 2, but the newer foundation of web development tools that modern applications are built upon. In future articles we will cover other facets of Angular 2 and how they improve the web application development process. Additionally, we will look at how the architectural changes in Angular 2 can be leveraged to build native mobile applications and use Angular 2 on the server side to speed page loading.