Polymer — бесплатная библиотека JavaScript с открытым исходным кодом для создания веб-приложений с использованием технологии Web Components. Данная библиотека разрабатывается командой Google и добровольцами GitHub.
Библиотека используется Google во многих своих сервисах, например, YouTube, YouTube Gaming, Google Earth (с 2017 года)[1], Google I/O (в 2015 и 2016 годах), Google Play Music, Google Sites[2] и Allo[3].
История
Публичная разработка Polymer началась в ноябре 2013 года с выпуска Promises Polyfill. Первоначально предполагалось, что основные компоненты охватят общую функциональность, которая будет необходима для большинства веб-сайтов, в то время как компоненты Paper будут предназначены для предоставления более специализированных компонентов с концепциями материального дизайна, составляющими ключевую часть дизайна. Важная веха была достигнута с выпуском версии 0.5, которая считалась первой версией проекта, готовой к использованию пользователями[4].
Google продолжал пересматривать дизайн Polymer после выпуска версии 0.5, уделяя особое внимание проблемам с производительностью, обнаруженными рядом разработчиков. Это привело к выпуску Polymer 1.0 в 2015 году, которая стала первой «готовой к использованию» версией библиотеки[5]. Версия 1.0 значительно улучшила производительность Polymer, сократив время загрузки до 7 раз[6].
Функции
Polymer предоставляет ряд функций по сравнению с обычными веб-компонентами:
- Упрощенный способ создания кастомных элементов
- Как односторонняя, так и двусторонняя привязка данных
- Условные и повторяющиеся шаблоны
Элементы
Polymer 1.0[7]
<!-- Загрузка базовой функции Polymer -->
<link rel="import" href="bower_components/polymer/polymer.html">
<!-- Создание элемента my-element -->
<dom-module id="my-element">
<template>
<style>
/* Локальный DOM CSS стиль */
</style>
<!-- Локальный DOM -->
Hello {{name}}!
</template>
<script>
// Регистрация элемента ( Спецификация Custom Elements v0 )
Polymer({
is: 'my-element',
properties: {
name: { // Название параметра
type: String, // Тип параметра
value: 'World' // Значение параметра
}
},
ready: function () {
// Конструктор
},
attached: function () {
// Компонент вызван ( Добавлен в DOM )
},
detached: function () {
// Компонент удален из DOM
}
});
</script>
</dom-module>
Polymer 2.0[8]
<!-- Загрузка базового класса Polymer.Element -->
<link rel="import" href="bower_components/polymer/polymer-element.html">
<!-- Создание элемента my-element -->
<dom-module id="my-element">
<template>
<style>
/* Локальный DOM CSS стиль */
</style>
<!-- Локальный DOM -->
Hello {{name}}!
</template>
<script>
// Класс элемента MyElement наследуется от Polymer.Element
class MyElement extends Polymer.Element {
/*
* Возвращает имя компонента
* @return String Имя компонента
*/
static get is () { return 'my-element'; }
/*
* Возвращает конфигурационные данные компонента
* @return Object Конфигурация
*/
static get config () {
return {
properties: {
name: { // Название параметра
type: String, // Тип параметра
value: 'World' // Значение параметра
}
}
};
}
/*
* Конструктор
*/
constructor () {
// Вызов конструктора в родительском классе
super();
}
/*
* Компонент вызван ( Добавлен в DOM )
*/
connectedCallback () {
super.connectedCallback();
}
/*
* Компонент удален из DOM
*/
disconnectedCallback ()
super.disconnectedCallback();
}
}
// Регистрация элемента ( Спецификация Custom Elements v1 )
customElements.define(MyElement.is, MyElement);
</script>
</dom-module>
Примечания
Литература
Ссылки
 Свободное и открытое программное обеспечение Google |
|---|
| Программное обеспечение | | Приложения | |
|---|
| Языки программирования | |
|---|
Фреймворки и
инструменты разработки | |
|---|
| Операционные системы | |
|---|
|
|---|
| Связанное | |
|---|
Ссылки на внешние ресурсы |
|---|
| |
|---|
| Тематические сайты | |
|---|
