Downloaded 11 times
![[Knowledge Sharing] - Unit Testing by Pavlo Serdyuk (UKR)](https://cdn.slidesharecdn.com/ss_thumbnails/1-190212161353-thumbnail.jpg?width=640&height=640&fit=bounds)
Angular. presentation
- 1. eleks.comeleks.com JAVA SCRIPT FRAMEWORKS Наприкладі Angular 2
- 2. Що нас чекає •Короткий огляд Java Script Frameworks • Огляд Angular 2 • Розбір основних компонентів Angular 2 • Demo
- 3. JS Frameworks. Навіщовони вам? • Client-side має більше «відповідальності» ніж колись • Фреймворк надає інфраструктуру для розробки (очевидно) • Фреймворк пропагує певні підходи і стандарти • Він може спростити життя розробника
- 4.
- 5.
- 6. Переваги та Недоліки •Плюси Швидкодія Архітектурне рішення TypeScript Простота вивчення Велике ком’юніті Підтримка Google o Мінуси o Специфічний синтаксис темплейтів o TypeScript
- 7.
- 8.
- 9. Component – цеосновний структурний блок додатку на Angular. Додаток можна уявити, як набір компонентів, які взаємодіють між собою.
- 10. Структура Компонента Template • Відображення зHTML • Прив’язка даних • Використання директив Class • Клас на TypeScript • Логіка програми • Властивості та методи Metadata • Дані для самого Angular • Декоратор для класу
- 11.
- 12. Шаблон Шаблон – це відображення, описанена HTML з використанням виразів прив’язки даних та директив.
- 13.
- 14. Директиви Вбудовані директиви • ngIf •ngFor • ngSwitch • ngClass • ngStyle
- 15. Сервіс – цепростий клас, який призначений для виконання кокретних дій. Він може повторно застосовуватись, використовується компонентами, але незалежний від них.
- 16. Сервіси та DI ДляDI сервіса: • Створити клас сервіса • Зареєструвати сервіс в контейнері • Заін’єктити в компонент через конструктор
- 18. Комунікація із сервером Длякомунікації використовується HTTP Client, який входить в склад фреймворка і працює на основі Observables https://angular.io/docs/ts/latest/guide/server-communication.html
- 19. Роутінг Routing – забезпечує процеспереходу юзера між функціональними елементами SAP. Використовується для навігації по додатку. https://angular.io/docs/ts/latest/guide/router.html
- 20. Що не потрапилов презентацію • Pipes • Angular Lifecycle • @Input, @Output та деталі про Nested Components • Та багато іншого
- 21. Корисні Посилання • Офіційнадокументація https://angular.io/docs/ts/la • Хаб з ресурсами http://www.angular2.com/
- 22.
- 23. P.S. До наступного юнітавам потрібно інсталювати: Лекція 1: JDK; Eclipse IDE Лекція 2-5: Android Studio; Android SDK; Genymotion emulator: install and download any device image (or a couple: phone and tablet).
- 24.
Editor's Notes
- #4 Функції client-side стали ширшими. Тепер досить велика частина логіки виконується на client-side, що дозволяє зменшити навантаження на сервер. Проте разом з тим зростає відповідальність клієнтської сторони Фреймоврки надають нам інфраструктуру для розробки, беручи на себе роботу над основними рутинними і не зовсім завданнями, з якими доводиться працювати Використання фреймворка так чи інакше спонукає використовувати певні підходи, які закладені розробниками фреймворка. З одного боку це робить код уніфікованим і «інтернаціональним», з іншого – в специфічних випадках це може заважати Оскільки фреймворки перебирають на себе багато роботи, яку засвичай потрібно писати самому – кількість коду зменшується. А менше коду банально легше супортити, поклавшись на добре протестований фреймворк.
- #5 Статистика по використанню найбільш трендових JS Frameworks. Статистика взята із сайту http://trends.builtwith.com/ Описано відсоток сайтів, на яких використовується той чи інший фреймворк. Для Angular враховане використання 1-ої версії фреймворка. На слайді не згадано багато інщих фреймворків., зокрема: Ember, Knockout, Цікава порівняльна характеристика є в статті: https://www.airpair.com/js/javascript-framework-comparison#6-1-the-good-parts
- #6 Надалі більш детально розглянемо Angular і принципи його роботи. Розглядатимемо саме його, тому що він активно використовується на ринку і розвивається інтенсивними темпами. А також з ряду причин, які розглянуті на наступних слайдах.
- #7 Переваги Angular: Швидкий і зручний механізм привязки даних, який в Angular 2 зазнав значної трансформації і тепер в рази швидший і оптимізований. Побудова самого фреймворку, і пропонована схема розробки є досить зручною та зрозумілою Рекомендовано використовувати TypeScript, який є субєктивно досить зручним і привітнішим для людей, які прийшли з бек-енду Має середню складність для вивчення. З ним легко почати працювати, проте на розбрі всіх механізмів роботи потрібен час. Ангулар має велику підтримку спільноти програмістів. Зокрема велика кількість запитань вже вирішено на Stack Overflow і зважаючи на популярність фреймворка 2-га версія в цьому плані не підкачає Ангулар розробляється під крилом Google, що не можна ігнорувати. Недоліки: Специфічний синтаксис побудови темплейтів. Є досить багато всяких різних правил, притаманних суто Ангулару Для людей, які прийшли з фронт-енду TypeScript може видатись незвичним з своїм тайп-чекінгом і іншими особливостями
- #8 На попередньому слайді згадувався TypeScript. Ангулар пропагує використання його для побудови додатків. Наразі більшість документації описана саме для нього. Проте створювати додатки можна і з використанням інших мов: ES (5, 2015) Dart TypeScript
- #9 Класична хай-левел архітектура фреймворка, якою її показує сам Google. Кожен із компонентів детальніше буде розглянутий на наступних слайдах. Загалом архітектуру можна описати наступним чином: В центрі стоїть компонент, який взаємодії із відображенням (темплейтом) використовуючи механізми прив’язки даних. Компонент може використовувати різні сервіси, яким він делегує більшість завдань, які пов’язані із маніпуляціями над даними (калькуляція, валідація, взаємодія із сервером тощо) Для того, щоб компонет міг взаємодіяти із сервісами використовується механізм Dependency Injection, який реалізовується з допомогою Injector-а Для розробки темплейта використовуються спеціальні директиви, які дозволяють спростити деякі механізми маніпуляції над відображенням
- #11 Структуру компонента можна описати як взаємозв’язок між Темплейтом і Класом, який містить метадані. Роль темплейта – надати відображення, в якому описана привязка даних між кодом і Темплейтом Роль класа – вміщувати логіку репрезентації даних і їх обробки Метадані – надають сервісну інформацію про компонент, яка використовується Ангуларом для побудови алпікейшина.
- #12 Структорний розподіл із попереднього слайду в коді на TypeScript виглядає так, як це показано на даному слайді.
- #13 Шаблон можна описати, як відображення деякого компонента, яке створене з допомогою HTML. При цьому використовується спеціланий синтаксис для забезпечення роботи механізму привязки даних. Привязка даних реалізує обмін інформацією між елементами DOM та логікою компонента на JS. Окрім того для реалізації певних комон задач використовуються директиви, які надають додаткові можливості маніпуляції над елементами сторінки.
- #14 В Angular 2 реалізовано 4 типи прив’язки даних. Інтерполяція: тип прив’язки, який працює в одному напрямку (з коду в темплейт). Дуже грубо кажучи він дозволяє привязати значення якоїсь змінною до вмісту якогось HTML елемента. При цьому зміна значення змінної в коді призводить до оновлення HTML елемента Прив’язка подій: дозволяє визначити деякий метод, який є в коді компонента, як обробник події, яка стається на HTML-елементі. Такий тип працює однонаправлено – від темплейта до коду. Прив’язка властивостей: чимось схожа на інтерполяцію, проте більш специфічна. Дозволяє прив’язати властивості HTML-елемента до деякого об’єкта в коді. Працює як і інтерполяція однонаправлено – від коду до темплейта Двостороння прив’язка: найчастіше використовується для елементів вводу. Наодмінно від інших працює двонаправлено. Для прикладу, якщо в юзера є текстове поле, то зміни, які він вводить в нього, автоматично синхронізуються з кодом. І навпаки, якщо змінна, яка прив’язана до текстового поля, змінилася з коду – відображення теж міняється.
- #15 Директиви дозволяють нам розширити можливості побудови HTML. Ангулар надає наступні вбудовані директиви: ngIf – показати елементи, якщо виконується умова ngFor – показати наступне відображення для всіх елементів всередині деякої колекції ngSwitch – в залежності від значення ключа показати те чи інше відображення ngClass – застосувати клас, якщо виконуються деякі умови ngStyle – застосувати стиль, якщо виконуються деякі умови Окрім того можна і треба створювати свої кастомні директиви.
- #17 В Angular продумано використання механізму інєкції залежностей, що є дуже зручно і дозволя використовувати принцип IoC. Для реалізації DI сервіса потрібно: Створити сам сервіс і позначити його декоратором Injectable Зареєструвати сервіс в контейнері компонента Виконати механізм DI через конструктор в компоненті, який використовує сервіс
- #18 Код, який демонструє основні кроки по реєстрації і інєкції залежностей в коді.
- #19 Більше детально про комунікацію через HTTP можна почитати за посиланням на слайді. Ця тема надто широка, щоб розглянути її в межах презентації.
- #20 Документація по роутінгу все ще розробляється, тому можуть бути деякі зміни.
- #21 Angular – це великий та потужний фреймворк, який має багато можливостей. Віндповідно - описати його за одну лекцію просто не можливо. В презентації розкриті самі основні елементи фреймворка. На слайді продемонстровані базові речі, які не увійшли в цю презентацію.
- #24 Нагадування про те, що потрібно доставити пред лекціями Java і Android.