Polymer

Polymer — бесплатная библиотека JavaScript с открытым исходным кодом для создания веб-приложений с использованием технологии Web Components. Данная библиотека разрабатывается командой Google и добровольцами GitHub.

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

Библиотека используется Google во многих своих сервисах, например, YouTube, YouTube Gaming, Google Earth (с 2017 года), Google I/O (в 2015 и 2016 годах), Google Play Music, Google Sites и Allo.

История

Публичная разработка Polymer началась в ноябре 2013 года с выпуска Promises Polyfill. Первоначально предполагалось, что основные компоненты охватят общую функциональность, которая будет необходима для большинства веб-сайтов, в то время как компоненты Paper будут предназначены для предоставления более специализированных компонентов с концепциями материального дизайна, составляющими ключевую часть дизайна. Важная веха была достигнута с выпуском версии 0.5, которая считалась первой версией проекта, готовой к использованию пользователями.

Google продолжал пересматривать дизайн Polymer после выпуска версии 0.5, уделяя особое внимание проблемам с производительностью, обнаруженными рядом разработчиков. Это привело к выпуску Polymer 1.0 в 2015 году, которая стала первой «готовой к использованию» версией библиотеки. Версия 1.0 значительно улучшила производительность Polymer, сократив время загрузки до 7 раз.

Функции

Polymer предоставляет ряд функций по сравнению с обычными веб-компонентами:

• Упрощенный способ создания кастомных элементов
• Как односторонняя, так и двусторонняя привязка данных
• Условные и повторяющиеся шаблоны

Элементы

Polymer 1.0

<!-- Загрузка базовой функции 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

<!-- Загрузка базового класса 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>

Литература

• 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 года.