Привіт, кодегідці!
Цього разу ми познайомимось із новим веб-стандартом, та напишемо власний 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-елементів. Круто, так?
Працюємо із атрибутами.
Звичайні 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 :)
Ще немає коментарів