Презентация Артёма Березина на GDG Vladivostok Meetup 04.04.2015

1. 2015

2. Angular 2:
что грядёт
Березин Артём
artem@emply.ru

3. Зачем вообще
нужна новая
версия

4. Устаревшие принципы
Код AngularJs 1 основывается на
принципах, принятых в 2009 году

5. Устаревшие принципы
Код AngularJs 1 основывается на
принципах, принятых в 2009 году
Directive → WebComponents

6. Устаревшие принципы
Код AngularJs 1 основывается на
принципах, принятых в 2009 году
Directive → WebComponents
Transclusion → Shadow DOM

7. Устаревшие принципы
Код AngularJs 1 основывается на
принципах, принятых в 2009 году
Directive → WebComponents
Transclusion → Shadow DOM
Module → ES6 Module

8. Низкая производительность
Angular2 в 5 раз шустрее
Тест на построение дерева глубокой вложенности

9. Сложные концепции
AngularJS 1 содержит много разных
концепций
Сервисы
Провайдеры
Фабрики
Scope
Контроллеры
Модули
Директивы
etc...

10. Сложные концепции
Это усложняет обучение и понимание

11. B итоге
Недостатки AngularJs 1
Устаревшие принципы
Низкая производительность
Сложные концепции, крутая кривая изучения

12. Angular 2
TypeScript
Компоненты
Инициализация приложения
Синтаксис шаблонов
Проверка изменений в моделях

13. Простое приложение

14. TypeScript – надмножество JavaScript

15. TypeScript – надмножество JavaScript
Компилируется в ES5/ES6
Не зависит от Angular 2
Типизированный, но типы
указывать не обязательно
TypeScript 1.5

16. TypeScript – надмножество JavaScript

17. Компоненты

18. Компоненты: Аннотации

19. Компоненты: Контроллер

20. Компоненты

21. Инициализация: AngularJs 1

22. Инициализация: AngularJs 1
1)Создать модуль
2)Прописать ng-app в шаблоне
3)Создать контроллер controller
4)Присвоить значения полям $scope
5)Зарегистрировть контроллер
6)Создать шаблон

23. Инициализация: AngularJs 2
Создать компонент
Инициализировать его

24. Инициализация: AngularJs 2
1)Создать компонент
2)Создать шаблон
3)Инициализировать (корневой компонент)
4)Транслировать TypeScript в JS (ES5)

25. Синтаксис шаблонов

26. Синтаксис шаблонов

27. Синтаксис шаблонов
Локальные переменные

28. Синтаксис шаблонов
Обработчики событий

29. Синтаксис шаблонов
Изменение свойств DOM-элементов

30. Синтаксис шаблонов

31. Синтаксис шаблонов
Унификация
#varName — для локальных переменных
(eventName) — для событий
[property] — для полей DOM-элементов

32. Проверка изменений в моделях
Zone.js
Использует нативный Object.observe()
Рендерит только те компоненты, что изменились
Организовывает асинхронный код в виде задач (зон)
Позволяет отлавливать исключения внутри таких зон.
Позволяет отказаться от $digest ($apply): больше не нужно
вручную вызывать scope.$apply() или заворачивать код в
$timeout

33. Спасибо за
внимание.
Вопросы?
Основано на: https://angular2-intro.firebaseapp.com/