«Компонентная верстка с AngularJS», Андрей Яманов (CTO TeamHunt)

Компонентная верстка с 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

angular@1.5.0 и выше

Создание компонента

module.directive()

* до angular@1.5.0

Создание компонента

module.component()

block.js

app.js

Наследование компонентов

• Object.assign()

• class “extends”

Верстка

BEMкак методология

верстки

Минусы БЭМ

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

Block As Component

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

block.html

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

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

angular-bem

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

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