Знайомимось з Web Components (Polymer)
Привіт, кодегідці!
Цього разу ми познайомимось із новим веб-стандартом, та напишемо власний 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 mode="dark" autoplay="false"></my-audio> - Великий вибір готових компонентів. Ви можете застосувати чужий компонент (audio-player, slider, віджет і тд.) просто додавши html-тег
- Новий погляд на створення web-додатків. Тепер можна будувати додатки за допомогою компонентів Як вам така структура?
<iron-pages role="main" selected="[[page]]" attr-for-selected="name" selected-attribute="visible">
<!-- home view -->
<shop-home name="home" categories="[[categories]]"></shop-home>
<!-- list view of items in a category -->
<shop-list name="list" route="[[subroute]]" offline="[[offline]]"></shop-list>
<!-- detail view of one item -->
<shop-detail name="detail" route="[[subroute]]" offline="[[offline]]"></shop-detail>
<!-- cart view -->
<shop-cart name="cart" cart="[[cart]]" total="[[total]]"></shop-cart>
<!-- checkout view -->
<shop-checkout
name="checkout"
cart="[[cart]]"
total="[[total]]"
route="{{subroute}}"></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:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Codeguida atricle page</title>
</head>
<body>
<h1>Hello world!</h1>
</body>
</html>
Запускаємо наш сервер:
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 rel="import" href="./components/my-component.html">
Тепер можемо викликати наш веб-компонент за допомогою html-тегу:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Codeguida atricle page</title>
<script src="./bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="./components/my-component.html">
</head>
<body>
<my-component></my-component>
</body>
</html>
Поки-що виникне помилка, оскільки ми ще не написали шаблон + логіку нашого компонента.
// my-component.html
<link rel="import" href="../bower_components/polymer/polymer.html"> <!--імпортуємо Polymer-->
<dom-module id="my-component">
<template> <!-- шаблон нашого компоненту: html-структура та стилі -->
<style>
.container {
font-family: Roboto, Noto, sans-serif;
}
#name {
color: red;
}
</style>
<div class="container">
<div id="hello-box">
Hi, <span id="name">[[name]]</span> <!-- [[name]] - змінна, яку можна передавати у атрибути html-тега -->
</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></my component> тег у структурі DOM дерева. Він зовсім не відрізняється від звичайних 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 :)
285 5
Коментарі: