How can we help?

Design? Check. Strategy? Check. Bulletproof code? Check! People who can manage it in an agile and efficient manner? Check. Someone to help you create your next big product? Of course.

Denver

- 1201 18th St. Suite 250, Denver, CO 80202

Grand Rapids

- 125 Ottawa Ave NW Suite 270, Grand Rapids, MI 49503

Blog

BLOG:Angular 2.0 Overview

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.

  • Typescript - This has been in development by Microsoft since as far back as 2012. It adds strong typing to Javascript, but it’s all optional, allowing you the option to input types on things if you want. As of Typescript 1.5 support was added for all the ES6 language features. Angular 2 relies on a feature called Typescript decorators, which are annotations that you can put on methods and classes to place some additional metadata on them. There are ways to write your Angular 2 app in ES5, though it can be a bit messy to do things that way because you still have to write the decorators in Javascript and code is not as easy to read as it is in Typescript. Given the heavy emphasis on Typescript, the vast majority of people that do Angular 2 development will probably use Typescript, so going down that road will make the most sense.
  • Module Loaders - You will also need a way to organize all your code and load all your Javascript files as your application moves from route to route, shows different views, etc. The old Angular 1 project used its own module system because the Javascript language itself did not have one. With the arrival of ES6 comes a module system, and there are two very popular module loaders - System.JS / JSPM and Webpack already in use in the JS community. There is a bit of a distinction to be made with the two module loaders. Webpack is more like a bundler, so even in development time you point Webpack at a structure of Javascript and it will create one or more bundles containing the individual JS files. The developer then includes the resultant bundle(s) in the web page containing the application. System.JS is used to load files asynchronously when the application is under development, and will load the javascript files as it encounters them. As SystemJS loads files it parses the file for ES6 module import statements. If the module loader doesn’t have one of those dependencies already loaded, it will go ahead and dynamically load it by making an HTTP request for the file. While this isn’t ideal for production because of the potentially large amount of HTTP requests to load individual files, it works well for development. For production, you can use the companion tool JSPM, which will walk through your dependencies and build the bundle file for you similar to Webpack.
  • 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.

Angular 2 Distinctions

  • 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.

Three Types of Directives in Angular 2

  1. Components - These are the things that consume templates; they are the most common type of Angular 2 directive.
  2. 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.
  3. 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.
    • ngSwitch is a case statement in javascript where you’re choosing to show one of a series of templates.

Angular 2 “A-Ha” Moments

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 the

and 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.
  • Great starting tutorials, developer guides, and cookbook articles. Collectively, this documentation is some of the best we’ve seen for Javascript frameworks.
  • 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

Angular 2 with 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:

Angular 2 with ES5

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.

Conclusion

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.