Tech Talk #2: “Angular 2 – Incredible Power that You Can Control”

This month we held second tech talk dedicated to a trending topic and a significant event in web development field, namely release of Angular 2 beta version. Our employee, Anton Vidinev, shared his thoughts regarding the core differences between Angular2 and AngularJS, its pros and cons, its enhancements and innovations, and framework architecture review in the whole.

With no doubt AngularJS is one of the most widely-accepted JavaScript frameworks in the world of web application development. Since its introduction back in 2009, Angular showed a tremendous growth in terms of community support and adoption. Therefore the main aspects that audience is concerned about are: “Will AngularJS 2.0 succeed?” and “How high will it go?”

Angular-2-tech-talk-image

We started with Angular 2 introduction, its core features, differences and benefits. Considering all the changes and innovations, new release is a great change for developers in comparison with 1.x.

Angular 2.0: what it is all about?

  • TypeScript
  • ECMAScript 6 (ES6) with module loaders System.JS/JSPM and Webpack
  • No controllers, DDO, $scope, angular module, jqLite
  • Heavy component focus
  • Metadata
  • Improved dependency injection
  • Server-side rendering
  • Web/tablet/mobile friendly

Browser support: Microsoft Edge, Safari, Chrome, Firefox, IE 9/10/11, Mobile Safari, and Android 4.1+.

With all that said why Angular2 is the future? Because it is:

  • Fast
  • Flexible
  • Easier
  • Consistent
  • Productive

Usage of TypeScript raised questions; however it makes the new version of AngularJS more flexible. Being a JavaScript superset it also provides advanced features like navigation, refactoring and autocompletion. Such tools can be called a “must-have” for medium-large size projects.

Diving deeper into Angular 2.0 we need to understand how the framework works and get familiar with core concepts and architectural structure. Eight major building blocks of any Angular 2 application:

  • Module
import { AppComponent } from './app.component';
  • Components
@Component({
    selector: 'app', // <app></app>
    providers: [],
    directives: [],
    pipes: [],
    styles: [require('./style.scss')],
    template: require('./template.html')
})
export class App {
    url: string = '/api';
    constructor() {
    }
}
  • Template
<header-controls *ngIf="isControlsAvailable" [id]="id"></header-controls>
<ul>
                <li *ngFor="let user of users">{{user.name}}</li>
</ul>
  • Metadata

In TypeScript, we attach metadata by using a decorator.

  • Data Binding
<user [name]="userName" (click)="removeUser()"></hero-detail>
<input [(ngModel)]="userName">
  • Directive
@Directive({ selector: '[blackBg]' })
export class BlackBgDirective {
    constructor(el: ElementRef) {
       el.nativeElement.style.backgroundColor = 'black';
    }
}
  • Services
export class UserService {
  private defaultName: string = 'John';
  constructor(private logger: Logger) {}
  getDefaultUserName() {
                this.logger.log(`Name ${this.defaultName}`);
    return this.defaultName;
  }
}
  • Dependency injection
constructor(private service: UserService) { }

Though, despite the above-mentioned innovations and features, some developers still prefer AngularJS due to these facts: they are familiar with it and Angular 1.x is stable. That said why Angular 2 beta can be a better choice? Because it offers:

  • Server-side rendering
  • Improved syntaxis
  • Enhanced native routing
  • Data binding optimization 3-10x
  • Web workers support
  • Shadow DOM

In conclusion, we summed up all the forgoing and drew up a table of all the pros and cons of Angular 2:

ProsCons
Serious innovations and improvements
Big difference over AngularJS
Good syntax
Knowledge of TypeScript and set of libraries required
Helps to avoid wrong decisions
Current absence of API
Well-written Developers Guide
Poor error handling system
A major step toward UX improvement
Lack of modules
Complex architecture of app framework
 
Serious approach
 
Well-suited for growing large applications
 
Developing speed
 

Conclusion:

Angular 2 is not just an attempt to improve the current version, but it comprises the latest technologies of the current front-end world. On the top of that, new Angular version applies TypeScript for writing code, enhances developers’ productivity, and embodies best ideas of third party frameworks and libraries.  

Angular 2.0 offers considerable advantages over AngularJS and provides great opportunity in object-oriented front-end programming. In the nearest future, with the release of Angular 2 stable version, it will be possible to build responsive, high-end and agile applications that will delight users, customers and developers.

↑ Go up

Similar post