Semantic Versioning 2.0.0

MAJOR.MINOR.PATCH

Semantic Versioning 2.0.0

MAJOR version when you make incompatible API changes

Components

Angular2 is a component based framework, just like ReactJS. Everything it's a component. Also the Application itself.

Components

import {Component} from 'angular2/core';

@Component({
    selector: 'app',
    template: '<h1>Hello World</h1>'
})
export class Application {}

Providers

In a Angular2 application the business logic should be placed in providers. A provider could be injected in the components.

Providers

export default class Timer {
    getCurrentTime(){
        return new Date();
    }
}

Providers

import {Component} from 'angular2/core';
import Timer from './Timer';

@Component({
    selector: 'currentTime',
    template: '<span>{{currentTime}}</span>',
    providers: [Timer]
})
export class CurrentTime {
    constructor(private timer:Timer){
        this.currentTime = this.timer.getCurrentTime()
    }
}

Pipes

A Pipe it's a function that transform data, just like AngularJS filters.

Pipes

import {Pipe, PipeTransform} from 'angular2/core';

@Pipe({name: 'checkmark'})
export default class CheckmarkPipe implements PipeTransform {
  transform(input){
    return input ? '\u2713' : '\u2718';
  }
}

$scope

In components there's no $scope. Everything bound to 'this' it's accessible by the template. Every component has an isolated scope.

$scope

import {Component} from 'angular2/core';

@Component({
    selector: 'app',
    template: '<h1>Hello, {{message}}!</h1>'
})
export class Application {
    message;

    constructor(){
        this.message = 'e-xtrategy';
    }
}

Bindings

(Almost) no more two way bindings!

Bindings

import {Component} from 'angular2/core';

@Component({
    selector: 'Swapper',
    template: `
        <div>
            <input #first />            
            <input #second />
            <button (click)="swap(first,second)">Swap</button>
        </div>`
})
export class Swapper {
    constructor(){}

    swap(first,second){
        let firstValue = first.value;
        let secondValue = second.value;
        first.value = secondValue;
        second.value = firstValue;
    }
}

Inputs/Outputs

How we can pass data between components?

Inputs/Outputs

@Component({
    selector: 'child',
    templateUrl: 'app/components/Child.tpl.html',
    inputs:['input1'],
    outputs: ['event1']
})
export default class Child {
    event1;
    input1;
    
    constructor(){
        this.event1 = new EventEmitter();
    }

    whenSomethingHappens(){
        this.event1.emit('value');
    }
}

Rx/Js

Rx/Js is one of the peer dependencies of Angular2.

Rx/Js

Observable.fromEvent(inputElement, 'keyup')
.map((e) => e.target.value)
.filter((text) => text.length > 1)
.debounceTime(250)
.do(() => startLoading())
.map((query) => this.asyncService(query))
.switch()

Rx/Js

You could use Rx/Js to:

1. Manage user input
2. Http calls (no promises)
3. Any async operations
4. Components data communication

Typescript

Typescript is (almost) mandatory

Typescript

Typescript

var userFactory = function(id,name,age){
    var toReturn = {
        id:id,
        name:name
    };

    if(age){
        toReturn.age = age;
    }

    return toReturn;
};

The Good

The Good

Components

The Good

Rx/Js

The Good

Rendering Layer

The Good

Routing

The Good

No more .provider, .service, .factory

The Good

Services are plain Ecma6 classes

The Good

Separated HTML templates

The Bad

The Bad

Separated HTML templates

The Bad

Boilerplate

The Bad

UpgradeAdapter

The Bad

Providers hierarchy

The Ugly

The Ugly

TypeScript

The Ugly

Community

When (not React)?

When (not React)?

Large Teams

When (not React)?

Design vs Refactor