Angular2

Sergey Melekhin
Sergey MelekhinTeam Lead at Ramax International
2015
Angular 2:
что грядёт
Березин Артём
artem@emply.ru
Зачем вообще
нужна новая
версия
Устаревшие принципы
Код AngularJs 1 основывается на
принципах, принятых в 2009 году
Устаревшие принципы
Код AngularJs 1 основывается на
принципах, принятых в 2009 году
Directive → WebComponents
Устаревшие принципы
Код AngularJs 1 основывается на
принципах, принятых в 2009 году
Directive → WebComponents
Transclusion → Shadow DOM
Устаревшие принципы
Код AngularJs 1 основывается на
принципах, принятых в 2009 году
Directive → WebComponents
Transclusion → Shadow DOM
Module → ES6 Module
Низкая производительность
Angular2 в 5 раз шустрее
Тест на построение дерева глубокой вложенности
Сложные концепции
AngularJS 1 содержит много разных
концепций
Сервисы
Провайдеры
Фабрики
Scope
Контроллеры
Модули
Директивы
etc...
Сложные концепции
Это усложняет обучение и понимание
B итоге
Недостатки AngularJs 1
Устаревшие принципы
Низкая производительность
Сложные концепции, крутая кривая изучения
Angular 2
TypeScript
Компоненты
Инициализация приложения
Синтаксис шаблонов
Проверка изменений в моделях
Простое приложение
TypeScript – надмножество JavaScript
TypeScript – надмножество JavaScript
Компилируется в ES5/ES6
Не зависит от Angular 2
Типизированный, но типы
указывать не обязательно
TypeScript 1.5
TypeScript – надмножество JavaScript
Компоненты
Компоненты: Аннотации
Компоненты: Контроллер
Компоненты
Инициализация: AngularJs 1
Инициализация: AngularJs 1
1)Создать модуль
2)Прописать ng-app в шаблоне
3)Создать контроллер controller
4)Присвоить значения полям $scope
5)Зарегистрировть контроллер
6)Создать шаблон
Инициализация: AngularJs 2
Создать компонент
Инициализировать его
Инициализация: AngularJs 2
1)Создать компонент
2)Создать шаблон
3)Инициализировать (корневой компонент)
4)Транслировать TypeScript в JS (ES5)
Синтаксис шаблонов
Синтаксис шаблонов
Синтаксис шаблонов
Локальные переменные
Синтаксис шаблонов
Обработчики событий
Синтаксис шаблонов
Изменение свойств DOM-элементов
Синтаксис шаблонов
Синтаксис шаблонов
Унификация
#varName — для локальных переменных
(eventName) — для событий
[property] — для полей DOM-элементов
Проверка изменений в моделях
Zone.js
Использует нативный Object.observe()
Рендерит только те компоненты, что изменились
Организовывает асинхронный код в виде задач (зон)
Позволяет отлавливать исключения внутри таких зон.
Позволяет отказаться от $digest ($apply): больше не нужно
вручную вызывать scope.$apply() или заворачивать код в
$timeout
Спасибо за
внимание.
Вопросы?
Основано на: https://angular2-intro.firebaseapp.com/
1 of 33

Recommended

Angular vs Angular 2 vs React. Сергей Александров by
Angular vs Angular 2 vs React. Сергей АлександровAngular vs Angular 2 vs React. Сергей Александров
Angular vs Angular 2 vs React. Сергей АлександровEatDog
4.2K views18 slides
Dagger 2 by
Dagger 2Dagger 2
Dagger 2Kirill Rozov
382 views27 slides
Rambler.iOS #5: VIPER a la Rambler by
Rambler.iOS #5: VIPER a la RamblerRambler.iOS #5: VIPER a la Rambler
Rambler.iOS #5: VIPER a la RamblerRAMBLER&Co
1.7K views37 slides
презентация вводного доклада Angular на fronttalks.ru by
презентация вводного доклада Angular на fronttalks.ruпрезентация вводного доклада Angular на fronttalks.ru
презентация вводного доклада Angular на fronttalks.ruIvan Gromov
1.4K views15 slides
Никита Галкин "Testing in Node.js World" by
Никита Галкин "Testing in Node.js World"Никита Галкин "Testing in Node.js World"
Никита Галкин "Testing in Node.js World"Fwdays
370 views39 slides
AngularJS basics & theory by
AngularJS basics & theoryAngularJS basics & theory
AngularJS basics & theoryDevOWL Meetup
40.2K views18 slides

