Содержание


Присоединяйтесь к революции веб-компонентов с помощью Polymer

Создание современных веб- и мобильных приложений с помощью многоразовых свободно компонуемых визуальных и функциональных модулей

Comments

HTML-браузеры, как любая популярная технология, подвержены устареванию и потере значимости с течением времени. Модели сетевого доступа к информации меняются, и массовому пользователю требуются новые возможности пользовательского интерфейса. Тогда на сцену выходят альтернативные конкурентоспособные технологии — и поставщики браузеров, чтобы остаться в строю, должны адаптироваться к ним. Осознание этой необходимости привело к появлению W3C Web Components, инициативы стандартов сообщества, начатой несколько лет назад и поддерживаемой всеми поставщиками современных браузеров. Эта инициатива охватывает несколько проектов спецификаций, которые в совокупности позволяют разработчикам создавать и распространять многоразовые HTML-элементы пользовательского интерфейса (веб-компоненты) с возможностью расширения и обслуживания.

Преимущества нового стандарта веб-компонентов реализованы в Polymer, кросс-платформенной, хорошо поддерживаемой библиотеке с открытым исходным кодом, содержащей мощные инструменты. Ее появление стало своевременным для разработчиков, желающих создавать современные веб-приложения. Сегодня проектирование веб-приложений склоняется к одностраничным, высокоинтерактивным приложениям. А гибридные мобильные приложения, построенные с применением веб-технологии, становятся, скорее, нормой, чем исключением. Polymer значительно упрощает создание приложений обоих типов по сравнению с обычными библиотеками JavaScript и DOM-манипуляциями.

С Polymer (и библиотеками веб-компонентов в целом) можно работать двумя способами:

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

Это руководство на ряде примеров знакомит читателя с библиотекой Polymer и показывает, как использовать и настраивать веб-компоненты Polymer. (За примером кода обращайтесь к разделу Загрузки.) Сопутствующее руководство Создание многоразовых специальных веб-компонентов с помощью библиотеки Polymer содержит пошаговые инструкции по созданию собственных веб-компонентов с помощью шаблона Mobile Cloud в среде IBM Bluemix™.

Polymer: кросс-платформенная библиотека веб-компонентов

Polymer — это библиотека готовых, свободно компонуемых веб-компонентов, которые можно использовать для создания приложений или новых веб-компонентов. Polymer также включает в себя стандартные polyfill-сценарии, гарантирующие, что библиотека будет вести себя одинаково во всех современных браузерах. Они необходимы потому, что поставщики браузеров продолжают активно воплощать различные аспекты стандарта веб-компонентов, каждый в своем темпе.

Polymer – это плод стараний одного производителя браузера по подготовке своего продукта к будущему, где бал правят веб-компоненты. Группа разработчиков Polymer получает беспрецедентный доступ к ядру браузера (Chrome), поэтому разработка браузера тесно связана с библиотекой – что гарантирует сохранение библиотекой высокого уровня производительности и ее правильное функционирование во всех основных версиях Chrome. На момент написания этой статьи Polymer находится на стадии «developer preview».

Общая структура библиотеки Polymer показана на рисунке 1.

Рисунок 1. Общая структура библиотеки Polymer

В настоящее время приложение может использовать веб-компоненты для нескольких браузеров посредством реализации платформы Polymer, которая используется путем включая файла platform.js. Polymer гарантирует одинаковую работу библиотеки и компонентов в браузерах с собственной реализацией спецификации веб-компонентов того или иного уровня.

Polymer гарантирует одинаковую работу библиотеки и компонентов в браузерах с собственной реализацией спецификации веб-компонентов того или иного уровня.

При работе с Polymer сохраняется все, что вы знаете и любите в DOM, CSS, и JavaScript. Кроме того, используя только HTML, CSS и JavaScript, теперь можно создавать многоразовые специальные HTML-компоненты, полностью инкапсулированные в пользовательский интерфейс или функциональную часть приложения.

Помимо решения других задач, связанных с развертыванием веб-компонентов, Polymer помогает при регистрации компонентов, управлении их жизненным циклом, обработке атрибутов, оформлении CSS-стилей, вызове методов и обработке событий. Сообщество веб-разработчиков распространяет постоянно растущую библиотеку общедоступных компонентов с открытым исходным кодом. Единственное, что нужно знать разработчику, использующему веб-компоненты, созданные другими пользователями, – это новый набор рабочих HTML-тегов.

Адаптируемый компонент макета

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

Рисунок 2 иллюстрирует, как макет выглядит в браузерах ПК и планшета.

Рисунок 2. Адаптивный макет на экране ПК

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

На устройстве с узким экраном левая боковая панель убирается, и на виду остается только панель контента. На панели инструментов оставшейся панели автоматически появляется кнопка меню «гамбургер». Версию макета для компактных устройств иллюстрирует рисунок 3.

Рисунок 3. Адаптивный макет на узком экране мобильного телефона

Нажмите кнопку Демонстрация макета ниже, чтобы открыть пример страницы в своем браузере на ПК и в телефоне и сравнить два макета. Иначе, как и во всех примерах этого руководства, поведение браузера телефона можно имитировать вручную, изменяя ширину окна браузера в настольной версии.

Обратите внимание, что кнопка «гамбургер» выдвигает поле с левой стороны, охватывающее соответствующую часть основной панели (обычно со списком доступных вариантов выбора), как показано на рисунке 4.

Рисунок 4. Боковая панель меню навигации выдвигается слева на панель контента

Как известно, при использовании стандартных библиотек HTML/JavaScript для реализации подобного поведения требуется значительное количество кода. В листинге 1 приведен код для создания адаптивного макета с помощью Polymer.

Листинг 1. Адаптивный макет с использованием компонента <core-scaffold> Polymer
<!doctype html>
<html>

<head>
  <title>unquote</title>
  <meta name="viewport" 
  content=
  "width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
  <script src="../bower_components/platform/platform.js"></script>
  <link rel="import" 
     href="../bower_components/core-scaffold/core-scaffold.html">
</head>

<body>
  <core-scaffold>
  </core-scaffold>
</body>

</html>

В листинге 1 библиотека платформы Polymer включена в тег <script> посредством platform.js. Дополнительные компоненты включены посредством HTML Imports: в данном случае, веб-компонент <core-scaffold> – через core-scaffold.html.

Для создания богатого адаптивного поведения при изменении размеров экрана достаточно использовать веб-компонент <core-scaffold>. Кажется, что <core-scaffold> – это новый HTML-тег, но на самом деле это специальный веб-компонент, входящий в состав основных элементов библиотеки Polymer. В ядро Polymer входит целый ряд полезных веб-компонентов, обещающих значительно упростить веб-разработку. Чтобы увидеть компоненты в действии, можно обратиться к документации.

Обратите внимание, что <body> содержит только тег <core-scaffold>. Этого достаточно. Специальный элемент <core-scaffold> полностью инкапсулирует весь сложный механизм управления адаптивным пользовательским интерфейсом.

Компоненты Polymer — включая <core-scaffold>— можно составлять друг с другом или с другими специальными веб-компонентами, получая страницу или одностраничное веб-приложение (или свой собственный специальный веб-компонент).

Настройка веб-компонентов с помощью атрибутов

Как и у стандартных HTML-элементов, у специальных веб-компонентов есть атрибуты, обеспечивающие дальнейшую настройку. У компонента Polymer <core-scaffold> имеются два атрибута:

  • responsiveWidth регулирует минимальную ширину устройства, при которой убирается левая боковая панель. По умолчанию значение этого атрибута составляет 600px;
  • mode управляет поведением заголовка при прокручивании контента. Значение mode по умолчанию: seamed. (Другие возможные режимы поясняются в следующем примере).

Попробуйте изменить responsiveWidth в в листинге 1, уменьшив значение, чтобы поэкспериментировать с моментом переключения адаптивного макет на узкую версию:

<core-scaffold responsiveWidth='300px'></core-scaffold>

Примечание. Чтобы polyfill-сценарий HTML Imports работал, нужно запустить приложение на веб-сервере.

