Дослідження можливостей компонентного підходу при розробці web-сайтів

Размещено на http://www.allbest.ru/

Размещено на http://www.allbest.ru/

Дослідження можливостей компонентного підходу при розробці web-сайтів

Дуніковський Стефан,

здобувач ОКР молодший спеціаліст IV курсу спеціальності «Комп'ютерні науки»

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

Переглянувши код будь-якої веб-сторінки, легко виявити, що в основному він складається з елементів <div>. Якщо не враховувати назву класів та ідентифікаторів, то складно зрозуміти який сенс несе кожен елемент - у цьому полягає слабка семантика.

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

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

Для написання окремих елементів і компонентів користувача немає єдиних правил. У різних бібліотеках та фреймворках свої правила та умови. Цю проблему і всі перераховані вище вирішує новий комплекс стандартів - веб-компоненти. Ці стандарти дозволяють створювати та багаторазово використовувати компоненти у веб-додатках. Їх використання не потребує додаткових залежностей та вивчення нових бібліотек.

Веб-компоненти розроблені Консорціумом Всесвітньої мережі (W3C). Вони дозволяють розробникам як створювати, а й ефективно описувати вже існуючі реалізації HTMLелементів. Веб-компоненти - сукупність специфікацій CustomElements, ShadowDOM, HTMLTemplatesта HTMLImports[1]. Кожна зі специфікацій є незалежною і її можна використовувати не лише як окрему одиницю, а й у сукупності з іншими.

CustomElementsвирішує проблему слабкої семантики. Ця специфікація дозволяє розробникам не тільки розширювати вже існуючі, але й створювати власні HTML-теги, а потім використовувати їх як будь-які стандартні теги, описуючи для них свої властивості та методи. CustomElementsвже мають 2 редакції специфікації v0 та v1. У останній редакції трохи змінено життєвий цикл елемента, тобто. його створення, додавання тощо.

ShadowDOMвирішує проблему конфліктів стилів, дозволяючи інкапсулювати стилізацію та внутрішню розмітку компонента, приховуючи деталі реалізації майбутнього компонента кінцевого користувача. ShadowDOMмає також дві редакції специфікації. У першій специфікації ShadowDOMбув тільки відкритий режим, який дозволяв отримати доступ до елементів за допомогою JavaScript. У другій редакції було додано ще й закритий режим, який обмежує доступ до елементів. Однією з особливостей ShadowDOMє зв'язок з LightDOM, що дозволяє безпосередньо з ShadowDOMзвернутися до всіх дочірніх вузлів елемента, які знаходяться поза цим веб-компонентом і відобразити їх у будь якому місці [2].

HTMLTemplatesвирішує проблему відсутності шаблонів, визначаючи шаблон нового елемента. Цей шаблон дозволяє зберігати деяку розмітку для сторінки, яку можна клонувати і повторно використовувати. Спочатку шаблон прихований і не є частиною DOM, він перевіряється на валідність парселом, але тільки при його ініціалізації вміст шаблону виводиться. HTMLTemplatesмає стабільну специфікацію.

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

Список використаних джерел

фреймворк додаток користувач

1. Web Components. Developer.mozilla. URL: https://developer.mozilla.org/en-US/docs/Web/API/Web components (дата звернення: 12.04.2023).

2. Сучасний підручник JavaScript. URL:https://learn.iavascript.ua/webcomponents (дата звернення: 13.04.2023).

Размещено на Allbest.ru