More Related Content

What's hot

Строим успешную карьеру в IT. Плюсы и минусы сертификации для java разработчиков by
Строим успешную карьеру в IT. Плюсы и минусы сертификации для java разработчиковСтроим успешную карьеру в IT. Плюсы и минусы сертификации для java разработчиков
Строим успешную карьеру в IT. Плюсы и минусы сертификации для java разработчиковConstantine Slisenka
1.6K views20 slides
Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular" by
Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"
Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"Fwdays
817 views29 slides
Rambler.iOS #5: TDD и VIPER by
Rambler.iOS #5: TDD и VIPERRambler.iOS #5: TDD и VIPER
Rambler.iOS #5: TDD и VIPERRAMBLER&Co
1.3K views14 slides
Сергей Крапивенский by
Сергей КрапивенскийСергей Крапивенский
Сергей КрапивенскийCodeFest
1.5K views48 slides
"React application structure at project start", Maksym Shestopal by
"React application structure at project start", Maksym Shestopal"React application structure at project start", Maksym Shestopal
"React application structure at project start", Maksym ShestopalFwdays
247 views26 slides
"Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25 by
"Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25"Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25
"Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25MoscowJS
1.2K views83 slides

What's hot(20)

Строим успешную карьеру в IT. Плюсы и минусы сертификации для java разработчиков by Constantine Slisenka
Строим успешную карьеру в IT. Плюсы и минусы сертификации для java разработчиковСтроим успешную карьеру в IT. Плюсы и минусы сертификации для java разработчиков
Строим успешную карьеру в IT. Плюсы и минусы сертификации для java разработчиков
Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular" by Fwdays
Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"
Сергей Мелашич "Настройка SEO для одностраничных web-приложений на Angular"
Fwdays817 views
Rambler.iOS #5: TDD и VIPER by RAMBLER&Co
Rambler.iOS #5: TDD и VIPERRambler.iOS #5: TDD и VIPER
Rambler.iOS #5: TDD и VIPER
RAMBLER&Co1.3K views
Сергей Крапивенский by CodeFest
Сергей КрапивенскийСергей Крапивенский
Сергей Крапивенский
CodeFest1.5K views
"React application structure at project start", Maksym Shestopal by Fwdays
"React application structure at project start", Maksym Shestopal"React application structure at project start", Maksym Shestopal
"React application structure at project start", Maksym Shestopal
Fwdays247 views
"Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25 by MoscowJS
"Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25"Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25
"Redux: the best for isomorphic apps", Денис Измайлов, MoscowJS 25
MoscowJS1.2K views
Tech talk Angular 2 by DA-14
Tech talk Angular 2Tech talk Angular 2
Tech talk Angular 2
DA-14411 views
"Prom.ua shopping cart workflow as a microfrontend", Danylo Kazymyrov by Fwdays
"Prom.ua shopping cart workflow as a microfrontend", Danylo Kazymyrov"Prom.ua shopping cart workflow as a microfrontend", Danylo Kazymyrov
"Prom.ua shopping cart workflow as a microfrontend", Danylo Kazymyrov
Fwdays203 views
Konstantin Slisenko - OSGi, Equinox, Eclipse plug-in development, v 2.0 by beloslab
Konstantin Slisenko - OSGi, Equinox, Eclipse plug-in development, v 2.0Konstantin Slisenko - OSGi, Equinox, Eclipse plug-in development, v 2.0
Konstantin Slisenko - OSGi, Equinox, Eclipse plug-in development, v 2.0
beloslab681 views
React native. Bridge From Web To Mobile. Intro by Igor Izraylevych
React native. Bridge From Web To Mobile. IntroReact native. Bridge From Web To Mobile. Intro
React native. Bridge From Web To Mobile. Intro
Igor Izraylevych347 views
Android - 06 - Gradle by Noveo
Android - 06 - GradleAndroid - 06 - Gradle
Android - 06 - Gradle
Noveo626 views
Gradle. Новый уровень автоматизации для Android by SQALab
Gradle. Новый уровень автоматизации для AndroidGradle. Новый уровень автоматизации для Android
Gradle. Новый уровень автоматизации для Android
SQALab5.6K views
Mule ESB - easy integration and prototyping for client-server applications by Constantine Slisenka
Mule ESB - easy integration and prototyping for client-server applicationsMule ESB - easy integration and prototyping for client-server applications
Mule ESB - easy integration and prototyping for client-server applications
Funny JS #3. Воркшоп. Делаем свой твиттер с React и Angular by Alexander Konovalov
Funny JS #3. Воркшоп. Делаем свой твиттер с React и AngularFunny JS #3. Воркшоп. Делаем свой твиттер с React и Angular
Funny JS #3. Воркшоп. Делаем свой твиттер с React и Angular
What to expect from Java 9 by JavaDayUA
What to expect from Java 9What to expect from Java 9
What to expect from Java 9
JavaDayUA1.3K views
"Посмотрим на Акку-Джаву" Дмитрий Мантула by Fwdays
"Посмотрим на Акку-Джаву" Дмитрий Мантула"Посмотрим на Акку-Джаву" Дмитрий Мантула
"Посмотрим на Акку-Джаву" Дмитрий Мантула
Fwdays490 views
03 - Android 6. Gradle by Roman Brovko
03 - Android 6. Gradle03 - Android 6. Gradle
03 - Android 6. Gradle
Roman Brovko151 views
Gradle. Новый уровень автоматизации для Android by Anton Rutkevich
Gradle. Новый уровень автоматизации для AndroidGradle. Новый уровень автоматизации для Android
Gradle. Новый уровень автоматизации для Android
Anton Rutkevich675 views
AzovDevMeetup 2016 | Zero downtime — как релизить продукт миллионам пользоват... by JSC “Arcadia Inc”
AzovDevMeetup 2016 | Zero downtime — как релизить продукт миллионам пользоват...AzovDevMeetup 2016 | Zero downtime — как релизить продукт миллионам пользоват...
AzovDevMeetup 2016 | Zero downtime — как релизить продукт миллионам пользоват...

Viewers also liked

Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей ... by
Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей ...Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей ...
Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей ...Ontico
1.9K views99 slides
"Angular 2: Всех переиграл" Евгений Жарков by
"Angular 2: Всех переиграл" Евгений Жарков"Angular 2: Всех переиграл" Евгений Жарков
"Angular 2: Всех переиграл" Евгений ЖарковFwdays
2.9K views35 slides
AngularJS. Введение и простые примеры для понимания by
AngularJS. Введение и простые примеры для пониманияAngularJS. Введение и простые примеры для понимания
AngularJS. Введение и простые примеры для пониманияIgor Sazonov
13.5K views14 slides
Redux in Angular2 for jsbe by
Redux in Angular2 for jsbeRedux in Angular2 for jsbe
Redux in Angular2 for jsbeBrecht Billiet
767 views43 slides
Redux data flow with angular 2 by
Redux data flow with angular 2Redux data flow with angular 2
Redux data flow with angular 2Gil Fink
1.8K views31 slides
Data Flow Patterns in Angular 2 - Sebastian Müller by
Data Flow Patterns in Angular 2 -  Sebastian MüllerData Flow Patterns in Angular 2 -  Sebastian Müller
Data Flow Patterns in Angular 2 - Sebastian MüllerSebastian Holstein
1.4K views57 slides

Viewers also liked(9)

Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей ... by Ontico
Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей ...Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей ...
Angular 2 не так уж и плох... А если задуматься, то и просто хорош / Алексей ...
Ontico1.9K views
"Angular 2: Всех переиграл" Евгений Жарков by Fwdays
"Angular 2: Всех переиграл" Евгений Жарков"Angular 2: Всех переиграл" Евгений Жарков
"Angular 2: Всех переиграл" Евгений Жарков
Fwdays2.9K views
AngularJS. Введение и простые примеры для понимания by Igor Sazonov
AngularJS. Введение и простые примеры для пониманияAngularJS. Введение и простые примеры для понимания
AngularJS. Введение и простые примеры для понимания
Igor Sazonov13.5K views
Redux data flow with angular 2 by Gil Fink
Redux data flow with angular 2Redux data flow with angular 2
Redux data flow with angular 2
Gil Fink1.8K views
Data Flow Patterns in Angular 2 - Sebastian Müller by Sebastian Holstein
Data Flow Patterns in Angular 2 -  Sebastian MüllerData Flow Patterns in Angular 2 -  Sebastian Müller
Data Flow Patterns in Angular 2 - Sebastian Müller
Sebastian Holstein1.4K views
Functional Reactive Angular 2 by Tomasz Bak
Functional Reactive Angular 2 Functional Reactive Angular 2
Functional Reactive Angular 2
Tomasz Bak879 views
Angular 2 Architecture by Eyal Vardi
Angular 2 ArchitectureAngular 2 Architecture
Angular 2 Architecture
Eyal Vardi6.3K views
Getting Started with Angular 2 by FITC
Getting Started with Angular 2Getting Started with Angular 2
Getting Started with Angular 2
FITC12.7K views

