O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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
Próximos SlideShares
Carregando em…5
×

Angular 2 On Production

861 visualizações

Publicada em

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.

Publicada em: Tecnologia
  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

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

×