Один предстоящий технологии, которые представляет собой большой скачок вперед в создании веб-зрелую платформу приложений является веб components¹,С точки зрения высокого уровня, веб-компоненты позволят лучше composability, Возможность многократного использования и совместимость элементов интерфейсного веб-приложений, обеспечивая общий способ, чтобы написать компоненты в HTML .

Цель этой статьи, чтобы показать вам, почему это будет такой важный шаг, хвастаясь, что может быть достигнуто прямо сейчас с помощью Polymer²,Полимер в настоящее время является самой передовой и (самопровозглашенный) производство готовых библиотека на основе веб-компонентов .

Что такое полимерная?Link

Давайте это в сторону: “Полимер не рамки.” Команда за это сильно подчеркнул это в этом году / O разговора Google I о выпуске 1.0.Полимер было объявлено на Google I / O 2013 Его цель состоит в предоставлении разработчикам работать с веб-компонент и четыре основного низкого уровня API, —HTML-imports³, тени DOM⁴, HTML-templates⁵и пользовательских elements⁶—Перед стандарты разработаны и внедряются всеми браузере поставщиков .

Это достигается путем предоставления набор polyfillsчто, мол, “fake”новое поведение API, где он еще не реализован в течение последних двух версиях всех основных браузерах.Помимо этих polyfills, полимер также обеспечивает некоторую синтаксический сахар, что делает работу с веб-компонент немного легче .

Один год спустя, проект получил большой толчок в Google I / O 2014, так как команда объявила о своих амбиций, чтобы двигаться вперед полимер, предоставляя обширную библиотеку готовых элементов для разработчиков, на основе Материал Design Guidelines .⁷Теперь, год спустя, «производство-готов” 1.0 версия Полимер был официально объявил в I / O 2015Keynote .⁸

Итак, давайте поближе посмотрим на то, что все суета и то, что работа с веб-компонентов и полимерных чувствует, как .

Полимер Компоненты Link

С версии 1.0, команда объявила Полимер различные наборы элемент продукт lines⁹,Эти многоразовые строительные блоки Прекомпилированные для разработчиков и показать, как веб-компоненты позволят экосистему модульных блоков .

• Утюг elements¹⁰Эти коммунальные элементы, которые выполняют основные Оформление печатных и базовую функциональность, без применения каких-либо сложных визуальных стилей .
• Бумага elements¹¹Это реализация веб-компонент материала конструкции, основанной на элементе железа .
• Google веб-components¹²Эти веб-компоненты обертки для интерфейсов и услуг Google.Например, есть элемент для Google Maps, YouTube и Google Calendar .
• Золото elements¹³Эти специальные элементы, которые могут быть использованы для электронной коммерции, такие как входные элементы кредитной карты .
• Неоновая elements¹⁴Все модные спецэффекты падать под этим лейблом.В настоящее время лишь веб animations¹⁵элемент находится в там, который имеет некоторые довольно прохладно demos¹⁶.
• Платина elements¹⁷Эта категория для компонентов, которые позволяют сложные функциональные возможности веб-приложений, таких как толчок уведомления .
• Molecules¹⁸Эти элементы являются оболочками для других библиотек JavaScript .

За этой официального репозитория Polymer, вы должны проверить Пользовательские Elements¹⁹, Хранилище даже более элементов.Эти элементы не обязательно на основе полимеров, но все еще совместимые благодаря компонента магии .__ веб 12 |

Пример применения Link

Создать шаблонный Использование Начального комплекта Link

Хватит высокого уровня разговоров и обзоры.Как мы начинаем разработку с полимерным?К счастью, ребята из Google имеет released²⁰аккуратный стартер kit²¹с версии 1.0 .

Если у вас установлен Node.js, НПМ, Бауэр и Глоток, вы можете запустить следующую команду в каталоге проекта, чтобы установить все зависимости:

npm install -g gulp bower && npm install && bower install

Для получения дополнительной информации о современной JavaScript оснастки, проверить соответствующие страницы на npm²², Bower²³и Gulp²⁴.

После установки зависимостей, вы можете запустить набор с Глоток:

gulp serve

Эта команда будет создавать и обслуживать стартовый комплект .

Посмотрите на __62 темы Kit |Link

То, что мы имеем здесь в комплект стартера очень основной костяк приложения с гибкой планировкой, материальной дизайн, функциональность маршрутизации и в автономном режиме кэширования через сервис работников API .

