:icons: font

:sectanchors:

== Веб-компоненты

Непонятно как затесавшийся доклад про веб-компоненты на JEEConf

  • Less JS! Web components for back-end developers. (Olga Semeniuk, Belarus)

++++

Очень понравилась такая очевидная вещь:

++++

Веб-компоненты состоят из следующих частей:

  1. Templates. Фрагменты HTML, которые программист собирается использовать в будущем. Содержимое тегов парсится браузером, но не вызывает выполнение скриптов и загрузку дополнительных ресурсов (изображений, аудио…) пока мы не вставим его в документ.
  2. Shadow DOM. Shadow DOM позволяет изменять внутреннее представление HTML элементов, оставляя внешнее представление неизменным. Отличный пример — элементы и *. В коде мы размещаем один тег, а браузер отображает несколько элементов (слайдеры, кнопки, окно проигрывателя). В Chrome эти и некоторые другие элементы используют Shadow DOM.
  3. Custom Elements. Позволяют создавать и определять API собственных HTML элементов. В HTML теперь будут такие теги как * или *?
  4. Imports. Импорт необходимых ресурсов для компонента - css например.

Хороший пример реализации компонентов это Polymer.

Пример объявления полимеровского элемента: [source,html]

<div>{{greeting}}</div> <!-- динамические данные компонента-->

У полимера также есть библиотека уже готовых ((https://elements.polymer-project.org/ компонент)).

image::../../img/polymer-cc.png[]

((https://elements.polymer-project.org/elements/gold-cc-input Компонент)) для ввода номера кредитной карты, естественно в материальном дизайне, куда без него.

Полимеровские компоненты очень похожи на ангуряровские директивы. В итоге синтаксис одинаковый, то есть сходу то и не отличить, что это полимер или ангуляр?

== ((https://www.polymer-project.org/1.0/ Polymer))

[source,html]

== ((https://angular.io/ Ангуляр 2)) Обещает нам подобный синтаксис

image::../../img/angular2.png[]

Невооруженным взглядом видно, что они одинаковы.

== Какой же в итоге выберет гугл?

Сопутствующие статьи: