Recommended
Recommended
More Related Content
Similar to HTML5 Web Components: следующий шаг к модульности вашего проекта
Similar to HTML5 Web Components: следующий шаг к модульности вашего проекта (20)
HTML5 Web Components: следующий шаг к модульности вашего проекта
- 1. 1 HTML5 Web Components: следующий шаг к модульности вашего проекта Андрей Рахманов, Enaza
- 2. 2
- 3. Как мы решили попробовать 3
- 5. 5
- 6. 6
- 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 На пороге интеграции в существующий проект
- 21. Как делаем мы 21
- 22. Чего ожидает от нас Polymer <dom-module> <style> </style> <template> </template> </dom-module> <script> </script> Файл с компонентом } 22
- 26. 1import == 6запросов а за ним пойдут… 26
- 28. Можно ли ограничиться минимумом сетевых запросов? vendor.js app.js 28
- 29. Как положить всё в скрипты ??? vendor.jswebcomponents-lite.js прочие библиотеки polymer.html app.js <наши компоненты>.html ??? 29
- 32. 1)Требуется fix для Polymer: 2)Требуется HTML Inject: Но реализация - неудачная 32
- 33. Что будет, если регистрировать веб-компонент из скрипта? 33
- 34. Результат • Такой код неудобно поддерживать • Нерешенный вопрос с подключением polymer.html 34
- 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
- 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
- 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
- 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
- 80. Наиболее частые проблемы • Не все документировано • Возможны изменения API • Мало информации на stackoverflow по свежим версиям библиотек (…но это временно) 80
- 82. Если вы начинаете прямо сейчас и прямо с Polymer 0.5 0.9 1.0 Много готовых компонентов База API для 1.0 Обещают уже летом! 82
- 83. Производительность polyfills (меньше - лучше) https://github.com/polymerlabs/benchmarks 83
- 87. Pluralsight - HTML5 Web Component Fundamentals 87
- 89. Резюме • Интеграция в реальный проект – уже возможна • Инструменты – активно развиваются • Библиотеки уже сегодня имеют широкие возможности • Вы получаете модульность, о которой можно только мечтать! 89