Interested Article - Polymer

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

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

История

Публичная разработка Polymer началась в ноябре 2013 года с выпуска . Первоначально предполагалось, что основные компоненты охватят общую функциональность, которая будет необходима для большинства веб-сайтов, в то время как компоненты 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>

Примечания

  1. Bidelman, Eric . @ebidel (18 апреля 2017). Дата обращения: 8 июля 2017. 12 ноября 2020 года.
  2. . accounts.google.com . Дата обращения: 21 июня 2021. 21 июня 2021 года.
  3. GitHub . Дата обращения: 4 июня 2016. 8 ноября 2021 года.
  4. . Android Authority . Дата обращения: 5 августа 2021. 5 августа 2021 года.
  5. Steven Max Patterson. . CIO (29 мая 2015). Дата обращения: 5 августа 2021. 9 декабря 2018 года.
  6. . 14 августа 2015 года.
  7. (англ.) . www.polymer-project.org. Дата обращения: 5 августа 2017. 5 августа 2017 года.
  8. (англ.) . www.polymer-project.org. Дата обращения: 5 августа 2017. 5 августа 2017 года.

Литература

Ссылки

  • . Atlas Software.
  • (англ.) . Android Authority (26 июня 2014). Дата обращения: 2 февраля 2020. 20 сентября 2019 года.
  • Steven Max Patterson. (англ.) . CIO (29 мая 2015). Дата обращения: 2 февраля 2020. 2 февраля 2020 года.
  • . iTnews. Дата обращения: 2 февраля 2020. 28 февраля 2020 года.
Источник —

Same as Polymer