«Компонентная верстка с angularjs», Андрей Яманов (cto teamhunt)
TRANSCRIPT
Компонентная верстка с AngularJS
MoscowJS 28
Докладчик: Яманов Андрейhttp://tenphi.me
Проекты
TeamHunt.co TweetWorthy.co Quotable.TipsBeta Beta
Содержание
• Angular-компоненты
• Верстка• Стили
Поиск “идеальной” методологии для
компонентов
Плоская структура компонентов
Angular-компоненты
directive component
Особенностиmodule.component()
• Вся логика реализована через controller.• Можно привязать только к элементу.• Scope всегда изолирован.
https://docs.angularjs.org/guide/component
[email protected] и выше
Создание компонента
module.component()
block.js
app.js
Наследование компонентов
• Object.assign()
• class “extends”
Верстка
BEMкак методология
верстки
Минусы БЭМ
• Строгие правила для определения стилей;• Почти нет ограничений для верстки;• Значения модификаторов возможно излишни.
Block As Component
• Компонентный подход в вёрстке;• Контекстные селекторы;• Значений модификаторов нет.
block.html
Темная сторона силы
Темная сторона силы
angular-bemи компоненты
• Генерация классов BEM на основе атрибутов;
• Установка модификаторов по состоянию компонента;
• Не замедляет компиляцию шаблона.
DDOreplace: false
* compiled
Наследованиеhttp://learnjade.com/tour/template-inheritance/
На примере Jade:
base.jade
child.jade
Стили
Стили для компонента
Используем LESS
Селектор с контекстом
Наследование
Используем переменные!
Используем переменные!
Вместо вывода
–Разработчик с большим и грустным опытом
“Никакая документация, методология или устоявшаяся практика не
избавляет разработчика от необходимости думать.”
Спасибо за внимание!
Вопросы?
Инструменты:http://bit.ly/1WItKwI
GitHub:https://github.com/tenphi