Зрозуміло і просто про веб-компоненти та Polymer
Я Олександр Кашеверів. За освітою – магістр радіофізики. За професією – веб-розробник, працюю в компанії DataArt з 2011 року, з 2009 захоплююсь IT та веб-технологіями.
Розглянемо, що таке веб-компоненти та polymer. Трохи поміркуємо на тему розвитку Інтернету. Подивімося на технічні деталі, приклади, підтримку браузерами, тестування. Коротко, зрозуміло, у справі. З картинками.
Вступ
Інтернет постійно розвивається. Технології були придумані та впроваджені, виходячи із потреб, актуальних на момент створення. Десять років тому неможливо було зробити те, що ми реалізуємо зараз, і важко уявити, що буде ще за 10 років.
Бізнес вимагає створення великих та складних програмних веб-продуктів із багатою функціональністю, красою, високою продуктивністю. Такі рішення нетривіальні власними силами, так ще й накладається специфічність веб-технологій. Найчастіше, щоб зменшити складність продукту, його поділяють на безліч простіших частин. Такий компонентний підхід зменшує хаос, покращує структуру, зрозумілість, збільшує ефективність командної роботи.
Для зменшення головного болю добре, якщо в контексті веб:
Веб-компоненти - коротко
Інтернет повільно, але чітко рухається до компонентизації - це природний процес. Складне можна спростити, розбивши на частини. Паралельно розвитку фреймворків йде робота і нижчому рівні. Набирають популярності веб-компоненти. Це реалізація ідеї компонентизації лише на рівні браузера.
Історія веб-компонентів почалася в 2011 році (перша згадка на github). Коротко - що це:
- Custom Elements – створення своїх html-елементів, доповнення існуючих.
- Shadow DOM - інкапсуляція логіки та стилів.
- Templates – шаблони на рівні браузера!
- HTML imports — замість підключення різних файлів [css, js, . ] можна підключати один HTML-документ, що включає всі інші файли.
При використанні цих чотирьох технологій разом, виходять автономні блоки, що перевикористовуються, — веб-компоненти.
Насправді, подібність веб-компонентів вже було створено давно. Найпростіший приклад - елемент
Так само і з HTML5 елементами.
У цьому є суть веб-компонентів — створення простих і зрозумілих незалежних елементів із прихованою логікою, стилями.
Напевно, багато хто підключав до проекту Bootstrap — для цього потрібно окремо прописати підвантаження стилів і скриптів. З компонентами це можна було б зробити простіше.
Веб-компоненти - не фреймворк. Це набір технологій, реалізованих лише на рівні браузера.
Веб-компоненти - підтримка браузерами & polyfills
Оскільки веб-компоненти мають високу цінність, але, як завжди, не підтримуються всіма браузерами, створюються способи поліпшити підтримку. Так з'явилися поліфіли.
З їх допомогою підтримка браузерами вже краще.
На веб-сторінці поліфіли підключається стандартно в head (до всіх скриптів, які використовують веб-компоненти):
Веб-компоненти - посилання
- learn.javascript.ru - навчання.
- w3.org - (eng) специфікація веб-компонентів.
- css-tricks.com (eng) - огляд.
- youtube.com - (eng) огляд.
- webcomponents.org — (eng) обговорення та найкращі практики.
- github.com - (eng) polyfills для підтримки старими браузерами.
- developer.mozilla.org - (eng) навчання.
- caniuse.com - (eng) підтримка браузерами.
- jonrimmer.github.io - (eng) підтримка браузерами.
Тим часом Google все спрощує і розвиває. Робота почалася восени 2012 року, судячи з історії коммітів на github. Вони взяли веб-компоненти, поліфіли та створили ще одну надбудову.
Мета Polymer - спростити створення якісних веб-застосунків (цитата product manager з конференції Google IO).
Polymer - коротко
Бібліотека є веб-компонентами в основі, поліфіли для підтримки старих браузерів, це все обернено в цілісну зручнішу систему з додаванням цукру.
Схематично це виглядає так:
Google створив набір готових компонентів та розділив їх на логічні частини:
 | Основні будівельні блоки | , , , … |
 | Елементи на основі iron-elements та material design |
