На сегодняшний день frontend-технологии - одна из наиболее динамично развивающихся отраслей информационных технологий. Появилось множество реализаций известных шаблонов проектирования, написаны тысячи строк Javascript-кода и потрачены сотни часов на stackoverflow для понимания работы этого самого кода. Несмотря на различные подходы, все эти инструменты служат нескольким важным принципам: снижению сложности, улучшению модульности и архитектуры в целом. HTML5 Web Components стандартизируют эти идеи, прошедшие через огонь, воду и тяжелые Javascript-фреймворки. Мы поделимся опытом внедрения Web Components в проект с объемной single-page логикой, расскажем, как удобнее работать с веб-компонентами, принимая во внимание текущее состояние реализации, а также дадим советы, где постелить соломы при вашем собственном старте работы с веб-компонентами. Основные моменты доклада: — Для каких проектов Web Components будут полезны в первую очередь; — Действительно ли Web Components настолько удобны? Примеры “до” и “после”; — Текущие проблемы реализации в браузерах и их решение; — Как быть с текущими фреймворками и шаблонизаторами: что можно подружить, а от чего проще отказаться; — Как начать интегрировать Web Components в текущее решение и на какие стороны вашего проекта обратить особое внимание.

1. 1
HTML5 Web Components:
следующий шаг к модульности
вашего проекта
Андрей Рахманов, Enaza

2. 2

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

4. Single-Page App
4

5. 5

6. 6

7. Код победил!
7

8. 8
Google I/O 2014

9. Google I/O 2014
<google-map></google-map>
9

10. 10

11. Поиск подходящего решения
• Плохо сочетать Backbone.js с другими
фреймворками
• Надо использовать native-реализацию или
библиотеку
11

12. Составные частиWeb Components
• Templates
• HTML Imports
• Custom Elements
• Shadow DOM
12

13. Native: Пока весьма печально…
Templates
HTML Imports
Custom Elements
Shadow DOM
13

14. Polyfills: Уже лучше!
Templates
HTML Imports
Custom Elements
Shadow DOM
14

15. Что нам предлагают на текущий
момент?
Bosonic
X-Tag (Mozilla)
Native
Polymer (Google)
15

16. Мы выбрали Polymer
• Декларативное описание элементов
• Удобный «синтаксический сахар» над нативной
реализацией
16

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

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

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

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

21. Как делаем мы
21

22. Чего ожидает от нас Polymer
<dom-module>
<style>
</style>
<template>
</template>
</dom-module>
<script>
</script>
Файл с компонентом
}
22

23. Подключаем один компонент
my-component
23

24. Подключаем один компонент
my-component
level_1_1
polymer.html
24

25. Подключаем один компонент
my-component
level_2_1
level_2_2
level_2_3
level_1_1
polymer.html
25

26. 1import == 6запросов
а за ним пойдут…
26

27. Out-of-box: PolymerVulcanize
27
Реализация:
Использование:

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

29. Как положить всё в скрипты
???
vendor.jswebcomponents-lite.js
прочие библиотеки
polymer.html
app.js
<наши компоненты>.html
???
29

30. Очевидное решение:
BrowserifyTransform (polymerize)
30

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

32. 1)Требуется fix для Polymer:
2)Требуется HTML Inject:
Но реализация - неудачная
32

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

34. Результат
• Такой код неудобно поддерживать
• Нерешенный вопрос с подключением
polymer.html
34

35. Итак,Vulcanize
polymer.html
component_1.html
component_2.html component_3.html
styles.css
script.js
35

36. Варианты подключения
36
components.html
?
index.html

37. Внедрение в index.html
37
Меньше
запросов
Сборка
не кэшируется

38. HTML Import сборки
38
1 лишний запрос
не так страшен
Сборка
кэшируется

39. Резюме
• Подключение компонентов в сборки JS –
нестабильное решение
• Vulcanize снижает число сетевых запросов и
решает проблему
39

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

41. 41

42. 42
vulcanize

43. 43
? vulcanize

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