Similar to Angular2

Антон Гордийчук Тема: "AngularJS — продвинутый HTML для web-приложений" by
Антон Гордийчук Тема: "AngularJS — продвинутый HTML для web-приложений"Антон Гордийчук Тема: "AngularJS — продвинутый HTML для web-приложений"
Антон Гордийчук Тема: "AngularJS — продвинутый HTML для web-приложений"Ciklum Minsk
1.7K views42 slides
Как перейти с двухзвенной архитектуры Desktop приложения на трехзвенную за од... by
Как перейти с двухзвенной архитектуры Desktop приложения на трехзвенную за од...Как перейти с двухзвенной архитектуры Desktop приложения на трехзвенную за од...
Как перейти с двухзвенной архитектуры Desktop приложения на трехзвенную за од...GoSharp
1.2K views28 slides
Appery.io Ukraine_2016 by
Appery.io Ukraine_2016Appery.io Ukraine_2016
Appery.io Ukraine_2016Kateryna Tatarovska
165 views13 slides
Проблемы точечной застройки в больших городах или зачем нужен Dagger by
Проблемы точечной застройки в больших городах или зачем нужен DaggerПроблемы точечной застройки в больших городах или зачем нужен Dagger
Проблемы точечной застройки в больших городах или зачем нужен DaggerValeriya Atamanova
213 views58 slides
Backbone lesson 1 by
Backbone lesson 1Backbone lesson 1
Backbone lesson 1Mihail Skida
1.4K views13 slides
«Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt) by
«Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)«Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)
«Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)Mail.ru Group
11.7K views34 slides

Similar to Angular2(20)

Антон Гордийчук Тема: "AngularJS — продвинутый HTML для web-приложений" by Ciklum Minsk
Антон Гордийчук Тема: "AngularJS — продвинутый HTML для web-приложений"Антон Гордийчук Тема: "AngularJS — продвинутый HTML для web-приложений"
Антон Гордийчук Тема: "AngularJS — продвинутый HTML для web-приложений"
Ciklum Minsk1.7K views
Как перейти с двухзвенной архитектуры Desktop приложения на трехзвенную за од... by GoSharp
Как перейти с двухзвенной архитектуры Desktop приложения на трехзвенную за од...Как перейти с двухзвенной архитектуры Desktop приложения на трехзвенную за од...
Как перейти с двухзвенной архитектуры Desktop приложения на трехзвенную за од...
GoSharp1.2K views
Проблемы точечной застройки в больших городах или зачем нужен Dagger by Valeriya Atamanova
Проблемы точечной застройки в больших городах или зачем нужен DaggerПроблемы точечной застройки в больших городах или зачем нужен Dagger
Проблемы точечной застройки в больших городах или зачем нужен Dagger
Valeriya Atamanova213 views
Backbone lesson 1 by Mihail Skida
Backbone lesson 1Backbone lesson 1
Backbone lesson 1
Mihail Skida1.4K views
«Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt) by Mail.ru Group
«Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)«Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)
«Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)
Mail.ru Group11.7K views
Сложные социальные приложения с помощью JS MVC фреймворков by z-tech
Сложные социальные приложения с помощью JS MVC фреймворковСложные социальные приложения с помощью JS MVC фреймворков
Сложные социальные приложения с помощью JS MVC фреймворков
z-tech751 views
Эволюция управления зависимостями в коде by Alexander Byndyu
Эволюция управления зависимостями в кодеЭволюция управления зависимостями в коде
Эволюция управления зависимостями в коде
Alexander Byndyu19K views
Архитектурные решения при создании облачного сервиса на Asp.Net by GoSharp
Архитектурные решения при создании облачного сервиса на Asp.NetАрхитектурные решения при создании облачного сервиса на Asp.Net
Архитектурные решения при создании облачного сервиса на Asp.Net
GoSharp660 views
Кирилл Маурин «Проектирование и разработка модульных приложений» by Yulia Tsisyk
Кирилл Маурин «Проектирование и разработка модульных приложений» Кирилл Маурин «Проектирование и разработка модульных приложений»
Кирилл Маурин «Проектирование и разработка модульных приложений»
Yulia Tsisyk417 views
Кирилл Маурин «Проектирование и разработка модульных приложений» by MskDotNet Community
Кирилл Маурин «Проектирование и разработка модульных приложений»Кирилл Маурин «Проектирование и разработка модульных приложений»
Кирилл Маурин «Проектирование и разработка модульных приложений»
Google appengine for_starupweekend2010 by Startup Weekend
Google appengine for_starupweekend2010Google appengine for_starupweekend2010
Google appengine for_starupweekend2010
Startup Weekend431 views
Рефакторинг и второе рождение проекта на примере Zend Framework 2.0 by AlexeyParhomenko
Рефакторинг и второе рождение проекта на примере Zend Framework 2.0Рефакторинг и второе рождение проекта на примере Zend Framework 2.0
Рефакторинг и второе рождение проекта на примере Zend Framework 2.0
AlexeyParhomenko2K views
Завершающая лекция - часть 2 - чему вас не учили by Alexey Vasyukov
Завершающая лекция - часть 2 - чему вас не училиЗавершающая лекция - часть 2 - чему вас не учили
Завершающая лекция - часть 2 - чему вас не учили
Alexey Vasyukov663 views
Meet Magento Belarus 2015: Denis Bosak by Amasty
Meet Magento Belarus 2015: Denis BosakMeet Magento Belarus 2015: Denis Bosak
Meet Magento Belarus 2015: Denis Bosak
Amasty1K views
Автоматизация design patterns и компактный код вместе с PostSharp by GoSharp
Автоматизация design patterns и компактный код вместе с PostSharpАвтоматизация design patterns и компактный код вместе с PostSharp
Автоматизация design patterns и компактный код вместе с PostSharp
GoSharp665 views
Backbone js for expert fridays.pptx by Provectus
Backbone js for  expert fridays.pptxBackbone js for  expert fridays.pptx
Backbone js for expert fridays.pptx
Provectus174 views
Spring MVC: взгляд с другой стороны by springbyexample
Spring MVC: взгляд с другой стороныSpring MVC: взгляд с другой стороны
Spring MVC: взгляд с другой стороны
springbyexample1.6K views
ASP.Net Core by ArturDr
ASP.Net CoreASP.Net Core
ASP.Net Core
ArturDr1.7K views

