Embed Size (px)
DESCRIPTION
Компонентный веб сегодня: обзор готовых библиотек Рассмотрим преимущества компонентного подхода к веб-разработке и основные библиотеки готовых решений, доступных на рынке на сегодняшний день. Владимир Гриненко, Яндекс Разработчик интерфейсов в симферопольском офисе Яндекса. Занимается вёрсткой и JS-программированием. Поддерживает сайт bem.info и с удовольствием отвечает на вопросы разработчиков про БЭМ. Вне Яндекса не один год разрабатывал сайты и консультировал команды различного уровня.
Citation preview
Компонентный веб сегодня: обзор готовых библиотек
Владимир Гриненко, Яндекс
О себе
3
О себе
〉4 года в Яндексе
3
О себе
〉4 года в Яндексе
〉разрабатываю библиотеки готовых компонент
3
Обсудим
4
Обсудим
〉Преимущества компонентного подхода
4
Обсудим
〉Преимущества компонентного подхода
〉Существующие предложения на рынке
4
Обсудим
〉Преимущества компонентного подхода
〉Существующие предложения на рынке
〉Как сделать выбор
4
Преимущества компонентного подхода
Преимущества компонентного подхода
6
Преимущества компонентного подхода
〉Разделение сложности
6
Преимущества компонентного подхода
〉Разделение сложности
〉Легко поддерживать
6
Преимущества компонентного подхода
〉Разделение сложности
〉Легко поддерживать
〉Легко писать юнит-тесты
6
Преимущества компонентного подхода
〉Разделение сложности
〉Легко поддерживать
〉Легко писать юнит-тесты
〉Легко использовать повторно
6
Существующие предложения на рынке
Over 9000
9
Альтернативы
11
Альтернативы
〉foundation.zurb.com
11
Альтернативы
〉foundation.zurb.com
〉getskeleton.com
11
Альтернативы
〉foundation.zurb.com
〉getskeleton.com
〉semantic-ui.com
11
Альтернативы
〉foundation.zurb.com
〉getskeleton.com
〉semantic-ui.com
〉purecss.io
11
Аналоги для тач-устройств
12
MOAR!
15
MOAR!
〉sencha ext-js
15
MOAR!
〉sencha ext-js
〉dojo
15
MOAR!
〉sencha ext-js
〉dojo
〉bem-components
15
WebComponents
16
WebComponents
17
WebComponents
〉Custom Elements
17
WebComponents
〉Custom Elements
〉Shadow DOM
17
WebComponents
〉Custom Elements
〉Shadow DOM
〉HTML Templates
17
WebComponents
〉Custom Elements
〉Shadow DOM
〉HTML Templates
〉HTML Imports
17
WebComponents
〉Custom Elements
〉Shadow DOM
〉HTML Templates
〉HTML Imports
〉Scoped CSS
17
WebComponents
〉Custom Elements
〉Shadow DOM
〉HTML Templates
〉HTML Imports
〉Scoped CSS
〉Template Binding
17
Поддержка в браузерах
18
polymer
19
x-tags + brick
20
Веб-компоненты без WebComponents
21
Веб-компоненты без WebComponents
〉Custom Elements — компонентные движки
21
Веб-компоненты без WebComponents
〉Custom Elements — компонентные движки
〉Shadow DOM — BEM
21
Веб-компоненты без WebComponents
〉Custom Elements — компонентные движки
〉Shadow DOM — BEM
〉HTML Templates — шаблонизаторы
21
Веб-компоненты без WebComponents
〉Custom Elements — компонентные движки
〉Shadow DOM — BEM
〉HTML Templates — шаблонизаторы
〉HTML Imports — сборка
21
Веб-компоненты без WebComponents
〉Custom Elements — компонентные движки
〉Shadow DOM — BEM
〉HTML Templates — шаблонизаторы
〉HTML Imports — сборка
〉Scoped CSS — BEM или OOCSS
21
Веб-компоненты без WebComponents
〉Custom Elements — компонентные движки
〉Shadow DOM — BEM
〉HTML Templates — шаблонизаторы
〉HTML Imports — сборка
〉Scoped CSS — BEM или OOCSS
〉Template Binding — Data binding
21
Как сделать выбор
Классификация
23
Классификация
〉движки
23
Классификация
〉движки
〉количество готовых компонент
23
Классификация
〉движки
〉количество готовых компонент
〉простота кастомизации
23
Классификация
〉движки
〉количество готовых компонент
〉простота кастомизации
〉поддержка адаптивности
23
Классификация
〉движки
〉количество готовых компонент
〉простота кастомизации
〉поддержка адаптивности
〉смена тем
23
Классификация
〉движки
〉количество готовых компонент
〉простота кастомизации
〉поддержка адаптивности
〉смена тем
〉сложность интеграции
23
Выбирайте! Используйте!
25
Владимир Гриненко
Руководитель службы разработки БЭМ
Контакты
@tadatuta
i.tadatuta
+7 (978) 096 88 87
