Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ONE YEAR OF ANGULAR 2 ON PRODUCTION Oleksandr Tryshchenko Senior Front-end Developer, DataArt
27 January 2017 Агенда • Почему? • Как? • Проблемы • Решения проблем • Примеры • Q&A • Плюшки
Что ожидалось от технологии • Отсутствие необходимости писать код ради самой технологии. • Стабильность и живое сообщество...
Что хотелось от технологии • Высокая производительность. • Совместимость со старыми браузерами. • Длинный жизненный цикл п...
27 January 2017 Web Components • Shadow DOM • Templates • Imports • Custom Elements
27 January 2017 Web Components • Shadow DOM • Templates • Imports • Custom Elements
27 January 2017 Shadow DOM
Shadow DOM 27 January 2017 10
Shadow DOM 27 January 2017 11
Shadow DOM – Emulated 27 January 2017 12
Shadow DOM – Emulated 27 January 2017 13
Shadow DOM – Emulated barny-bear - - barny-bear.component.ts - - barny-bear.component.spec.ts - - barny-bear.component.scs...
Shadow DOM !== Virtual DOM 1. Это вообще разные вещи. 2. … и предназначены они для разного. 27 January 2017 15
viewEncapsulation • None – не используем Shadow DOM. • Emulated – эмулируем поведение Shadow DOM (Default). • Native – вкл...
Декларация компонентов 27 January 2017 17
27 January 2017 Angular CLI • Официальный инструмент. • Стандартизация и подавление индивидуальности Разработчика. • Эконо...
27 January 2017 Angular CLI – Что умеет • Создание пустого проекта • Генерация компонентов и сервисов • Генерация инфрастр...
Angular CLI ? 27 January 2017 21
27 January 2017 Angular CLI - Webpack - Webpack 2 - Tree Shaking
27 January 2017 Tree Shaking - Webpack вычищает неиспользуемые ссылки. - UglifyJsPlugin удаляет неиспользуемый код.
27 January 2017 Anders Hejlsberg Занимался разработкой таких языков как: • Turbo Pascal • Delphi • C# • TypeScript
27 January 2017 TypeScript • Очень гибкий транспайлер • Система контроля типов • Интерфейсы • Mixins • Пространства имен
TS Типизация • Интерфейсы • Проверка типов аргументов функций • Проверка типов свойств • Проверка типов возвращаемых значе...
TS Типизация 27 January 2017 27
TS Декораторы (ESXXXX Декораторы) 27 January 2017 28 import { Component, Input, Output, EventEmitter } from '@angular/core...
Декораторы 27 January 2017 29
Декораторы 27 January 2017 30
Декораторы 27 January 2017 H T T P S : / / G I T H U B . C O M / W Y C A T S / J A V A S C R I P T - D E C O R A T O R S 31
TS typing xxxx.d.ts declare namespace d3 { type TooltipDirection = ("n" | "s" | "e" | "w" | "nw" | "ne" | "sw" | "se"); in...
27 January 2017 Связывание Однонаправленный «внутрь»: • {{expression}} • [target] = "expression" • bind-target = "expressi...
27 January 2017 Связывание Однонаправленный «внаружу»: • (target) = "statement" • on-target = "statement"
27 January 2017 Связывание Однонаправленный «внаружу»: • [(target)] = "expression" • bindon-target = "expression"
27 January 2017 ReactiveX (Rx.js) • Еще один подход для организации асинхронных действий. • Влечет за собой новый подход к...
Используем flatMap и switchMap 27 January 2017 37
Rx.js + A2 PROS - Позволяет убрать http логику из компонентов - Очень удобно использовать с async pipe CONS - Вносит корре...
Композиция компонентов 27 January 2017 39
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...
Zone.js • Переопределяет стандартные методы для асинхронных действий • Детальный trace ошибок. • Dirty-checking. • Возможн...
Angular 2 Change Detection Strategies 27 January 2017 42
OnPush Strategy • Мы полагаем, что все входы компонента иммутабельные. • Мы используем ручной вызов с помощью markForCheck...
Key Value Differs 27 January 2017 44
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 4...
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 A...
Совместимость • Приложение частично собирается в ES5. • CLI генерирует polyfills.brower.ts. • Это не заведется на Safari +...
Отладка Angular 2 приложений 27 January 2017 48
@angular/core/testing - Jasmine - Karma - Protractor (e2e) 27 January 2017 49
27 January 2017 Augury • Инструмент от команды A2. • Не требует никаких телодвижений со стороны разработчика. • Отлично ра...
27 January 2017 51
27 January 2017 Visual Studio Code • Синтаксический анализ кода с учетом указанных типов. • Встроенный транспайлер.
Субъективно • Есть компоненты. Один тип компонентов. • Есть директивы. Один тип директив. • Есть сервисы. Один тип сервисо...
Спасибо! 27 January 2017 54
А что дальше? 27 January 2017 55
27 January 2017 Angular 2 Universal • Инструмент от команды A2. • Рендеринг статических страниц на сервере. • Пре-рендер и...
27 January 2017 NativeScript
27 January 2017 angular
27 January 2017 angular-react
27 January 2017 angular-react-native
27 January 2017 angular-react-native- renderer
Angular 2 On Production
Angular 2 On Production
Angular 2 On Production
Upcoming SlideShare
Loading in …5
×

Angular 2 On Production

860 views

Published on

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.

Published in: Technology
no profile picture user

  • Login to see the comments

  • Be the first to like this

Angular 2 On Production

  1. 1. ONE YEAR OF ANGULAR 2 ON PRODUCTION Oleksandr Tryshchenko Senior Front-end Developer, DataArt
  2. 2. 27 January 2017 Агенда • Почему? • Как? • Проблемы • Решения проблем • Примеры • Q&A • Плюшки
  3. 3. Что ожидалось от технологии • Отсутствие необходимости писать код ради самой технологии. • Стабильность и живое сообщество. • Простая комплектация команд под проекты. • Целостная экосистема и подобная структура от проекта к проекту. • Достаточный уровень абстракции и ощутимый прирост в скорости разработки. • Низкая связность приложения. • Удобная тестируемость. 27 January 2017 5
  4. 4. Что хотелось от технологии • Высокая производительность. • Совместимость со старыми браузерами. • Длинный жизненный цикл продукта. 27 January 2017 6
  5. 5. 27 January 2017 Web Components • Shadow DOM • Templates • Imports • Custom Elements
  6. 6. 27 January 2017 Web Components • Shadow DOM • Templates • Imports • Custom Elements
  7. 7. 27 January 2017 Shadow DOM
  8. 8. Shadow DOM 27 January 2017 10
  9. 9. Shadow DOM 27 January 2017 11
  10. 10. Shadow DOM – Emulated 27 January 2017 12
  11. 11. Shadow DOM – Emulated 27 January 2017 13
  12. 12. Shadow DOM – Emulated barny-bear - - barny-bear.component.ts - - barny-bear.component.spec.ts - - barny-bear.component.scss - - barny-bear.component.html - - barny-bear.module.ts 27 January 2017 14
  13. 13. Shadow DOM !== Virtual DOM 1. Это вообще разные вещи. 2. … и предназначены они для разного. 27 January 2017 15
  14. 14. viewEncapsulation • None – не используем Shadow DOM. • Emulated – эмулируем поведение Shadow DOM (Default). • Native – включить нативную реализацию. 27 January 2017 16
  15. 15. Декларация компонентов 27 January 2017 17
  16. 16. 27 January 2017 Angular CLI • Официальный инструмент. • Стандартизация и подавление индивидуальности Разработчика. • Экономия времени и денег на рутине. • Конфигурирует Webpack вместо тебя J. • Подразумевает написание юнит тестов.
  17. 17. 27 January 2017 Angular CLI – Что умеет • Создание пустого проекта • Генерация компонентов и сервисов • Генерация инфраструктуры: сборка, тесты • Синтаксический анализ кода • Различные окружения • Форматирование кода
  18. 18. Angular CLI ? 27 January 2017 21
  19. 19. 27 January 2017 Angular CLI - Webpack - Webpack 2 - Tree Shaking
  20. 20. 27 January 2017 Tree Shaking - Webpack вычищает неиспользуемые ссылки. - UglifyJsPlugin удаляет неиспользуемый код.
  21. 21. 27 January 2017 Anders Hejlsberg Занимался разработкой таких языков как: • Turbo Pascal • Delphi • C# • TypeScript
  22. 22. 27 January 2017 TypeScript • Очень гибкий транспайлер • Система контроля типов • Интерфейсы • Mixins • Пространства имен
  23. 23. TS Типизация • Интерфейсы • Проверка типов аргументов функций • Проверка типов свойств • Проверка типов возвращаемых значений функций • Возможность декларации собственных типов • Enum 27 January 2017 26
  24. 24. TS Типизация 27 January 2017 27
  25. 25. TS Декораторы (ESXXXX Декораторы) 27 January 2017 28 import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'conditional-formating', templateUrl: './conditional-formating.component.html', styleUrls: ['./conditional-formating.component.scss'], providers: [] }) export class ConditionalFormatingComponent { @Input() value: Number = 0; @Input() label: String = ‘No Value'; constructor() { } }
  26. 26. Декораторы 27 January 2017 29
  27. 27. Декораторы 27 January 2017 30
  28. 28. Декораторы 27 January 2017 H T T P S : / / G I T H U B . C O M / W Y C A T S / J A V A S C R I P T - D E C O R A T O R S 31
  29. 29. TS typing xxxx.d.ts declare namespace d3 { type TooltipDirection = ("n" | "s" | "e" | "w" | "nw" | "ne" | "sw" | "se"); interface Tooltip { hide(): Tooltip; show(target: SVGElement): Tooltip; attr(name: string, value: Primitive): Tooltip; style(name: string, value: Primitive, priority?: string): Tooltip; destroy(): Tooltip; } export function tip(): Tooltip; } 27 January 2017 32
  30. 30. 27 January 2017 Связывание Однонаправленный «внутрь»: • {{expression}} • [target] = "expression" • bind-target = "expression"
  31. 31. 27 January 2017 Связывание Однонаправленный «внаружу»: • (target) = "statement" • on-target = "statement"
  32. 32. 27 January 2017 Связывание Однонаправленный «внаружу»: • [(target)] = "expression" • bindon-target = "expression"
  33. 33. 27 January 2017 ReactiveX (Rx.js) • Еще один подход для организации асинхронных действий. • Влечет за собой новый подход к композиции компонентов нашего приложения.
  34. 34. Используем flatMap и switchMap 27 January 2017 37
  35. 35. Rx.js + A2 PROS - Позволяет убрать http логику из компонентов - Очень удобно использовать с async pipe CONS - Вносит коррективы в композицию приложения - Реализует метод toPromise() 27 January 2017 38
  36. 36. Композиция компонентов 27 January 2017 39
  37. 37. 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
  38. 38. Zone.js • Переопределяет стандартные методы для асинхронных действий • Детальный trace ошибок. • Dirty-checking. • Возможность прекратить все асинхронные действия при уничтожении компонента. 27 January 2017 41
  39. 39. Angular 2 Change Detection Strategies 27 January 2017 42
  40. 40. OnPush Strategy • Мы полагаем, что все входы компонента иммутабельные. • Мы используем ручной вызов с помощью markForCheck() для всех остальных случаев. • Мы должны использовать только Immutable входящие данные. 27 January 2017 F O O T E R H E R E 43
  41. 41. Key Value Differs 27 January 2017 44
  42. 42. 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
  43. 43. 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
  44. 44. Совместимость • Приложение частично собирается в ES5. • CLI генерирует polyfills.brower.ts. • Это не заведется на Safari + IE J. • Для этого нам нужно руками подключить intl полифилл. 27 January 2017 47
  45. 45. Отладка Angular 2 приложений 27 January 2017 48
  46. 46. @angular/core/testing - Jasmine - Karma - Protractor (e2e) 27 January 2017 49
  47. 47. 27 January 2017 Augury • Инструмент от команды A2. • Не требует никаких телодвижений со стороны разработчика. • Отлично работает с собранными приложениями.
  48. 48. 27 January 2017 51
  49. 49. 27 January 2017 Visual Studio Code • Синтаксический анализ кода с учетом указанных типов. • Встроенный транспайлер.
  50. 50. Субъективно • Есть компоненты. Один тип компонентов. • Есть директивы. Один тип директив. • Есть сервисы. Один тип сервисов. 27 January 2017 53
  51. 51. Спасибо! 27 January 2017 54
  52. 52. А что дальше? 27 January 2017 55
  53. 53. 27 January 2017 Angular 2 Universal • Инструмент от команды A2. • Рендеринг статических страниц на сервере. • Пре-рендер и ре-рендер. • Невероятно крутой API refence.
  54. 54. 27 January 2017 NativeScript
  55. 55. 27 January 2017 angular
  56. 56. 27 January 2017 angular-react
  57. 57. 27 January 2017 angular-react-native
  58. 58. 27 January 2017 angular-react-native- renderer

×