Внутренние механизмы специальных элементов также реализованы в HTML, CSS и JavaScript. Однако детали реализации скрыты от пользователей элемента. Благодаря инкапсуляции, которую обеспечивает Shadow DOM специального элемента, программисту не нужно заботиться о конфликтах пространств имен JavaScript или загрязнении стилей CSS между его кодом и внутренней реализацией компонента.

Внутренне <core-scaffold> представляет собой сочетание нескольких других основных компонентов Polymer. Ниже мы покажем, как их настраивать.

Компоновка: краеугольный камень веб-компонентов

Основную структуру пользовательского интерфейса веб-приложения (или одностраничного мобильного приложения) можно создать путем добавления в экземпляр <core-scaffold> новых визуальных веб-компонентов. Следующий пример демонстрирует, как добавить меню на боковую панель, а также высокий заголовок панели контента, который сжимается при прокрутке контента.

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

Рисунок 5. Панель контента с высоким заголовком

При прокрутке содержимого панели вниз заголовок сжимается, пока не достигнет стандартной высоты панели инструментов, как показано на рисунке 6.

Рисунок 6. Высокий заголовок сжимается до размера стандартной панели инструментов

Если прокрутить содержимое вниз еще раз, заголовок развернется. Если нажать кнопку-гамбургер, выдвинется боковая панель с полным меню и панель инструментов с заголовком и логотипом dW, как показано на рисунке 7.

Рисунок 7. Выдвинутая боковая панель с меню и заголовком

Код этого примера находится в файле dwpcompose/index.html (см. раздел Загрузки). На рисунке 8 показаны веб-компоненты, скомпонованные для формирования структуры пользовательского интерфейса.

Рисунок 8. Компоновка основных компонентов Polymer для создания пользовательского интерфейса

Теперь код содержит больше импортируемых HTML-элементов, по одному для каждого из составляющих веб-компонентов, включая компонент для шрифтов Roboto (тонкий шрифт для мобильных устройств) и компонент для поддержки современных Android-устройств:

<link rel="import" href="../bower_components/font-roboto/roboto.html">
  <link rel="import" href="../bower_components/core-scaffold/core-scaffold.html">
  <link rel="import" href="../bower_components/core-icon-button/core-icon-button.html">
  <link rel="import" href="../bower_components/core-menu/core-menu.html">
  <link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
  <link rel="import" href="../bower_components/core-item/core-item.html">

Атрибут <core-scaffold>mode теперь имеет значение waterfall-tall, что указывает веб-компоненту, что надо управлять сжатием высокого заголовка. Атрибут unresolved в теге <body> активирует код, предотвращающий артефакт Flash of Unstyled Content (FOUC) в некоторых браузерах. Атрибут touch="auto" гарантирует согласованное поведение при касании во всех поддерживаемых браузерах:

<body unresolved touch="auto">
  <core-scaffold mode="waterfall-tall">

Втягиваемая боковая панель обрабатывается внутри элемента <core-scaffold>. Заголовок состоит из двух компонентов: <core-toolbar> и <core-menu> внутри контейнера <core-header-panel>.

Атрибут navigation в <core-header-panel> указывает контейнеру <core-scaffold>, что это элемент, который будет использоваться для втягиваемой навигационной панели. У <core-header-panel> также есть режим seamed, что означает, что любой контент прокручивается вместе с заголовком. В <core-toolbar> содержатся значок с логотипом dW и заголовок:

<core-header-panel navigation flex mode="seamed">
  <core-toolbar><img src='/images/dwlogo.svg' width='50px' height='30px'>
  <span flex>Compose</span>
  </core-toolbar>

В <core-menu> есть два элемента с именами s1 и s2. Так как значение атрибута selected равно s1, первоначально выбирается элемент s1. Значок explore, используемый для двух элементов, взят из коллекции <core-icon> (импортированной ранее):

  <core-menu  id='menu'  selected="s1" >
    <core-item name="s1" icon="explore"  label="Selection 1"></core-item>
    <core-item name="s2" icon="explore"  label="Selection 2"></core-item>
  </core-menu>
</core-header-panel>

Все имеющиеся значки и соответствующие им имена представлены на странице Polymer Icons.

Панель инструментов правой панели содержит кнопку «гамбургер», которой компонент управляет внутренне. Но к этой панели инструментов можно добавлять элементы, добавляя к элементу атрибут tool. В этом примере в нижней части панели инструментов добавлен заголовок Components. Кроме того, в правой части панели инструментов добавлена кнопка настройки – на самом деле это элемент <core-icon-button> со значком more-vert. Центр свободного пространства занимает пустой элемент <span> с атрибутом flex. Polymer поддерживает атрибуты макета (такие как используемый здесь атрибут flex) с интуитивно понятным декларативным синтаксисом, что значительно упрощает развертывание базовой таблицы CSS Flexbox.

Наконец, элемент <div> с классом contentраспределен (на языке веб-компонентов это означает «вставлен») в области контента правой панели <core-scaffold>:

 <div tool class="bottom indent">Components</div>

  <span tool flex></span>
  <core-icon-button tool icon="more-vert" on-tap="{{settingsAction}}"></core-icon-button>

  <div class="content">First line<br/>Second line</div>
  </core-scaffold>

</body>

Рисование графиков с помощью веб-компонентов

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

Следующий пример строит графики с помощью веб-компонента. В зависимости от выбранного пункта меню приложение отображает один из двух графиков объемов продаж: региональных или глобальных за месяц.

Один из двух графиков выбирается на втягиваемой боковой панели, как показано на рисунке 9.

Рисунок 9. Меню выбора одного из двух графиков объемов продаж на боковой панели

При выборе региональных продаж отображается круговая диаграмма, как показано на рисунке 10.

Рисунок 10. Изображение круговой диаграммы региональных продаж

При выборе графика глобальных продаж по месяцам отображается гистограмма, как показано на рисунке 11.

Рисунок 11. Гистограмма глобальных продаж по месяцам

Сегодня в сообществе open source доступны сотни готовых веб-компонентов. Скоро их будут тысячи, наряду с коммерческими альтернативами. Два наиболее популярных хранилища веб-компонентов: Google Web Components (откуда взят компонент <google-chart>, используемого в этом примере) и customelements.io. В документации каждого веб-компонента приведены доступные атрибуты, методы, события и замечания по интеграции.

Для установки веб-компонентов можно использовать Bower:

bower install GoogleWebComponents/google-chart --save

Код этого приложения находится в файле dwpgraph/index.html (см. раздел Загрузки). Компонент <google-chart> включен в код посредством HTML Imports:

<link rel="import" href="../bower_components/google-chart/google-chart.html">

Этот пример приложения также демонстрирует, что можно стилизовать веб-компоненты с помощью CSS, обрабатывать события, изменять атрибуты и вызывать методы.

Стилизация веб-компонента с помощью CSS

К веб-компонентам, как и к встроенным элементам HTML, можно применять любой стиль CSS.

В коде приложения с графиками объемов продаж в разделе <style> выполнена стилизация элемента <google-chart> (задана его ширина):

google-chart {
      width: 380px;
   }

Обработка событий в веб-компонентах

Как и стандартные HTML-элементы, веб-компоненты могут инициировать события в ответ на действия пользователя или другие входные воздействия. Например, когда пользователь касается элемента <core-menu>, происходит событие core-select.

Можно написать обработчик события, добавив к меню соответствующий перехватчик. Вот код для добавления обработчика событий:

 var menu = document.querySelector('core-menu');

 menu.addEventListener( 'core-select', function (evt) {
    ... event handler logic ...
});

Логика обработчика событий в этом приложении управляет атрибутами <google-chart> веб-компонента для отображения выбранного графика обемов продаж. Данные для этих графиков поступают из жестко запрограммированного JSON-совместимого объекта JavaScript. В рабочем приложении данные можно извлекать из базы данных по сети (например, с помощью Polymer-компонента <core-ajax>).

Изменение атрибутов специального веб-компонента

Веб-компоненты содержат атрибуты, которые можно изменять – декларативно или программно. Ранее мы экспериментировали с атрибутом responsiveWidth компонента <core-scaffold>. В обработчике событий приложения с графиками объемов продаж четырем атрибутам компонента <google-chart> программно — посредством метода setAttribute() узла DOM — присваиваются значения из источника данных JSON.

Так как событие core-select происходит и тогда, когда выбор элемента отменяется, проверка флага isSelected гарантирует исполнение логики только при выборе элемента:

menu.addEventListener( 'core-select', function (evt) {
   if (evt.detail.isSelected)  {
    var chart = document.querySelector('google-chart');
    var scaffold = document.querySelector('core-scaffold');
    var graph = document.getElementById('graph');
    var selectedGraph = analytics[menu.selected];
    chart.setAttribute("type", selectedGraph.type);
    chart.setAttribute("options", selectedGraph.options);
    chart.setAttribute("cols", selectedGraph.cols);
    chart.setAttribute("rows", selectedGraph.rows);

    graph.innerHTML = selectedGraph.name;
    console.log(menu.selected);
    scaffold.togglePanel();
  }
});

Вызов методов веб-компонента

Специальные веб-компоненты позволяют реализовывать методы, которые пользователь веб-компонента может вызывать непосредственно. Для <core-header-panel> можно вызвать метод togglePanel() и убирать или выдвигать панель, когда шаблон находится в режиме узкого экрана.

В коде обработчика событий после изменения атрибутов элемента chart панель убирается с помощью вызова scaffold.togglePanel():

chart.setAttribute("type", selectedGraph.type);
chart.setAttribute("options", selectedGraph.options);
chart.setAttribute("cols", selectedGraph.cols);
chart.setAttribute("rows", selectedGraph.rows);		
...
scaffold.togglePanel();

Приложение географической карты

Веб-компоненты могут инкапсулировать не только свойства внешнего вида и обработки взаимодействия с пользователем, но и целое приложение — с доступом к данным, внутренней логикой и взаимодействием по сети.

В следующем примере в приложение добавляется полный, готовый к работе компонент интерактивной географической карты.

Это приложение предоставляет выбор из трех городов (Роли, Сан-Франциско и Сан-Диего), как показано на рисунке 12.

Рисунок 12. Приложение с меню для выбора городов

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

На рисунке 13 отображается карта Сан-Франциско.

Рисунок 13. Приложение, демонстрирующее интерактивную карту Сан-Франциско

На рисунке 14 показана карта Роли в режиме с узким макетом.

Рисунок 14. Приложение с интерактивной картой Роли в режиме узкого экрана

Сложная обработка пользовательского интерфейса карты внедрена в компонент, и вы получаете ее бесплатно. Доступ к сети для извлечения данных карты, а также обработка и отображение этих данных также выполняются внутри веб-компонента. Все, что вам нужно сделать, – это указать широту и долготу места, которое будет отображаться в центре карты.

Создание картографического приложения

