Download as PDF, PPTX
Uploaded byOntico
HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рахманов (Enaza)
Документ обсуждает использование веб-компонентов для улучшения модульности веб-приложений, предлагая интеграцию с инструментами сборки, такими как Gulp и Polymer. Он рассматривает различные подходы к подключению компонентов и оптимизации сетевых запросов с использованием таких методов, как Vulcanize. Кроме того, документ упоминает преимущества веб-компонентов в разработке, такие как возможность переиспользования логических блоков и создание стандартных элементов управления.
More Related Content
Similar to HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рахманов (Enaza)
HTML5 Web Components: следующий шаг к модульности вашего проекта / Андрей Рахманов (Enaza)
- 1. 1 HTML5 Web Components: следующийшаг к модульности вашего проекта Андрей Рахманов, Enaza
- 2.
- 3. Как мы решилипопробовать 3
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.
- 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 HTMLImports Custom Elements Shadow DOM 14
- 15. Что нам предлагаютна текущий момент? Bosonic X-Tag (Mozilla) Native Polymer (Google) 15
- 16. Мы выбрали Polymer •Декларативное описание элементов • Удобный «синтаксический сахар» над нативной реализацией 16
- 17. 17 На пороге интеграции всуществующий проект
- 18.
- 19.
- 20.
- 21.
- 22. Чего ожидает отнас Polymer <dom-module> <style> </style> <template> </template> </dom-module> <script> </script> Файл с компонентом } 22
- 23.
- 24.
- 25.
- 26. 1import == 6запросов аза ним пойдут… 26
- 27.
- 28. Можно ли ограничиться минимумомсетевых запросов? vendor.js app.js 28
- 29. Как положить всёв скрипты ??? vendor.jswebcomponents-lite.js прочие библиотеки polymer.html app.js <наши компоненты>.html ??? 29
- 30.
- 31.
- 32. 1)Требуется fix дляPolymer: 2)Требуется HTML Inject: Но реализация - неудачная 32
- 33. Что будет, еслирегистрировать веб-компонент из скрипта? 33
- 34. Результат • Такой коднеудобно поддерживать • Нерешенный вопрос с подключением polymer.html 34
- 35.
- 36.
- 37.
- 38. HTML Import сборки 38 1лишний запрос не так страшен Сборка кэшируется
- 39. Резюме • Подключение компонентовв сборки JS – нестабильное решение • Vulcanize снижает число сетевых запросов и решает проблему 39
- 40. 40 Хочется удобства: подружим Polymer,Jade, Stylus и Browserify
- 41.
- 42.
- 43.
- 44. Вот кто нампоможет! 44
- 45. GulpTask: Jade ->HTML 45
- 46. GulpTask: Stylus ->CSS 46
- 47. GulpTask: склеим 3файла в 1 47
- 48.
- 49.
- 50. Этот реестр формируетGulp 50
- 51. 51 Управление JS-зависимостями <script src="…">VS require('module')
- 52. <script src="…"> VSrequire('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.
- 56. Резюме • Web Componentsуспешно интегрируются с имеющимися инструментами • Gulp способен решить множество задач по сборке компонентов • Создание нового компонента сводится к одной строке кода для генератора 56
- 57.
- 58. Декомпозиция Single-Page App Переиспользуемыелогические блоки На высоком уровне Расширение стандартных элементов управления На низком уровне 58
- 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.
- 64. <up-textarea-count> 64 | Public API |для взаимодействия | | |
- 65.
- 66. <up-select> 66 | свойства | длябиндинга | | | | | | |
- 67.
- 68.
- 69. Переиспользуемые логические блоки <внешний блок(атрибуты…)> <внутренний блок 1 (атрибуты…)> <поле 1> <поле 2> <внутренний блок 2 (атрибуты…)> <поле 1> <поле 2> 69
- 70.
- 71.
- 72. <up-inspector> <up-inspector-list label="Позиционирование" <!– элементыуправления --> <up-inspector label="Свойства"… <!– элементы управления --> <up-inspector-list label="Отступы" <!– элементы управления --> <!– элементы управления --> 72
- 73.
- 74.
- 75. <up-sausage> <up-state-marker /> <up-sausage type="full"inner-length="200" length="400" … 75
- 76.
- 77. Резюме • Web Componentsсильны на обоих уровнях • Система превращается в набор логических блоков • Полученный результат удобно поддерживать 77
- 78. Так здорово лиработать с веб-компонентами в реальном проекте? 78
- 79.
- 80. Наиболее частые проблемы •Не все документировано • Возможны изменения API • Мало информации на stackoverflow по свежим версиям библиотек (…но это временно) 80
- 81.
- 82. Если вы начинаетепрямо сейчас и прямо с Polymer 0.5 0.9 1.0 Много готовых компонентов База API для 1.0 Обещают уже летом! 82
- 83. Производительность polyfills (меньше- лучше) https://github.com/polymerlabs/benchmarks 83
- 84.
- 85.
- 86.
- 87. Pluralsight - HTML5 WebComponent Fundamentals 87
- 88.
- 89. Резюме • Интеграция вреальный проект – уже возможна • Инструменты – активно развиваются • Библиотеки уже сегодня имеют широкие возможности • Вы получаете модульность, о которой можно только мечтать! 89
- 90. Андрей Рахманов rahmanov@enaza.ru ДмитрийЧертков chertkov@enaza.ru goo.gl/qOuhYP ПопробуйтеWeb Components Этовкусно! 80 Презентация goo.gl/McfoKL Проект UnderPage