ݺߣ

ݺߣShare a Scribd company logo

презентация вводного доклада Angular на fronttalks.ru

•
•
Ivan Gromov
Ivan Gromov

Доклад про Angular JS. Подход к написанию директив, вложенных директив, тестируемости. Конференция http://fronttalks.ru в Челябинске

1 of 15
Downloaded 15 times
AngularJS Иван Громов про Angular
 
 summer.is.gone@gmail.com
 https://github.com/summerisgone
Глоссарий • AngularJS - фреймворк, про который доклад • MVC - паттерн проектирования (интерфейсов), разделение модель - представление - контроллер • Dependency Injection - паттерн проектирования, когда один класс не знает ничего о другом, но пользуется его экземпляром • Директива - понятие AngularJS, спецразметка, определяющая (изменяющая) поведение компонента 2
Начнем с примера
HTML 4 Строчек на JS - 0 (!)
JavaScript 5
и чё?
Предварительные итоги • MVC - модель - scope, вью - html, контроллер - обычная* функция • Магический биндинг: «dirty-check», старый добрый объект • Слабое связывание: шаблоны - модели - контроллеры - зависимости • Тестируемость и модульность (Karma)
 «Мы сделали в Angular так много вещей, которые упрощают тестирование, что не оставили вам повода этого избегать» 7
Мой подход
Архитектура Дано% • Наверху Router, SPA • Большая вложенность директив с различными требованиями • Один большой DTO на входе и выходе Решение% • Иерархия директив • изоляция сверху вниз • внизу изоляцией пренебрегаю, т.к. много деталей и поведений 9 Router +
 Controller Art DTO + API Spread tabs Stripes Blocks iftext image
Вложенный DTO
 вложенные директивы
 вложенные scope • Изоляция scope - удобно разделять логику • Через require ушёл от 
 .getChildren()[0].getChildren()[3] 10
Отдельный плагин - отдельная директива • Я люблю jqueryUI • Директива - прокси + директива логика • прокси генерирует события на scope:
 size + resizable, position + draggable 11
controller
 запись в scope
 изменение DOM напрямую Dependency injection
 публичные методы для дочерних 12 link
 подписка на изменения scope
 подписка на DOM напрямую родительский API
Недостатки
Тестируемость • Из-за сильной вертикальной связанности мне приходится использовать fixtures с полным DTO для тестов • Сложно взять что-то «рядом» с деревом DTO, например, нет доступа к текущему табу • На «нижних» компонентах связано слишком много директив:
 <div class="block-inner" size resizable position position-helper draggable selectable /> 14
Спасибо за внимание Вопросы?

More Related Content

презентация вводного доклада Angular на fronttalks.ru

  • 1. AngularJS Иван Громов про Angular
 
 summer.is.gone@gmail.com
 https://github.com/summerisgone
  • 2. Глоссарий • AngularJS - фреймворк, про который доклад • MVC - паттерн проектирования (интерфейсов), разделение модель - представление - контроллер • Dependency Injection - паттерн проектирования, когда один класс не знает ничего о другом, но пользуется его экземпляром • Директива - понятие AngularJS, спецразметка, определяющая (изменяющая) поведение компонента 2
  • 7. Предварительные итоги • MVC - модель - scope, вью - html, контроллер - обычная* функция • Магический биндинг: «dirty-check», старый добрый объект • Слабое связывание: шаблоны - модели - контроллеры - зависимости • Тестируемость и модульность (Karma)
 «Мы сделали в Angular так много вещей, которые упрощают тестирование, что не оставили вам повода этого избегать» 7
  • 9. Архитектура Дано% • Наверху Router, SPA • Большая вложенность директив с различными требованиями • Один большой DTO на входе и выходе Решение% • Иерархия директив • изоляция сверху вниз • внизу изоляцией пренебрегаю, т.к. много деталей и поведений 9 Router +
 Controller Art DTO + API Spread tabs Stripes Blocks iftext image
  • 10. Вложенный DTO
 вложенные директивы
 вложенные scope • Изоляция scope - удобно разделять логику • Через require ушёл от 
 .getChildren()[0].getChildren()[3] 10
  • 11. Отдельный плагин - отдельная директива • Я люблю jqueryUI • Директива - прокси + директива логика • прокси генерирует события на scope:
 size + resizable, position + draggable 11
  • 12. controller
 запись в scope
 изменение DOM напрямую Dependency injection
 публичные методы для дочерних 12 link
 подписка на изменения scope
 подписка на DOM напрямую родительский API
  • 14. Тестируемость • Из-за сильной вертикальной связанности мне приходится использовать fixtures с полным DTO для тестов • Сложно взять что-то «рядом» с деревом DTO, например, нет доступа к текущему табу • На «нижних» компонентах связано слишком много директив:
 <div class="block-inner" size resizable position position-helper draggable selectable /> 14