AngularJS 2.0 Preview

AngularJS Weekley Meeting тут

AngularJS 2.0 это не очередной большой релиз, это полный рефакторинг библиотеки с использованием последних стандартов ES6!

Что же нас ожидает ?

Основные направления разработки: Change Detection, Dependency Injection, Templating, Persistance, Routing, Logging, Annotations, Documentation, Benchmarking, Touch/Animations, Package Repository, Reference App, Scaffolding and Build/Deploy.

Часть данных направлений уже имею рабочие прототипы.

Change Detection

Используется Object.observe() — низкоуровневый метод API позволяющий отслеживать изменение состояния JavaScript объекта.
Более подробное описание можно прочитать тут и тут.

В отсутствие нативной поддержки данного метода (на данный момент), команда AngularJS нашла замену в использовании Watchtower.js

Исоходный код Watchtower.js

Дизайн документ тут

Dependency Injection

Данный прототип уже готов к тестированию. DI сделан с учетом стандарта ES6 и обеспечивает удобный синтаксис, декларативные аннотации и отложенные загрузки.

Ниже пример кода DI. Зависимости передаются в качестве аргументов конструктора.

import {Inject} from 'di/annotations';
import {Electricity} from '../electricity';

@Inject(Electricity)
export class Heater {
    constructor(electricity) {
        this.electricity = electricity;
    }

    on() {
        console.log('Turning on the coffee heater...');
    }

    off() {
        console.log('Turning off the coffee heater...');
    }
}

import {Inject} from 'di/annotations';

import {Electricity} from '../electricity';

@Inject(Electricity)

export class Heater {

constructor(electricity) {

this.electricity = electricity;

}

on() {

console.log('Turning on the coffee heater...');

}

off() {

console.log('Turning off the coffee heater...');

}

import {Provide} from 'di/annotations';
import {Heater} from './coffee_maker/heater';

@Provide(Heater)
export class MockHeater {
    constructor() {}

    on() {
        console.log('Turning on the MOCK heater...');
    }

    off() {}
    }
}

import {Provide} from 'di/annotations';

import {Heater} from './coffee_maker/heater';

@Provide(Heater)

export class MockHeater {

constructor() {}

on() {

console.log('Turning on the MOCK heater...');

}

off() {}

}

Чтобы уже сейчас попробовать DI,
# Clone репозиторий (или fork).
git clone https://github.com/angular/di.js.git

# устанавливаем dev dependencies, Karma, Gulp, etc.
npm install

# Если захотите использовать «karma» или «gulp»:
npm install -g karma-cli
npm install -g gulp

# Transpile ES6 в ./compiled/*
gulp build

# Детект изменений кода
gulp watch

gulp build_examples
gulp serve

Исходный код di.js
Дизайн документ тут

Templating

Основные цели — еще более упрощенное создание директив, повышение производительности и конечно соблюдение веб стандартов.

Команда провела анализ различных библиотек, для определения их преимуществ и недостатков. Это описание есть в дизайн документе и представляет ценность для любого веб-разработчика, так что советую почитать. Например, сравнительный анализ Polymer.

Есть первые примеры использования ShadowDom. Пример, создания директива,

@ComponentDirective({
     selector: 'exp-hello',
     template: 'Hello world!'
})

@ComponentDirective({

selector: 'exp-hello',

template: 'Hello world!'

})

Исходный код тут
Дизайн документ тут

Почитать о ShadowDom,
— Html5rocks — ShadowDOM
— Polymer — ShadowDOM

Persistance

Одна из самых больших и спорных тем. Находится в стадии документа, ревью.

Идут обсуждения на темы рефакторинга модулей ngHTTP, ngWebSocket, ngStore, ngOffline and ngData.

Routing

Находится в стадии документа, ревью.
Исследуются Ember.js, Durandal (надстройка над JQuery, Knockout и RequireJS) и Passport (прослойка для Express).

Основные цели — вложенности представлений, представлений основанных на конечных автоматах.

Документ содержит части:

— Url Resolver: url-resolver.js
— Location Service: очень схож с $location, но поставляется отдельным пакетом
— Url Matcher
— Route Resolver
— Route Configuration

Дизайн документ тут

Logging

Цель — удобное логирование, учитывая асинхронные события.

Исходный код diary.js
Дизайн документ тут

Annotations

Как уже писалось выше аннотации активно используются в DI и уменьшают объем кода.

Пример,

@Provide(Heater)
export class MockHeater {
    constructor() {}

    on() {
        console.log('Turning on the MOCK heater...');
    }

    off() {}
}

@Provide(Heater)

export class MockHeater {

constructor() {}

on() {

console.log('Turning on the MOCK heater...');

}

off() {}

}

Дизайн документ тут и тут

Documentation

Генератор документации.
Исходный код и примеры тут

Benchmarking

На данный момент существуют инструменты, чтобы оценить производительность Javascript — benchmark.js, jsperf.com, octane, kraken, robohornet, etc.

Команда AngularJS имплементирует бенчмаркинг как часть юнит-тестирования; главный критерий тестов остается один ответ на вопрос: «Достаточно ли быстро работает данный код?».

Пример тут

Исходный код тут

Дизайн документ тут

Touch/Animations

Цель — улучшение производительности на мобильных, сенсорных устройствах.

Документ находится в очень начальной стадии проработки.

Дизайн документ тут

Package Repository

Большая тема для инфраструктуры, т.к. все модули упаковываются и доставляются с различных «сторон».

В документе представлен большой анализ различных доступных вариантов, npm, bower & etc.

Дизайн документа тут

ES6 сегодня!

Используйте Traceur, это компилятор JavaScript.next-to-JavaScript-of-today.
Исходный код тут