Исходный код картографического приложения находится в файле dwpmap/index.html (см. раздел Загрузки). По своей архитектуре приложение аналогично примеру с графиками объемов продаж. Ниже приводится краткое описание действий по созданию этого приложения.

  1. Установите веб-компонент в свой проект:
    bower install PolymerLabs/google-map --save
  2. Импортируйте веб-компонент в приложение с помощью HTML Imports:
    <link rel="import" href="../bower_components/google-map/google-map.html">
  3. Добавьте в область контента веб-компонент <google-map>:
      <div class="content">
        <google-map> 
        </google-map>
      </div>
  4. Настройте пункты меню для отображения названий городов. При изменении выбора происходит событие core-select:
    <core-menu id='menu' selected="sf" >
    <core-item name="rh" icon="explore" label="Raleigh"></core-item>
    <core-item name="sf" icon="explore" label="San Francisco"></core-item>
    <core-item name="sd" icon="explore" label="San Diego"></core-item>
    </core-menu>
  5. Создайте JSON-совместимый объект данных, содержащий широту и долготу местоположения. Обратите внимание, что ключи совпадают с именами <core-item> в меню:
    var waypoints = { 
      "rh" : {"latitude":"35.843768", "longitude":"-78.645056", 
           "fullname":"Raleigh"},
    "sd" : {"latitude":"32.8245525", "longitude":"-117.0951632", 
    "fullname":"San Diego"},
    "sf": {"latitude": "37.77493", "longitude": "-122.414942", 
    "fullname":"San Francisco"}};
  6. Создайте обработчик событий core-select для обновления атрибутов компонента <google-map> при каждом изменении выбора:
    var menu = document.querySelector('core-menu');
    
     menu.addEventListener( 'core-select', function (evt) {
       if (evt.detail.isSelected)  {
        var map = document.querySelector('google-map');
        var scaffold = document.querySelector('core-scaffold');
        var location = document.getElementById('location');
        var selectedLocation = waypoints[menu.selected];
        map.setAttribute("latitude", selectedLocation.latitude);
        map.setAttribute("longitude", selectedLocation.longitude);
        location.innerHTML = selectedLocation.fullname;
        console.log(menu.selected);
        scaffold.togglePanel();
      }
     });

Этот пример наглядно демонстрирует, как можно создать сложное полезное приложение, используя лишь несколько самых необходимых веб-компонентов. Такое приложение может работать с множеством данных оперативной аналитической обработки (OLAP), отображая на карте мира сводные данные по объемам продаж и позволяя с помощью сенсорного выбора карты на экране мобильного устройства углубляться в данные по объемам продаж для каждого из регионов — или даже для отдельных магазинов или городов региона. Этот гипотетический пример демонстрирует мощь сочетания веб-компонентов.

Упрощение проектирования с помощью графического конструктора компонентов Polymer

Веб-компоненты легко программировать вручную. Чтобы сделать работу с веб-компонентами еще проще и доступнее для большего числа разработчиков, для Polymer выпустили действующую онлайновую бета-версию графического конструктора.

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

Графический конструктор в действии показан на рисунке 15.

Рисунок 15. Графический конструктор специальных компонентов Polymer

Конечно, бета-версия конструктора имеет некоторые ограничения. Наиболее сложные сборки компонентов по-прежнему требуют ручной написания кода, который графический конструктор создать не может. Однако его удобно использовать для ручного редактирования базового HTML-файла. И будьте уверены, что скоро появятся более полные решения для построения приложений и компонентов.

Заключение

Библиотека Polymer основана на стандартах веб-компонентов и расширяет повсеместное доминирование DOM (теперь – с возможностью расширения разработчиком) в качестве основы для разработки веб- и мобильных приложений в следующем десятилетии. Polymer подтверждает серьезность намерений поставщиков веб-браузеров развивать и адаптировать свои флагманские продукты для лучшего удовлетворения потребностей нового поколения пользователей и разработчиков приложений.


Ресурсы для скачивания


Похожие темы

  • Оригинал статьи: Join the Web Components revolution with Polymer.
  • Create reusable custom web components with Polymer (Sing Li, developerWorks, сентябрь 2014 г.): пошаговое руководство по созданию своих собственных специальных веб-компонентов.
  • Polymer: новейшие готовые компоненты Polymer, примеры кода и документация.
  • Google Web Components: репозиторий готовых веб-компонентов с открытым исходным кодом.
  • Совместимость браузеров: последние сведения о кроссплатформенной поддержке браузерами и совместимости Polymer.
  • customelements.io: репозиторий с большим количеством веб-компонентов, построенных сообществом.
  • Материальное конструирование: полностью поддерживаемая Polymer коллекция бумажных компонентов для Android.
  • HTML-компоненты: серия статей developerWorks Дэвида Гири с подробным описанием технологий, лежащих в основе веб-компонентов.

Комментарии

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии или подписаться на них.

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=40
Zone=Web-архитектура, Мобильные приложения
ArticleID=1015658
ArticleTitle=Присоединяйтесь к революции веб-компонентов с помощью Polymer
publish-date=09232015