Введення в веб-компоненти і polymer

Сучасні веб-додатки складні в проектуванні і розробці. З огляду на набір використовуваних інструментів, засобів тестування, бібліотек / плагінів, процес розробки стає все більш складним. Оскільки з часом додаток розростається, стає все важче підтримувати код і виробляти поліпшення.

Наприклад, давайте поглянемо на зовнішній інтерфейс декількох популярних сайтів:

Інструменти розробника Chrome не може повною мірою відобразити складність вихідного коду, але це, безумовно, дає уявлення про складну DOM структурі сучасних веб-додатків. Це багато в чому пов'язано з надмірним використанням div (ів) і span (ів) в розмітці, що робить код більш громіздким. Було багато дискусій про семантичному значенні тегів HTML5, але їх широке застосування недоцільно з двох причин:

1. На наших веб-сторінках використовується занадто багато компонентів, робота яких вимагає переробки для взаємодії з семантичною структурою. Для взаємодії з ними, ми використовуємо класи, id або атрибути.
2. Існуючий список семантичних тегів не покриває всі наші компоненти, які використовуються на сторінках. В результаті, ми повертаємося до традиційних тегам, таким як div або span.

Рішення семантичної проблеми

W3C пропонує вирішувати дану проблему, використовуючи Веб-Компоненти. Вони являють собою набір технічних вимог, які дозволяють розробникам створювати багаторазові компоненти. Веб-Компоненти змушують нас відійти від традиційного підходу веб-дизайну, істотно змінюючи спосіб, яким ми будуємо і замислюємося веб-додатки.

Кожен компонент розташований у власному блоці з відповідним стилем і логікою поведінки. Дані компоненти можуть використовуватися не тільки в єдиному веб-додатку, а й поширюватися в мережі для використання іншими розробниками.

Що таке Polymer?

Не всі браузери підтримують перераховані вище можливості. Однак, завдяки бібліотеці Polymer, розробленої в Google, ми можемо це виправити. Polymer забезпечує набір Polyfills, який дозволяє нам використовувати веб-компоненти в несумісних браузерах:

1. Дозволяє створювати елементи з своїми назвами. Ними можна поділитися з іншими розробниками;
2. У кожного елемента є. власний шаблон;
3. Дозволяє використовувати набір готових UI елементів для використання в проекті.

установка Polymer

Рекомендуємо встановлювати Polymer (v0.3.4) через Bower. Bower це диспетчер пакетів, для управління скриптовими залежностями.

Припустимо, що ви налаштували папку проекту за допомогою файлу bower.json. Тепер ви можете встановити останню версію Polymer:

Це дозволить встановити бібліотеку Polymer і платформу Polyfills всередині папки bower-components.

Примітка. --save додасть пакет як залежність в файл bower.json. Це корисно, коли ви хочете оновити пакети, які використовуються в проекті.

Після установки Polymer, ви можете почати створення файлу index.html в кореневій папці проекту.

Додайте platform.js в , і ви зможете використовувати настроюються елементи в ваших документах.

Використання власних елементів

Використання власних елементів в розмітці, як правило, включає наступні етапи:

1. Завантажте пакет через Bower;
2. Імпорт відповідний файл .html;
3. Використовуйте елемент розмітки в будь-якому місці документа.

У цьому прикладі ми будемо експериментувати з налаштованим елементом і використовуємо його в нашій HTML сторінці. Ви можете встановити paper-input безпосередньо через Bower, і він буде автоматично завантажувати інші необхідні залежності.

Перед тим, як використовувати елементи на вашій сторінці, вам потрібно імпортувати відповідний .html файл:

Тепер ви можете використовувати елемент paper-input в будь-якому місці всередині тега :

На сторінці компонентів є повний список атрибутів, які можуть бути використані з paper-input.

Мені подобається варіант Floating Label. Всі ці чудові можливості впроваджуються шляхом додавання того чи іншого атрибута:

стилізація елементів

Наприклад, для оформлення елемента paper-input. ми можемо скористатися ім'ям тега в якості селектора:

Або за назвою класу:

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

На щастя, Polymer надає псевдо-елемент. shadow. або / deep / с допомогою якого можемо працювати з тіньовим DOM-му.

Наприклад, ви хочете перевизначити синій колір на зелений.

Розглянемо тіньової DOM, і знайдемо клас .focusedColor для зміни кольору.

Селектор paper-input :: shadow буде відповідати # shadow-root в межах елемента paper-input. тому наш селектор буде виглядати так:

Аналогічно, комбінатор / deep / може повністю ігнорувати всі тіньові кордону для досягнення цільового елемента:

браузерна сумісність

Polymer спрямований. на підтримку вічнозелених браузерів (браузерів, з авто-оновленням).

Apple видалила Shadow DOM з Safari, це означає, що навіть за допомогою. shadow і / deep / не можу достукатися до елементів для їх стилізації.

Однак остання версія Safari (v7.0.4) дозволяє звертатися до Shadow DOM елементів на зовнішньому рівні, за допомогою стандартних CSS селекторів.

Занадто багато HTTP запитів?

Важко уявити, що використання простого елемента, як paper-input призведе до чималої кількості HTTP запитів!

Все через принципів роботи Polymer, який завантажує безліч модулів, що працюють незалежно один від одного.

Використання цих елементів в крупно-масштабом веб-додатку може різко знизити продуктивність веб-сайту. Саме тому творці Polymer написали Vulcanize. Vulcanize вбудовує HTML імпорт, оптимізує залежності і виводить результат, який використовує менше запитів.

Але це, так би мовити, не повинно заважати нам використовувати Polymer елементи в наших веб-додатках.

5 останніх уроків рубрики "HTML і DHTML"

При написанні або налагодження PHP скриптів ми частенько користуємося функціями var_dump () і print_r () для виведення попередніх даних масив і об'єктів. У цьому пості я б хотів розповісти вам про функції var_export (), яка може перетворити масив в формат, придатний для PHP коду.

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

Створення шаблону для листа не така вже й проста справа. Пропонуємо вам підбірку з 30 сайтів, де можна безкоштовно скачати подібні шаблони на будь-який смак.

Наприклад у вас є поле пошуку, яке обробляється при кожному натисканні клавіші клавіатури. Якщо хтось захоче написати слово Windows, AJAX запит буде відправлений за наступними фрагментами: W, Wi, Win, Wind, Windo, Window, Windows. Проблема ?.

Підбірка з 15 нових сайтів, де можна скачати безкоштовні фотографії для заповнення своїх сайтів.

Легше навчитися оптимізувати свій код, ніж вивчати десятки нових з додатковими милицями від Google =) Ця статися не для новачка, так як для великих проектів, а дідок давно вже напрацював особисту бібліотеку

Айдар Авхадіев

За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!