25Mar2016

Application development: Angular 2 is a ready for production framework

Last month we started new web project with client side implementation by Angular 2 framework [https://angular.io/]. First of all, this is not just new major version of the same technology, but rather absolutely new framework designed from scratch. Solid part of terms and approaches are the same as in Angular 1.x, but a lot of things are much more simpler by design. Actually, that allows us to spend more time and efforts on application development than on pure system layer. E.g.,

import {Component} from ‘angular2/core';

@Component({

selector: ‘my-app’,

template: ‘<h1>{{ title }}</h1>’

})

 

export class AppComponent {

title = “My First Angular 2 App”

}

 

This TypeScript code above is very clear. It doesn’t need any extra knowledge to understand it.

 Ready to start

As usual, you can install it as npm module into your project and add to dependencies. Look at its GitHub repository [https://github.com/angular/angular]. Angular 2 is still in beta. Latest version for today is 2.0.0-beta.17. On the other hand, the Angular 2 core functions are stable for several months or even half of year. There are Components and Directives, Forms, Pipes, HTTP and Dependency Injection. Migration from Angular 1.x is not trivial, actually. That’s why there are a lot of tutorials and migration materials, like [https://scotch.io/tutorials/seamless-ways-to-upgrade-angular-1-x-to-angular-2].

 The framework

Central concept of the framework is a Component. It’s an object for representing some part of UI and linked to it code and data. Technically, Component is a class and its members are available for rendering in the template. The template may be provided right into the meta data with other parameters of the Component, but in real life huge applications load templates from HTML template files specified in the meta data. Whole single page application is a tree of components. So, the root component of the tree is an application that needs to be bootstrapped. Services for data access, other routines and objects of application and pure Angular side are dependencies, that needs to be configured and loaded into components by providers. It’s similar to classic Dependency Injection approach. At least, they call it so. If we add a provider of some object or service on bootstrap stage or as dependency of root application component, then we guarantee its singleton nature.

 Toolset and ecosystem

Angular as a modern web application development framework sticks to modern coding languages ES6, TypeScript and even Dart. There are already a lot of tools in Angular 2 ecosystem. Visual Studio and JetBrains products support both TypeScript and Angular 2. Angular command line interface [https://github.com/angular/angular-cli] provides us a was to build and setup projects in command line. There is SystemJS [https://github.com/systemjs/systemjs] as universal dynamic module loader to help organize your project structure of components, services, etc.

BTW, there will be an online hackathon announced on May 14 2016. They call it Angular Attack [https://www.angularattack.com]. It’s a good chance to upgrade your Angular skills and enjoy new level of web  application development by Iflexion.

Read also

Comments are closed.