45. GulpTask: Jade -> HTML
45

46. GulpTask: Stylus -> CSS
46

47. GulpTask: склеим 3 файла в 1
47

48. 48
first.html
second.html
third.html

49. 49
first.html
second.html
third.html
vulcanize
register_components.html
html imports:
first.html
second.html
third.html

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

51. 51
Управление JS-зависимостями
<script src="…"> VS require('module')

52. <script src="…"> VS require('module')
• Одного JS-файла в компоненте не хватает
• Почему не использовать <script src="…">?
CommonJS удобнее!
• Polymer не поддерживает CommonJS.
Как собрать самим?
52

53. * jQuery *
* plugins *
* lodash *
* Backbone *
vendor.js
expose external
app.js
external
components.html
main.js
module_1.js
* jQuery *
не дублируется
53

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

55. 55

56. Резюме
• Web Components успешно интегрируются с
имеющимися инструментами
• Gulp способен решить множество задач
по сборке компонентов
• Создание нового компонента сводится к одной
строке кода для генератора
56

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

58. Декомпозиция Single-Page App
Переиспользуемые логические блоки
На высоком уровне
Расширение стандартных элементов управления
На низком уровне
58

59. 59
Низкий уровень
Расширение стандартных
элементов управления

60. Расширение стандартных
элементов управления
• <input is="up-autoresizable" />
- автоподстройка длины
• <input is="up-colorpicker" />
- выбор цвета с альфа-каналом
- указание цвета числом
• <up-textarea-count></..>
- подсчет числа оставшихся символов
• <up-select></..>
- иерархия
- запрещенные значения в списке
60

61. <input is="up-autoresizable"/>
| наследование
| от input
| подключение
| плагина
| отключение
| плагина
61
| зависимости через
| Browserify

62. <input is="up-colorpicker"/>
62
| наследование
| от input
| кастомное
| событие

63. 63

64. <up-textarea-count>
64
| Public API
| для взаимодействия
|
|
|

65. 65

66. <up-select>
66
| свойства
| для биндинга
|
|
|
|
|
|
|

67. 67

68. 68
Высокий уровень
Переиспользуемые
логические блоки

69. Переиспользуемые логические
блоки
<внешний блок (атрибуты…)>
<внутренний блок 1 (атрибуты…)>
<поле 1>
<поле 2>
<внутренний блок 2 (атрибуты…)>
<поле 1>
<поле 2>
69

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

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

72. <up-inspector>
<up-inspector-list label="Позиционирование"
<!– элементы управления -->
<up-inspector label="Свойства"…
<!– элементы управления -->
<up-inspector-list label="Отступы"
<!– элементы управления -->
<!– элементы управления -->
72

73. 73

74. 74

75. <up-sausage>
<up-state-marker />
<up-sausage type="full" inner-length="200" length="400" …
75

76. 76

77. Резюме
• Web Components сильны на обоих уровнях
• Система превращается в набор
логических блоков
• Полученный результат удобно поддерживать
77

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

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

80. Наиболее частые проблемы
• Не все документировано
• Возможны изменения API
• Мало информации на stackoverflow
по свежим версиям библиотек
(…но это временно)
80

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

82. Если вы начинаете прямо сейчас
и прямо с Polymer
0.5
0.9
1.0
Много готовых компонентов
База API для 1.0
Обещают уже летом!
82

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

84. webcomponents.org
84

85. customelements.io
85

86. component.kitchen
86

87. Pluralsight - HTML5
Web Component Fundamentals
87

88. polymer-project.org
88

89. Резюме
• Интеграция в реальный проект – уже возможна
• Инструменты – активно развиваются
• Библиотеки уже сегодня имеют широкие
возможности
• Вы получаете модульность, о которой можно
только мечтать!
89

90. Андрей Рахманов
rahmanov@enaza.ru
ДмитрийЧертков
chertkov@enaza.ru
goo.gl/qOuhYP
ПопробуйтеWeb Components
Это вкусно! 80
Презентация
goo.gl/McfoKL
Проект UnderPage