, .
, .
Можна зауважити, що постійно фігурує слово «елемент». Google вважає, що для всього можна зробити елемент. "There is an element for that" ("для цього є елемент") - звучить, як слоган у доповідях Google IO 2015.
Так, навіть для ajax запит є елемент. Виглядає так:
При створенні програм ми стикаємося з приблизно однаковими завданнями, і Google пропонує набір готових будівельних блоків для цього. З якою б проблемою ми не зіткнулися — для її вирішення є елемент. "There is an element for that". Створено каталог готових Polymer-компонентів.
Polymer – не фреймворк, як і веб-компоненти – не фреймворк. Polymer – це обгортка та цукор. Я б ідейно її порівняв із jQuery. jQuery призначена для роботи з DOM, а Polymer — для роботи з веб-компонентами.
Polymer - тестування
Так, він тестується, і для цього створено окрему утиліту web-component-tester. Зрозумілий опис.
Пробував. Працює (при встановленні можуть виникнути проблеми з Java та Selenium).
Декілька кроків, щоб запрацювало:
-
Встановити
Написати тест, просто html файл (за замовчуванням, у папці `./test`):
Polymer - підтримка браузерами
Polymer — цукор веб-компонента, тому і підтримка браузерами така сама. Таблиці були представлені вище.
Polymer - оптимізація vulcanize
HTML imports дозволяє швидко та зручно підключити документ до іншого документа, але в цій зручності ховається і проблема продуктивності: створюється безліч http-запитів. Рішення є - з'єднати всі файли, що підключаються в один. Для цього служить утиліта vulcanize.
Polymer - starter kit
Для зручності створення проектів є утиліта Polymer Starter Kit. Після встановлення відразу доступна безліч корисної функціональності. Зібрано в коробку:
- Polymer-, Paper-, Iron-і Neon-елементи.
- Material Design-верстка.
- Роутінг з Page.js.
- Юніт тести за допомогою Web Component Tester.
- Підтримка офлайн-роботи за допомогоюPlatinum Service Worker.
- Створення білду (включаючи Vulcanize).
- ES2015-підтримка.
Polymer - альтернативи
Polymer – лише надбудова над веб-компонентами. Є й інші подібні продукти:
- bosonic.github.io;
- x-tags.org (з підтримкою IE9)
Polymer - посилання
- polymer-project.org - (eng) сайт проекту Polymer з описом, уроками.
- elements.polymer.com — (eng) офіційний каталог компонентів.
- github.com - (eng) оптимізатор Vulcanize.
- github.com — (eng) Polymer Starter Kit.
- youtube.com — (eng) Google IO 2013.
- youtube.com — (eng) Google IO 2014.
- youtube.com — (eng) Google IO 2015.
- sitepoint.com - (eng) навчання.
- aerotwist.com — (eng) трохи про оптимізацію та продуктивність.
- polymer-project.org - (eng) підтримка браузерами.
- bosonic.github.io — (eng) аналог Polymer.
- x-tags.org - (eng) аналог Polymer.
Polymer - про взаємодію з бібліотеками
- Angular 2
- Веб-компоненти будуть запроваджені в Angular 2: angularjs.blogspot.ru (eng).
- React Офіційний представник від React Sebastian Markbage говорить, що вони не будуть використовувати веб-компоненти спільно з React, тому що вони ідеологічно різні (декларативний React проти імперативних веб-компонентів): docs.google.com (eng). Однак, React та веб-компоненти сумісні, у деяких випадках є користь: youtube.com (eng).
- Backbone Зручно схрестити з готовими компонентами (Polymer, X-Tags, Bosonic). Використовуються так само, як звичайні HTML-елементи. webcomponents.org(eng).
Веб-компоненти та Polymer - приклади
Розглянемо простий приклад веб-компонента та його Polymer-реалізацію:
Приклад чистого веб-компонента:
Використовуємо на сторінці (у
З Polymer буде виглядати помітно зрозуміліше і простіше: