Polymer
Polymer | |
---|---|
Тип | библиотека JavaScript |
Разработчик | |
Написана на | JavaScript, HTML |
Операционная система | кроссплатформенность |
Первый выпуск | 27 мая 2015; 9 лет назад (2015-05-27) |
Последняя версия | 3.5.1 (4 июня 2022; 2 года назад (2022-06-04)) |
Репозиторий | github.com/Polymer/polym… |
Состояние | Активное |
Лицензия | 3-Clause BSD |
Сайт | polymer-project.org |
Медиафайлы на Викискладе |
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>
Примечания
- ↑ 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 года.