²⁵

Давайте внимательнее посмотрим на то, что приложение, как это выглядит, как под капотом в веб-компонента земли.Посмотрите на app/index.htmlфайл.В голове вы можете увидеть, что сценарий включен на странице:

<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

Это компонент polyfill веб-часть полимера, который станет устаревшим в течение долгого времени;Могу ли я использовать списки его текущее state²⁷,На момент написания веб-компоненты поддерживаются изначально 100% в Chrome и Opera, и в настоящее время за флагом в Firefox .

Немного далее вниз по линии, вы найдете эту часть:

<link rel="import" href="elements/elements.html">

Это импорта HTML в действии.Когда вы идете дальше и открыть elements/elements.htmlФайл, вы увидите, что все элементы, используемые в теле index.htmlввозятся сюда.Вы также можете непосредственно импортировать их в index.html, Но исходный файл является немного чище, если вы поместите их в свои собственные .htmlподать .

Теперь, давайте посмотрим на реальной разметки приложения .

Структура приложения с веб-компоненты Link

Самое главное, когда, глядя на index.htmlВы увидите много пользовательских элементов, которые используются для разметки приложения.Здесь вы увидите в основном элементы из iron-*и paper-*элемент libraries²⁸,Пользовательские элементы должны быть с префиксом это -обозначения, чтобы избежать столкновения с потенциальными будущими элементами базы HTML .

Вы можете видеть, что полная раскладка страницы состоит из бумаги и железа элементов из библиотеки полимеров:

<paper-drawer-panel>
   <!--Responsive sidebar drawer -->
   <paper-header-panel>
      <!-- Header of the drawer -->
      <paper-toolbar>
      </paper-toolbar>
      <!--Menu in the drawer -->
      <paper-menu>
      </paper-menu>
   </paper-header-panel>
   <!--Main content area -->
      <paper-header-panel>
         <!--Header of the main content -->
         <paper-toolbar>
         </paper-toolbar>
         <!--Main content -->
      <iron-pages>
      </iron-pages>
   </paper-header-panel>
</paper-drawer-panel>

Это показывает очень декларативный и семантический способ структурирования приложение с веб-компонент.Представьте себе, глядя на разметку такого заявления в традиционном веб-приложении;он будет иметь сотни дивы повсюду .

Веб-компоненты, как API, Link

Кроме того, у вас есть пример из platinum-*элементы, которые обеспечивают более сложные функциональные возможности, такие как содействие новый сервис работник API.Работники сферы услуг являются еще одним новым стандартом API, который позволяет вам создать фоновую службу в браузере, который может обрабатывать кэширование, автономный опыт для вашего веб-приложения и многое другое.Это не связано непосредственно с веб-компонентов, так проверить article__0 HTML5 Rocks ‘|29если вы хотите узнать больше об этом.Точно так же, paper-toastэлемент добавляет функциональность уведомление тост к применению.Это показывает, что веб-компоненты способ может быть использован для захвата более сложную функциональность и интерфейсы .

В целом, разметки приложения показывает очень декларативный способ разметки приложения путем объединения многоразовые элементы.Обратите внимание, что есть не много дополнительного JavaScript или CSS в течение Starter Kit приложение.Большая часть сложного кода красиво воплощен в элементах, которые были выведены в качестве зависимостей .

Привязка данных и маршрутизации Link

Вы, наверное, заметили, что приложение, завернутый в шаблоне HTML тега:

<template is="dom-bind" id="app">
   …
</template>

Это делается потому, что полимерная использует шаблоны HTML как контекст (как AngularJS делает с $scope, например) для привязки данных .³⁰Оператор is="dom-bind"показывает isатрибут, который представляет собой способ объявить, что элемент является элементом пользовательского типа, представленной в качестве значения, в то же время наследования от тега он находится на.Таким образом, этот шаблон тег получает лечение, как dom-bindэлемент, который является обычай элемент обеспечивается полимер, который в настоящее время наследует от templateЭлемент он был помещен на.Оператор dom-bindэлементом здесь включается обязательных возможностей полимера в templateпометить он был помещен на .

AngularJS разработчики, вероятно, заметили this³¹на первый взгляд: приложение держится с помощью привязки данных с синтаксисом усы.Связь между paper-menuэлемент и iron-pagesэлемент является прекрасным примером того, что может быть сделано с этим в мире веб-компонента .

Оператор paper-menuэлемент, к …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров