Веб-компоненти з Stencil.js - це найкращий спосіб створити багатокористувацькі елементи інтерфейсу у 2018 році?

Можливість розробити універсальні, рамкові та бібліотечні елементи агностичного інтерфейсу, якими можна поділитися між різними проектами та командами, здається, є ідеальним ліком принаймні для частини, що ми називаємо в рамках сучасного переднього світу. З того часу, як я почав працювати як веб-розробник, я був свідком ряду елементів та взаємодій, які можна віднести до коду для багаторазового використання, але відмінності між рамками та деталями їх реалізації зробили його громіздким… Веб-компоненти здаються відповіддю.

Але зачекайте, які веб-компоненти?

Веб-компоненти - це набір різних технологій, що дозволяють створювати багаторазові компоненти користувальницького інтерфейсу - їх функціональність інкапсульована далеко від решти коду - та використовувати їх у своїх веб-додатках.
https://developer.mozilla.org/en-US/docs/Web/Web_Components

Мільйони людей у ​​всьому світі вже щодня використовують цю технологію. Другий найпопулярніший веб-сайт минулого року, youtube.com, базується на веб-компонентах. Навіть вкладка Історія в Chrome написана за допомогою Polymer, бібліотеки веб-компонентів! Відповідно до Вікіпедії, веб-компоненти були вперше представлені Алексом Расселом на конференції Fronteers 2011 вперше.

Кілька слів про залучені технології

Тінь DOM

Інкапсуляція, мабуть, є запорукою успіху при розробці елементів багаторазового використання - можливість розділити деталі розмітки, стилізації та реалізації від решти документа - це те, що робить ідею веб-компонентів такою привабливою. API Shadow DOM робить свою справу. API браузера - це те, що дозволяє створювати підрівень в межах DOM.

Ви можете впливати на вузли в тіні DOM точно так само, як і нетіньові вузли - наприклад, додавання дітей або встановлення атрибутів, стилізація окремих вузлів за допомогою element.style.foo або додавання стилю до всього дерева тіней DOM усередині < стиль> елемент. Різниця полягає в тому, що жоден код всередині тіні DOM не впливатиме на що-небудь поза ним, що дозволяє зручно інкапсулювати.
https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM

Shadow DOM має два режими: відкритий і закритий. Закритий режим Shadow DOM надає авторам компонентів контроль над тим, як Shadow Root їх компонента відкривається через js. Детальніше про тінь DOM ви можете прочитати тут.

Стилізація

Стилі в Shadow DOM розширюються і не протікають. Глобальний CSS вплине на елементи Shadow DOM так само, як і будь-який інший html-елемент - завдяки успадкуванню властивостей, тому встановлення сімейства шрифтів на тілі буде успадковано користувальницьким компонентом. Налаштування стилів * буде також впливати на вкорінений елемент Shadow DOM, оскільки це впливає на всі елементи. Якщо ви хочете дозволити користувачам своїх компонентів стильовий компонент, ви повинні використовувати власні властивості CSS.

Спеціальні елементи

За допомогою спеціальних елементів ми можемо створювати власні html-теги або покращувати існуючі теги та компоненти. Завдяки цій технології веб-компоненти будуть виглядати як звичайні теги html, наприклад, .

Бібліотеки для роботи з веб-компонентами

Створення веб-компонентів за допомогою ванільного js, звичайно, можливо (нам потрібно пам’ятати про поліфілінг для браузерів, які не підтримують необхідні технології), але писати компоненти за допомогою простого js може бути важким і вимагати багато кодового коду. Ось тут корисні бібліотеки веб-компонентів. Вам вони не потрібні, але намагатися створити готові до виготовлення веб-компоненти будуть менш болісними за допомогою одного з них.

Полімер

Це найпопулярніша бібліотека веб-компонентів, створена та активно використовується Google. Він надає простий API для створення компонентів. Версія 3.0, яка буде поставлена ​​в цьому році, використовуватиме lit-html, що, здається, є хорошим способом створення html у js.

Skate.js

Skate.js стверджує, що це функціональна абстракція над стандартами Web Components. Цікава частина полягає в тому, що вона дозволяє використовувати декілька бібліотек перегляду, включаючи lit-html, preact і навіть реагувати.

Stencil.js

Stencil.js - це порівняно новий компілятор веб-компонентів, створений командою Ionic. Він займає популярні сучасні концепції веб-розробки (такі як Virtual DOM, асинхронна візуалізація, реакційний потік подій та TSX) та створює чистий, стандартний код веб-компонентів.

Створення веб-компонентів за допомогою Stencil.js

Я хотів би розповісти вам трохи більше про створення веб-компонентів за допомогою Stencil.js. Чому я вибрав цю бібліотеку? В основному через вбудовану підтримку Typescript та використання реактивних моделей, які мені знайомі з мого досвіду Angular and React, і, звичайно, підхід трафарету не є рамковим. Stencil.js стверджує, що є лише компілятором веб-компонентів, а створені компоненти - ванільний js - крихітний і швидкий, крім того, їх можна імпортувати за допомогою тега