Доклад Андрея Яманова на MoscowJS 28 посвящен компонентной верстке с использованием AngularJS, включая обсуждение Angular-компонентов и методологии BEM. Обсуждаются преимущества и недостатки BEM, а также создание компонентов в AngularJS с помощью директив и наследования. Доклад также охватывает стили и использование инструментов для работы с компонентами.

1. Компонентная верстка
с AngularJS
MoscowJS 28
Докладчик:
Яманов Андрей
http://tenphi.me

2. Проекты
2
TeamHunt.co TweetWorthy.co Quotable.Tips
Beta Beta

3. Содержание
• Angular-компоненты
• Верстка
• Стили
3

4. 4
Поиск “идеальной”
методологии для
компонентов

5. Плоская структура
компонентов
5

6. Angular-компоненты
6

7. directive component
7

8. Особенности
module.component()
8
• Вся логика реализована через controller.
• Можно привязать только к элементу.
• Scope всегда изолирован.
https://docs.angularjs.org/guide/component
angular@1.5.0 и выше

9. Создание компонента
9
module.directive()
* до angular@1.5.0

10. Создание компонента
10
module.component()

11. 11
block.js

12. 12
app.js

13. Наследование
компонентов
13
• Object.assign()
• class “extends”

14. 14
Верстка

15. BEM
как методология
верстки
15

16. Минусы БЭМ
16
• Строгие правила для определения стилей;
• Почти нет ограничений для верстки;
• Значения модификаторов возможно излишни.

17. Block As Component
17
• Компонентный подход в вёрстке;
• Контекстные селекторы;
• Значений модификаторов нет.

18. 18
block.html

19. Темная сторона силы
19

20. Темная сторона силы
20

21. angular-bem
21
https://github.com/tenphi/angular-bem

22. angular-bem
и компоненты
22
• Генерация классов BEM на основе
атрибутов;
• Установка модификаторов по
состоянию компонента;
• Не замедляет компиляцию
шаблона.

23. DDO
replace: false
23
* compiled

24. Наследование
24
http://learnjade.com/tour/template-inheritance/
На примере Jade:
base.jade
child.jade

25. 25
Стили

26. Стили для компонента
26

27. Используем LESS
27

28. Селектор с контекстом
28

29. Наследование
29

30. Используем
переменные!
30

31. Используем
переменные!
31

32. Вместо вывода
32

33. –Разработчик с большим и грустным опытом
“Никакая документация, методология или
устоявшаяся практика не избавляет
разработчика от необходимости думать.”
33

34. 34
Спасибо за внимание!
Вопросы?
Инструменты:
http://bit.ly/1WItKwI
GitHub:
https://github.com/tenphi