1

HTML5 Web Components: следующий шаг к модульности вашего проекта

Андрей Рахманов, Enaza

2

Как мы решили попробовать

3

Single-Page App

4

5

6

Код победил!

7

8

Google I/O 2014

Google I/O 2014

<google-map></google-map>

9

10

Поиск подходящего решения

• Плохо сочетать Backbone.js с другими фреймворками

• Надо использовать native-реализацию или библиотеку

11

Составные части Web Components

• Templates

• HTML Imports

• Custom Elements

• Shadow DOM

12

Native: Пока весьма печально…

Templates

HTML Imports

Custom Elements

Shadow DOM

13

Polyfills: Уже лучше!

Templates

HTML Imports

Custom Elements

Shadow DOM

14

Что нам предлагают на текущий момент?

Bosonic

X-Tag (Mozilla)

Native

Polymer (Google)

15

Мы выбрали Polymer

• Декларативное описание элементов

• Удобный «синтаксический сахар» над нативнойреализацией

16

17

На пороге интеграции в существующий проект

Стек технологий

18

Стек технологий

19

Стек технологий

20

Как делаем мы

21

Чего ожидает от нас Polymer

<dom-module>

<style>

</style>

<template>

</template>

</dom-module>

<script>

</script>

Файл с компонентом

}

22

Подключаем один компонент

my-component

23

Подключаем один компонент

my-component

level_1_1

polymer.html

24

Подключаем один компонент

my-component

level_2_1

level_2_2

level_2_3

level_1_1

polymer.html

25

1 import == 6 запросов

а за ним пойдут…

26

Out-of-box: Polymer Vulcanize

27

Реализация:

Использование:

Можно ли ограничиться минимумом сетевых запросов?

vendor.js

app.js

28

Как положить всё в скрипты

???

vendor.jswebcomponents-lite.js

прочие библиотеки

polymer.html

app.js

<наши компоненты>.html

???29

Очевидное решение:Browserify Transform (polymerize)

30

Использовать - удобно

31

1) Требуется fix для Polymer:

2) Требуется HTML Inject:

Но реализация - неудачная

32

Что будет, если регистрировать веб-компонент из скрипта?

33

Результат

• Такой код неудобно поддерживать

• Нерешенный вопрос с подключением polymer.html

34

Итак, Vulcanize

polymer.html

component_1.html

component_2.html component_3.html

styles.css

script.js

35

Варианты подключения

36

components.html

?index.html

Внедрение в index.html

37

Меньше запросов

Сборкане кэшируется

HTML Import сборки

38

1 лишний запросне так страшен

Сборкакэшируется

Резюме

• Подключение компонентов в сборки JS –нестабильное решение

• Vulcanize снижает число сетевых запросов и решает проблему

39

40

Хочется удобства: подружим Polymer, Jade,

Stylus и Browserify

41

42

vulcanize

43

? vulcanize

Вот кто нам поможет!44

Gulp Task: Jade -> HTML

45

Gulp Task: Stylus -> CSS

46

Gulp Task: склеим 3 файла в 1

47

48

first.html

second.html

third.html

49

first.html

second.html

third.html

vulcanize

register_components.html

html imports:

first.htmlsecond.htmlthird.html

Этот реестр формирует Gulp

50

51

Управление JS-зависимостями

<script src="…"> VS require('module')

<script src="…"> VS require('module')

• Одного JS-файла в компоненте не хватает

• Почему не использовать <script src="…">?CommonJS удобнее!

• Polymer не поддерживает CommonJS.Как собрать самим?

52

* jQuery *

* plugins *

* lodash *

* Backbone *

vendor.js

expose external

app.js

external

components.htmlmain.js

module_1.js

* jQuery *не дублируется

53

Как сделать так, чтобы компоненты писались сами?

54

55

Резюме

• Web Components успешно интегрируются с имеющимися инструментами

• Gulp способен решить множество задач по сборке компонентов

• Создание нового компонента сводится к одной строке кода для генератора

56

57

Где применитьвеб-компоненты?

Декомпозиция Single-Page App

Переиспользуемые логические блоки

На высоком уровне

Расширение стандартных элементов управления

На низком уровне

58

59

Низкий уровень

Расширение стандартных элементов управления

Расширение стандартных элементов управления

• <input is="up-autoresizable" />- автоподстройка длины

• <input is="up-colorpicker" />- выбор цвета с альфа-каналом- указание цвета числом

• <up-textarea-count></..>- подсчет числа оставшихся символов

• <up-select></..>- иерархия- запрещенные значения в списке

60

<input is="up-autoresizable"/>

| наследование | от input

| подключение | плагина

| отключение | плагина

61

| зависимости через | Browserify

<input is="up-colorpicker"/>

62

| наследование | от input

| кастомное| событие

63

<up-textarea-count>

64

| Public API | для взаимодействия|||

65

<up-select>

66

| свойства| для биндинга|||||||

67

68

Высокий уровень

Переиспользуемыелогические блоки

Переиспользуемые логические блоки

<внешний блок (атрибуты…)>

<внутренний блок 1 (атрибуты…)>

<поле 1>

<поле 2>

<внутренний блок 2 (атрибуты…)>

<поле 1>

<поле 2>

69

Полигон для испытаний70

Полигон для испытаний71

<up-inspector>

<up-inspector-list label="Позиционирование"

<!– элементы управления -->

<up-inspector label="Свойства"…

<!– элементы управления -->

<up-inspector-list label="Отступы"

<!– элементы управления -->

<!– элементы управления -->

72

73

74

<up-sausage>

<up-state-marker />

<up-sausage type="full" inner-length="200" length="400" …

75

76

Резюме

• Web Components сильны на обоих уровнях

• Система превращается в набор логических блоков

• Полученный результат удобно поддерживать

77

Так здорово ли работать с веб-компонентами в реальном проекте?

78

79

Определенно, ДА!

Наиболее частые проблемы

• Не все документировано

• Возможны изменения API

• Мало информации на stackoverflowпо свежим версиям библиотек (…но это временно)

80

81

Перспективы развития

Если вы начинаете прямо сейчас и прямо с Polymer

0.5

0.9

1.0

Много готовых компонентов

База API для 1.0

Обещают уже летом!

82

Производительность polyfills (меньше - лучше)https://github.com/polymerlabs/benchmarks

83

webcomponents.org

84

customelements.io

85

component.kitchen

86

Pluralsight - HTML5 Web Component Fundamentals

87

polymer-project.org

88

Резюме

• Интеграция в реальный проект – уже возможна

• Инструменты – активно развиваются

• Библиотеки уже сегодня имеют широкие возможности

• Вы получаете модульность, о которой можно только мечтать!

89

Андрей Рахмановrahmanov@enaza.ru

Дмитрий Чертковchertkov@enaza.ru

goo.gl/qOuhYP

Попробуйте Web Components.Это вкусно!

90