Angular 2 and TypeScript — A New Era of Frontend Development

Angular 2 is out (RC) and it is a completely different framework. TypeScript instead of JavaScript, components instead of controllers, RxJS Observables instead of Promises. Incompatible with Angular 1.x. A controversial decision — but is the result better?

TypeScript¶

Angular 2 is written in TypeScript and recommends it for development. For Java developers, TypeScript feels natural — types, interfaces, classes, generics. IDE support (autocomplete, refactoring) on par with Java. Errors caught at compile time, not at runtime.

@Component({
  selector: 'project-list',
  template: `
    <div *ngFor="let project of projects">
      <h3>{{project.name}}</h3>
      <p>{{project.description}}</p>
    </div>
  `
})
export class ProjectListComponent implements OnInit {
  projects: Project[] = [];

  constructor(private projectService: ProjectService) {}

  ngOnInit() {
    this.projectService.getProjects()
      .subscribe(projects => this.projects = projects);
  }
}

Components¶

Everything is a component. No controllers, no scopes. Component = class + template + metadata (decorator). Component hierarchy instead of scope inheritance. Cleaner, more predictable.

RxJS and Observables¶

Angular 2 makes heavy use of RxJS Observables. HTTP requests return an Observable, not a Promise. Operators such as map, filter, switchMap for reactive programming. Powerful, but with a steep learning curve.

Angular 2 vs. React¶

Angular 2 is a full framework (routing, forms, HTTP, DI). React is a library + ecosystem. Angular 2 has a steeper start but provides more structure. React is more flexible. For enterprise teams Angular 2 is attractive — fewer decisions to make.

Angular 2 is a Solid Framework¶

The transition from Angular 1 is painful (effectively a new framework). But Angular 2 with TypeScript is an excellent choice for enterprise SPAs. We are considering it for new projects alongside React.