Доклад Дениса Иогансена на MoscowJS. "Веб-компоненты — будущее или настоящее?"

1. Веб-компоненты -будущее
или настоящее?
Денис Иогансен,MoscowJS 20

5. Веб-компоненты

6. Спецификации
— HTML Import - внешний html документ
— <template> - инертный DOM фрагмент (заготовка)
— Custom elements - собственный элемент (тег)
— Shadow DOM - скрытое дерево элемента
6

7. HTML Import
<link rel="import" href="component.html">01.
7

8. До <template>
<div hidden id="logo-temp">
<img class="logo" src="badoo.3.png">
</div>
<script type="text/template" id="logo-temp">
<img class="logo" src="badoo.3.png">
</script>
01.
02.
03.
01.
02.
03.
8

9. <template>
<template id="logo-temp">
<img class="logo" src="badoo.3.png">
</template>
var temp = document.querySelector('#logo-temp');
var clone = temp.content.cloneNode(true);
document.body.appendChild(clone);
01.
02.
03.
01.
02.
03.
9

10. Custom elements
— Собственная логика
— Доступны события жизненного цикла
— Создание элемента
— Вставка в документ
— Удаление из документа
— Изменение атрибутов элемента
— Имя элемента должно содержать дефис
10

11. Custom elements
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
this.innerHTML = 'Уже зарегистрированы?';
};
document.registerElement('join-blk', {prototype: proto});
<join-blk></join-blk>
01.
02.
03.
04.
05.
01.
11

12. Shadow DOM

13. Shadow DOM
<button id="btn">Светлая сторона</button>
var shadowHost = document.querySelector('#btn');
var shadowRoot = shadowHost.createShadowRoot();
shadowRoot.textContent = 'Темная сторона';
Темная сторона btn.textContent; // Светлая сторона
01.
01.
02.
03.
13

14. Всё вместе

15. Создаем join-blk.html
<template id="temp">
<div>Уже зарегистрированы? <content></content></div>
</template>
var temp = document.querySelector('#temp');
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
var shadow = this.createShadowRoot();
shadow.appendChild(temp.content.cloneNode(true));
};
document.registerElement('join-blk', {prototype: proto});
01.
02.
03.
01.
02.
03.
04.
05.
06.
07.
15

16. Использование
<link rel="import" href="join-blk.html">
<join-blk><button>Да</button></join-blk>
<join-blk><button>Нет</button></join-blk>
Уже зарегистрированы? Да
Уже зарегистрированы? Нет
01.
02.
03.
16

17. Приемущества
— Сложное разделяется на простые части
— Улучшается семантика
— Легко поддерживать / дорабатывать
— Легко тестировать
— Легко переиспользовать
— component.kitchen и customelements.io
17

18. Текущая поддержка
Браузеры * IE Chrome Firefox Safari Android IOS
* последние версии
HTML Imports - + f - + -
<template> - + + + + +
Custom elements - + f - + -
Shadow DOM - + f - + -
18

19. webcomponent.js
Браузеры * IE Chrome Firefox Safari Android IOS
* последние версии
HTML Imports + + + + + +
<template> + + + + + +
Custom elements + + + + + +
Shadow DOM + + + + + +
19

20. Ложка дегтя -Shadow DOM
— Медленный
— Сложные проекции
— Проблемы с событиями
— Часто переписывается *
* черновик на github
20

21. Shadow DOM

22. Polymer

23. Polymer 0.8
— Новая версия (полностью переписана)
— Увеличена производительность
— Возможность выбора уровня функциональности
— polymer-micro, polymer-mini, polymer
— Уменьшен размер ( 350 (130) kb -> 85 kb)
— Ожидаемый выход production release 1.0- 2 квартал 2015
23

24. 24

25. Базовый синтаксический сахар
Polymer({
is: 'join-blk',
created: function() {
this.innerHTML = 'Уже зарегистрированы?';
}
});
<join-blk></join-blk>
01.
02.
03.
04.
05.
06.
01.
25

26. Наследование от нативных элементов
Polymer({
is: 'join-input',
extends: 'input'
});
<join-input></join-input>
01.
02.
03.
04.
01.
26

27. Конвертация атрибутов к свойствам
Polymer({
is: 'join-blk',
properties: {
userName: String,
}
});
<join-blk user-name="Denis"></join-blk>
01.
02.
03.
04.
05.
06.
01.
27

28. Работа с шаблонами
<dom-module id="join-blk">
<template><div>Уже зарегистрированы?</div></template>
</dom-module>
Polymer({
is: 'join-blk'
});
01.
02.
03.
01.
02.
03.
28

29. Изолированое оформление (scoped css)
<dom-module id="join-blk">
<style> div { color: red; } </style>
<template><div>Уже зарегистрированы?</div></template>
</dom-module>
Polymer({
is: 'join-blk'
});
01.
02.
03.
04.
01.
02.
03.
29

30. Обработка событий
Polymer({
is: 'join-blk',
listeners: {
'click': 'handleClick'
},
handleClick: function(e) {
alert("Вы не зарегистрированы!");
} });
01.
02.
03.
04.
05.
06.
07.
08.
30

31. Установка через атрибуты
<dom-module id="join-blk"><template>
<button on-click="handleClick">Войти</button>
</template></dom-module>
Polymer({
is: 'join-blk',
handleClick: function(e) {
alert("Вы не зарегистрированы!");
} });
01.
02.
03.
01.
02.
03.
04.
05.
31

32. Отслеживание изменения свойств
Polymer({
is: 'join-blk',
properties: { preload: Boolean, src: String },
observers: {
'preload src': 'updateImage'
},
updateImage: function( preload, src ){ что-то делаем }
});
01.
02.
03.
04.
05.
06.
07.
08.
32

33. Декларативный дата биндинг
<dom-module id="join-blk"><template>
<p>С возвращением, <span>{{user.name}}</span>!</p>
</template></dom-module>
Polymer({
is: 'join-blk',
properties: { user: { type: Object,
value: { name: 'Денис' }
} } });
01.
02.
03.
01.
02.
03.
04.
05.
33

34. А так же:
— Собственный API для работы с DOM
— Обновление внешних атрибутов
— Вычисляемые свойства
— Вспомогательные элементы *
— Собственные css свойства *
* эксперементальные
34

35. Что еще?
— Библиотека базовых компонент
— Библиотека компонент в стиле Material Design
— Визуальный редактор
35

36. Заключение

38. Заключение
— Уже используют Github, Salesforce, NewsCorp ...
— Скоро будут Youtube, QuickOffice, GoogleMusic ...
— Много примеров: PolymerMail, Topeka, SantaTracker ...
— Веб-компоненты - это уже настоящее!
38

39. Вопросы?
Денис Иогансен
— twitter: @pofigizm
— pofigizm@gmail.com
— Презентация - ow.ly/KOchC
— Веб-компоненты - ow.ly/KOd6Q
— Polymer 0.8 - ow.ly/KOcSg
39