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. Зависимости передаются в качестве аргументов конструктора.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
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...'); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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. Пример, создания директива,
1 2 3 4 |
@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 и уменьшают объем кода.
Пример,
1 2 3 4 5 6 7 8 9 10 |
@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.
Исходный код тут