More from Sergey Melekhin

Deeper learning dev fest nn by
Deeper learning dev fest nnDeeper learning dev fest nn
Deeper learning dev fest nnSergey Melekhin
62 views27 slides
Docker for developers by
Docker for developersDocker for developers
Docker for developersSergey Melekhin
45 views13 slides
Dev fest siberia 2017 build a robot by
Dev fest siberia 2017  build a robotDev fest siberia 2017  build a robot
Dev fest siberia 2017 build a robotSergey Melekhin
35 views12 slides
Ml and its bright future by
Ml and its bright futureMl and its bright future
Ml and its bright futureSergey Melekhin
73 views54 slides
How deep is deep learning by
How deep is deep learning How deep is deep learning
How deep is deep learning Sergey Melekhin
122 views22 slides
Project tango by
Project tangoProject tango
Project tangoSergey Melekhin
127 views11 slides

More from Sergey Melekhin(13)

Dev fest siberia 2017 build a robot by Sergey Melekhin
Dev fest siberia 2017  build a robotDev fest siberia 2017  build a robot
Dev fest siberia 2017 build a robot
Sergey Melekhin35 views
Основные подходы к организации Highload сервисов by Sergey Melekhin
Основные подходы к организации Highload сервисовОсновные подходы к организации Highload сервисов
Основные подходы к организации Highload сервисов
Sergey Melekhin192 views
Почему Терминаторы нам пока не страшны by Sergey Melekhin
Почему Терминаторы нам пока не страшныПочему Терминаторы нам пока не страшны
Почему Терминаторы нам пока не страшны
Sergey Melekhin748 views
Синие против красных by Sergey Melekhin
Синие против красныхСиние против красных
Синие против красных
Sergey Melekhin524 views
Волков не бояться! Бизнес логика и РСУБД by Sergey Melekhin
Волков не бояться! Бизнес логика и РСУБДВолков не бояться! Бизнес логика и РСУБД
Волков не бояться! Бизнес логика и РСУБД
Sergey Melekhin398 views

Angular2