During the presentation, I've explained how to start with Angular 2 and get better results using it. Also I've told about our experience and the most important points to care about.
5. Что ожидалось от технологии
• Отсутствие необходимости писать код ради самой технологии.
• Стабильность и живое сообщество.
• Простая комплектация команд под проекты.
• Целостная экосистема и подобная структура от проекта к
проекту.
• Достаточный уровень абстракции и ощутимый прирост в
скорости разработки.
• Низкая связность приложения.
• Удобная тестируемость.
27 January 2017 5
6. Что хотелось от технологии
• Высокая производительность.
• Совместимость со старыми браузерами.
• Длинный жизненный цикл продукта.
27 January 2017 6
7. 27 January 2017
Web Components
• Shadow DOM
• Templates
• Imports
• Custom Elements
8. 27 January 2017
Web Components
• Shadow DOM
• Templates
• Imports
• Custom Elements
19. 27 January 2017
Angular CLI
• Официальный инструмент.
• Стандартизация и подавление индивидуальности
Разработчика.
• Экономия времени и денег на рутине.
• Конфигурирует Webpack вместо тебя J.
• Подразумевает написание юнит тестов.
20. 27 January 2017
Angular CLI – Что умеет
• Создание пустого проекта
• Генерация компонентов и сервисов
• Генерация инфраструктуры: сборка, тесты
• Синтаксический анализ кода
• Различные окружения
• Форматирование кода
23. 27 January 2017
Tree Shaking
- Webpack вычищает неиспользуемые
ссылки.
- UglifyJsPlugin удаляет
неиспользуемый код.
24. 27 January 2017
Anders Hejlsberg
Занимался разработкой таких языков как:
• Turbo Pascal
• Delphi
• C#
• TypeScript
25. 27 January 2017
TypeScript
• Очень гибкий транспайлер
• Система контроля типов
• Интерфейсы
• Mixins
• Пространства имен
26. TS Типизация
• Интерфейсы
• Проверка типов аргументов функций
• Проверка типов свойств
• Проверка типов возвращаемых значений функций
• Возможность декларации собственных типов
• Enum
27 January 2017 26
36. 27 January 2017
ReactiveX (Rx.js)
• Еще один подход для организации
асинхронных действий.
• Влечет за собой новый подход к
композиции компонентов нашего
приложения.
38. Rx.js + A2
PROS
- Позволяет убрать http логику из компонентов
- Очень удобно использовать с async pipe
CONS
- Вносит коррективы в композицию приложения
- Реализует метод toPromise()
27 January 2017 38
40. Rx.js
27 January 2017 H T T P S : / / W W W . Y O U T U B E . C O M / W A T C H ? V = W W R 9 N X V X 1 E C 40
ROB WORMALD
(@ROBWORMALD):
ANGULAR & RXJS AT
NG-EUROPE 2016
41. Zone.js
• Переопределяет стандартные методы для
асинхронных действий
• Детальный trace ошибок.
• Dirty-checking.
• Возможность прекратить все асинхронные действия
при уничтожении компонента.
27 January 2017 41
43. OnPush Strategy
• Мы полагаем, что все входы компонента
иммутабельные.
• Мы используем ручной вызов с помощью
markForCheck() для всех остальных случаев.
• Мы должны использовать только Immutable входящие
данные.
27 January 2017 F O O T E R H E R E 43
45. Web Animations API
27 January 2017 H T T P S : / / W W W . Y O U T U B E . C O M / W A T C H ? V = 4 V D M I V R M L 3 4 45
ANGULAR 2 0
ANIMATIONS MATIAS
NIEMELA
ANGULARCONNECT
46. Angular 2 Forms
27 January 2017 H T T P S : / / W W W . Y O U T U B E . C O M / W A T C H ? V = X Y V 9 L S R V 0 S 4 46
ANGULAR 2 FORMS
KARA ERICKSON
47. Совместимость
• Приложение частично собирается в ES5.
• CLI генерирует polyfills.brower.ts.
• Это не заведется на Safari + IE J.
• Для этого нам нужно руками подключить intl
полифилл.
27 January 2017 47
50. 27 January 2017
Augury
• Инструмент от команды A2.
• Не требует никаких телодвижений со
стороны разработчика.
• Отлично работает с собранными
приложениями.
56. 27 January 2017
Angular 2 Universal
• Инструмент от команды A2.
• Рендеринг статических страниц на
сервере.
• Пре-рендер и ре-рендер.
• Невероятно крутой API refence.