Polymer — бесплатная библиотека JavaScript с открытым исходным кодом для создания веб-приложений с использованием технологии Web Components. Данная библиотека разрабатывается командой Google и добровольцами GitHub.
Polymer | |
---|---|
![]() | |
Тип | библиотека JavaScript |
Разработчик | |
Написана на | JavaScript, HTML |
Операционная система | кроссплатформенность |
Первый выпуск | 27 мая 2015 |
Последняя версия | 3.5.1 (4 июня 2022 ) |
Репозиторий | github.com/Polymer/polym… |
Состояние | Активное |
Лицензия | 3-Clause BSD |
Сайт | polymer-project.org |
![]() |
Библиотека используется 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>
Примечания
править- ↑ Bidelman, Eric Mission accomplished: has been componentized. New @googleearth is built w/ #WebComponents using @polymer.pic.twitter.com/h76ztfynYy . @ebidel (18 апреля 2017). Дата обращения: 8 июля 2017. Архивировано 12 ноября 2020 года.
- ↑ Meet Google Drive – One place for all your files . accounts.google.com. Дата обращения: 21 июня 2021. Архивировано 21 июня 2021 года.
- ↑ Who's using Polymer? GitHub. Дата обращения: 4 июня 2016. Архивировано 8 ноября 2021 года.
- ↑ Polymer gives us a closer look at Google's Material Design UI . Android Authority. Дата обращения: 5 августа 2021. Архивировано 5 августа 2021 года.
- ↑ Steven Max Patterson. Google's Polymer 1.0 brings reuse and better branding to Web development . CIO (29 мая 2015). Дата обращения: 5 августа 2021. Архивировано 9 декабря 2018 года.
- ↑ Welcome - Polymer 1.0 . Архивировано 14 августа 2015 года.
- ↑ Polymer 1.0 docs - Polymer Project (англ.). www.polymer-project.org. Дата обращения: 5 августа 2017. Архивировано 5 августа 2017 года.
- ↑ Polymer 2.0 docs - Polymer Project (англ.). www.polymer-project.org. Дата обращения: 5 августа 2017. Архивировано 5 августа 2017 года.
Литература
править- Jarrod Overson, Jason Strimpel. Developing Web Components: UI from jQuery to Polymer. — O'Reilly, 2015. — 327 с. — ISBN 978-1-4919-0569-2.
Ссылки
править- Introduction to Polymer.JS . Atlas Software.
- Polymer give us a closer look at what might be in store for Material Design (англ.). Android Authority (26 июня 2014). Дата обращения: 2 февраля 2020. Архивировано 20 сентября 2019 года.
- Steven Max Patterson. Google’s Polymer 1.0 brings reuse and better branding to Web development (англ.). CIO (29 мая 2015). Дата обращения: 2 февраля 2020. Архивировано 2 февраля 2020 года.
- Inside ING Direct's new lego block app architecture . iTnews. Дата обращения: 2 февраля 2020. Архивировано 28 февраля 2020 года.