Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

310 views

Published on

На сегодняшний день frontend-технологии - одна из наиболее динамично развивающихся отраслей информационных технологий. Появилось множество реализаций известных шаблонов проектирования, написаны тысячи строк Javascript-кода и потрачены сотни часов на stackoverflow для понимания работы этого самого кода. Несмотря на различные подходы, все эти инструменты служат нескольким важным принципам: снижению сложности, улучшению модульности и архитектуры в целом.

HTML5 Web Components стандартизируют эти идеи, прошедшие через огонь, воду и тяжелые Javascript-фреймворки. Мы поделимся опытом внедрения Web Components в проект с объемной single-page логикой, расскажем, как удобнее работать с веб-компонентами, принимая во внимание текущее состояние реализации, а также дадим советы, где постелить соломы при вашем собственном старте работы с веб-компонентами.

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

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

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

  1. 1. 1 HTML5 Web Components: следующий шаг к модульности вашего проекта Андрей Рахманов, Enaza
  2. 2. 2
  3. 3. Как мы решили попробовать 3
  4. 4. Single-Page App 4
  5. 5. 5
  6. 6. 6
  7. 7. Код победил! 7
  8. 8. 8 Google I/O 2014
  9. 9. Google I/O 2014 <google-map></google-map> 9
  10. 10. 10
  11. 11. Поиск подходящего решения • Плохо сочетать Backbone.js с другими фреймворками • Надо использовать native-реализацию или библиотеку 11
  12. 12. Составные частиWeb Components • Templates • HTML Imports • Custom Elements • Shadow DOM 12
  13. 13. Native: Пока весьма печально… Templates HTML Imports Custom Elements Shadow DOM 13
  14. 14. Polyfills: Уже лучше! Templates HTML Imports Custom Elements Shadow DOM 14
  15. 15. Что нам предлагают на текущий момент? Bosonic X-Tag (Mozilla) Native Polymer (Google) 15
  16. 16. Мы выбрали Polymer • Декларативное описание элементов • Удобный «синтаксический сахар» над нативной реализацией 16
  17. 17. 17 На пороге интеграции в существующий проект
  18. 18. Стек технологий 18
  19. 19. Стек технологий 19
  20. 20. Стек технологий 20
  21. 21. Как делаем мы 21
  22. 22. Чего ожидает от нас Polymer <dom-module> <style> </style> <template> </template> </dom-module> <script> </script> Файл с компонентом } 22
  23. 23. Подключаем один компонент my-component 23
  24. 24. Подключаем один компонент my-component level_1_1 polymer.html 24
  25. 25. Подключаем один компонент my-component level_2_1 level_2_2 level_2_3 level_1_1 polymer.html 25
  26. 26. 1import == 6запросов а за ним пойдут… 26
  27. 27. Out-of-box: PolymerVulcanize 27 Реализация: Использование:
  28. 28. Можно ли ограничиться минимумом сетевых запросов? vendor.js app.js 28
  29. 29. Как положить всё в скрипты ??? vendor.jswebcomponents-lite.js прочие библиотеки polymer.html app.js <наши компоненты>.html ??? 29
  30. 30. Очевидное решение: BrowserifyTransform (polymerize) 30
  31. 31. Использовать - удобно 31
  32. 32. 1)Требуется fix для Polymer: 2)Требуется HTML Inject: Но реализация - неудачная 32
  33. 33. Что будет, если регистрировать веб-компонент из скрипта? 33
  34. 34. Результат • Такой код неудобно поддерживать • Нерешенный вопрос с подключением polymer.html 34
  35. 35. Итак,Vulcanize polymer.html component_1.html component_2.html component_3.html styles.css script.js 35
  36. 36. Варианты подключения 36 components.html ? index.html
  37. 37. Внедрение в index.html 37 Меньше запросов Сборка не кэшируется
  38. 38. HTML Import сборки 38 1 лишний запрос не так страшен Сборка кэшируется
  39. 39. Резюме • Подключение компонентов в сборки JS – нестабильное решение • Vulcanize снижает число сетевых запросов и решает проблему 39
  40. 40. 40 Хочется удобства: подружим Polymer, Jade, Stylus и Browserify
  41. 41. 41
  42. 42. 42 vulcanize
  43. 43. 43 ? vulcanize
  44. 44. Вот кто нам поможет! 44
  45. 45. GulpTask: Jade -> HTML 45
  46. 46. GulpTask: Stylus -> CSS 46
  47. 47. GulpTask: склеим 3 файла в 1 47
  48. 48. 48 first.html second.html third.html
  49. 49. 49 first.html second.html third.html vulcanize register_components.html html imports: first.html second.html third.html
  50. 50. Этот реестр формирует Gulp 50
  51. 51. 51 Управление JS-зависимостями <script src="…"> VS require('module')
  52. 52. <script src="…"> VS require('module') • Одного JS-файла в компоненте не хватает • Почему не использовать <script src="…">? CommonJS удобнее! • Polymer не поддерживает CommonJS. Как собрать самим? 52
  53. 53. * jQuery * * plugins * * lodash * * Backbone * vendor.js expose external app.js external components.html main.js module_1.js * jQuery * не дублируется 53
  54. 54. Как сделать так, чтобы компоненты писались сами? 54
  55. 55. 55
  56. 56. Резюме • Web Components успешно интегрируются с имеющимися инструментами • Gulp способен решить множество задач по сборке компонентов • Создание нового компонента сводится к одной строке кода для генератора 56
  57. 57. 57 Где применить веб-компоненты?
  58. 58. Декомпозиция Single-Page App Переиспользуемые логические блоки На высоком уровне Расширение стандартных элементов управления На низком уровне 58
  59. 59. 59 Низкий уровень Расширение стандартных элементов управления
  60. 60. Расширение стандартных элементов управления • <input is="up-autoresizable" /> - автоподстройка длины • <input is="up-colorpicker" /> - выбор цвета с альфа-каналом - указание цвета числом • <up-textarea-count></..> - подсчет числа оставшихся символов • <up-select></..> - иерархия - запрещенные значения в списке 60
  61. 61. <input is="up-autoresizable"/> | наследование | от input | подключение | плагина | отключение | плагина 61 | зависимости через | Browserify
  62. 62. <input is="up-colorpicker"/> 62 | наследование | от input | кастомное | событие
  63. 63. 63
  64. 64. <up-textarea-count> 64 | Public API | для взаимодействия | | |
  65. 65. 65
  66. 66. <up-select> 66 | свойства | для биндинга | | | | | | |
  67. 67. 67
  68. 68. 68 Высокий уровень Переиспользуемые логические блоки
  69. 69. Переиспользуемые логические блоки <внешний блок (атрибуты…)> <внутренний блок 1 (атрибуты…)> <поле 1> <поле 2> <внутренний блок 2 (атрибуты…)> <поле 1> <поле 2> 69
  70. 70. Полигон для испытаний 70
  71. 71. Полигон для испытаний 71
  72. 72. <up-inspector> <up-inspector-list label="Позиционирование" <!– элементы управления --> <up-inspector label="Свойства"… <!– элементы управления --> <up-inspector-list label="Отступы" <!– элементы управления --> <!– элементы управления --> 72
  73. 73. 73
  74. 74. 74
  75. 75. <up-sausage> <up-state-marker /> <up-sausage type="full" inner-length="200" length="400" … 75
  76. 76. 76
  77. 77. Резюме • Web Components сильны на обоих уровнях • Система превращается в набор логических блоков • Полученный результат удобно поддерживать 77
  78. 78. Так здорово ли работать с веб-компонентами в реальном проекте? 78
  79. 79. 79 Определенно, ДА!
  80. 80. Наиболее частые проблемы • Не все документировано • Возможны изменения API • Мало информации на stackoverflow по свежим версиям библиотек (…но это временно) 80
  81. 81. 81 Перспективы развития
  82. 82. Если вы начинаете прямо сейчас и прямо с Polymer 0.5 0.9 1.0 Много готовых компонентов База API для 1.0 Обещают уже летом! 82
  83. 83. Производительность polyfills (меньше - лучше) https://github.com/polymerlabs/benchmarks 83
  84. 84. webcomponents.org 84
  85. 85. customelements.io 85
  86. 86. component.kitchen 86
  87. 87. Pluralsight - HTML5 Web Component Fundamentals 87
  88. 88. polymer-project.org 88
  89. 89. Резюме • Интеграция в реальный проект – уже возможна • Инструменты – активно развиваются • Библиотеки уже сегодня имеют широкие возможности • Вы получаете модульность, о которой можно только мечтать! 89
  90. 90. Андрей Рахманов rahmanov@enaza.ru ДмитрийЧертков chertkov@enaza.ru goo.gl/qOuhYP ПопробуйтеWeb Components Это вкусно! 80 Презентация goo.gl/McfoKL Проект UnderPage

×