Знайомимось з Web Components (Polymer)

7 хв. читання

Привіт, кодегідці!

Цього разу ми познайомимось із новим веб-стандартом, та напишемо власний Polymer-компонент.

Що таке Web Components?

It's future. Future of web.

Web Components - це веб-стандарт, який дозволяє нам будувати кастомні, ізольовані html-елементи.

Що крутого нам пропонують Web Components?

  • Можливість створювати власні html-елементи. Наприклад: <my-super-element></my-super-element>
  • Багаторазове використання. Ви можете застосувати ваш компонент знову і знову, на різних сайтах і додатках. Приклад: Ви написали компонент <my-audio>, який вміщує у себе аудіо-плеєр для Вашого сайту. А чому б не використати його ще й для блогу? Для цього ми просто підключаємо js-скрипт та додаємо наш плеєр за допомогою html-тегу - <my-audio></my-audio>. Круто, чи не так?
  • Атрибути. Як і нативні html-елементи, web components також мають атрибути. Приклад: <my-audio autoplay="false" mode="dark"></my-audio>
  • Великий вибір готових компонентів. Ви можете застосувати чужий компонент (audio-player, slider, віджет і тд.) просто додавши html-тег
  • Новий погляд на створення web-додатків. Тепер можна будувати додатки за допомогою компонентів Як вам така структура?
<iron-pages attr-for-selected="name" role="main" selected="[[page]]" selected-attribute="visible">
    
    <shop-home categories="[[categories]]" name="home"></shop-home>

    
    <shop-list name="list" offline="[[offline]]" route="[[subroute]]"></shop-list>

    
    <shop-detail name="detail" offline="[[offline]]" route="[[subroute]]"></shop-detail>

    
    <shop-cart cart="[[cart]]" name="cart" total="[[total]]"></shop-cart>

    
    <shop-checkout cart="[[cart]]" name="checkout" route="{{subroute}}" total="[[total]]"></shop-checkout>
  </iron-pages>

Що таке Polymer?

Polymer - це бібліотека від Google, яка дозволяє нам створювати власні веб-компоненти.

Що нам пропонує Polymer?

  • Легке створення компонентів. Із власними атрибутами, логікою та стилями
  • Поліфіли - завдяки ним компоненти без проблем підтримуються всіма популярними браузерами (Chrome, Firefox, Opera, Safari)

Пишемо власний веб-компонент!

Сьогодні ми підготуємо середовище на напишемо тестовий варіант компонента.

Розпочнемо.

Створюємо директорію для нашого проекту:

mkdir my-component

Переходимо в директорію та ініціалізуємо node.js - додаток.

cd my-component
npm init

(Переконайтесь, що у вас встановлений node.js)

Використання node.js для веб-компонентів необовязкове. Ми застосовуємо його лише для віддачі статики та bower.

Натискаємо Enter, поки у нашій директорії не з'явиться файл package.json

Пишемо сервер для віддачі html-сторінки: Встановлюємо Express

npm i --save express

В корені директорії створюємо два файли: server.js та index.html

Вміст server.js:

const express = require('express') //підключаємо express
const app = express() //ініціалізуємо додаток
const port = 7000; //оголошуємо порт

app.use(express.static(__dirname));   //використовуємо віддачу статики

app.listen(port, () => {  //реєструємо порт
  console.log(`listening at ${port}...`)
})

Вміст index.html:




  <meta charset="UTF-8">
  <title>Codeguida atricle page</title>


  <h1>Hello world!</h1>



Запускаємо наш сервер:

node server.js

Та знаходимо наш сайт за адресою

http://localhost:7000/

Налаштовуємо Polymer

Для зручності інсталюємо bower

npm i bower -g

Інсталюємо Polymer

bower install polymer

Створимо окрему директорію в нашому проекті для компонентів "components" із файлом "my-component.html".

Та імпортуємо polymer + наш веб-компонент у головний index.html

<script src="./bower_components/webcomponentsjs/webcomponents.min.js"></script>
  <link href="./components/my-component.html" rel="import">

Тепер можемо викликати наш веб-компонент за допомогою html-тегу:




  <meta charset="UTF-8">
  <title>Codeguida atricle page</title>
  <script src="./bower_components/webcomponentsjs/webcomponents.min.js"></script>
  <link href="./components/my-component.html" rel="import">


  <my-component></my-component>



Поки-що виникне помилка, оскільки ми ще не написали шаблон + логіку нашого компонента.

// my-component.html


<link href="../bower_components/polymer/polymer.html" rel="import"> 

<dom-module id="my-component">

    <template> 
        <style>
            .container {
              font-family: Roboto, Noto, sans-serif;
            }

            #name {
              color: red;
            }
        </style>


      <div class="container">
        <div>
          Hi, <span id="name">[[name]]</span> 
        </div>
      </div>

    </template>

    <script>
        Polymer({ // ініціалізуємо компонент
            is: 'my-component',  // визначає тег, за допомогою якого ми зможемо викликати компонент

            properties: {  // вказуємо, які атрибути може приймати html-тег нашого компонента

            name: {
              type: String,  // тип даних
              value: "Yarik" // значення за замовчуванням
            }

            },

            attached: function() {

            console.log('Component initialised')
                // `attached` викликається коли елементи та шаблон уже зрендерений в DOM
                //це хороше місце для функцій, які працюють із DOM-елементами, наприклад анімацій.
            }

        });
    </script>
</dom-module>

Перевіряємо нашу сторінку у браузері і радіємо появі компонента.

Зверніть увагу на <my-component> тег у структурі DOM дерева. Він зовсім не відрізняється від звичайних html-елементів. Круто, так? Знайомимось з Web Components (Polymer)

Працюємо із атрибутами.

Звичайні html-елементи мають атрибути.

Звичайні html-елементи мають атрибути.

< input type="text" ...
< audio src="audio-file-url"..

Ми також можемо використовувати атрибути у нашому компоненті. Вище у логіці компонента за допомогою цього коду:

properties: {  

            name: {
              type: String,  // тип даних
              value: "Yarik" // Значення за замовчуванням
            }

            },

Ми вказали, які атрибути може приймати тег компонента та задали значення за замовчуванням. Давайте спробуємо передати name-атрибут тегу <my-component></my-component>

// index.html

< body>
  <my-component name="codeguidaUser"></my-component>
< /body>

Перевіряємо результат і дивуємося можливостям Polymer.

На сьогодні все. Юзайте web components :)

Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.8K
Приєднався: 6 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація