Компонентный веб сегодня: обзор готовых библиотек

Владимир Гриненко, Яндекс

О себе

3

О себе

〉4 года в Яндексе

3

О себе

〉4 года в Яндексе

〉разрабатываю библиотеки готовых компонент

3

Обсудим

4

Обсудим

〉Преимущества компонентного подхода

4

Обсудим

〉Преимущества компонентного подхода

〉Существующие предложения на рынке

4

Обсудим

〉Преимущества компонентного подхода

〉Существующие предложения на рынке

〉Как сделать выбор

4

Преимущества компонентного подхода

Преимущества компонентного подхода

6

Преимущества компонентного подхода

〉Разделение сложности

6

Преимущества компонентного подхода

〉Разделение сложности

〉Легко поддерживать

6

Преимущества компонентного подхода

〉Разделение сложности

〉Легко поддерживать

〉Легко писать юнит-тесты

6

Преимущества компонентного подхода

〉Разделение сложности

〉Легко поддерживать

〉Легко писать юнит-тесты

〉Легко использовать повторно

6

Существующие предложения на рынке

Over 9000

9

getbootstrap.com

10

Альтернативы

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

Аналоги для тач-устройств

〉goratchet.com

12

Аналоги для тач-устройств

〉goratchet.com

〉appgyver.com

12

jqueryui.com

13

jquerymobile.com

14

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

tadatuta@yandex-team.ru