УДК 004.02

МЕТОДИ СПРОЩЕННЯ ПРОЦЕСУ СТВОРЕННЯ БІБЛІОТЕК КОРИСТУВАЦЬКИХ ІНТЕРФЕЙСІВ З ВИКОРИСТАННЯМ ФРЕЙМВОРКУ VUEJS

Погребняк Д.А. науковий керівник Кириченко В. В.

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

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

Для побудови сучасного складного веб-додатку використовуються компонентно-орієнтовані фреймворки, такі як React, Angular, Vue, Svelte. Такі фреймворки надають можливість створювати веб-додатки з використанням компонентів. Компоненти – це код, який займається малюванням та обробкою логіки роботи елементу користувацького інтерфейсу. Наприклад, компонент таблиці відповідальний за: відображення даних у вигляді таблиці; надання графічного інтерфейсу для сортування, фільтрування та редагування даних; надання програмного інтерфейсу для передачі даних використовуючи властивості («props»); створення подій («events») для реагування на дії користувача, наприклад натискання кнопки завантаження наступної сторінки даних.

Найбільш актуальними є наступні підходи до створення веб-додатків CSR, SSR та SSG [1]. В випадку SSR та SSG компоненти спочатку вимальовуються на сервері, де немає API браузера, тому під час написання коду оптимізованого під SSR потрібно бути уважним, щоб компоненти використовували API браузерів тільки коли код виконується на клієнті.

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

Окрім цього, бібліотеки компонентів дозволяють створювати єдиний та уніфікований стиль користувацького інтерфейсу для всього веб-додатку. Це дозволяє забезпечити консистентність та зручність взаємодії користувача з додатком.

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

Варто зазначити про важливість характеристик доступності бібліотеки (підтримка screen read-ів, або керування з клавіатури тощо), адаптивності під різні екрани та пристрої, підтримка багатьох мов тощо.

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

Один з найпопулярніших фреймворків для створення бібліотек компонентів – Bootstrap. Він пропонує готові компоненти, які легко використовувати та налаштовувати. Однак, одним з недоліків Bootstrap є велика кількість CSS-класів, які не завжди потрібні для конкретного проекту. Це може зробити код важким для розуміння.

Також варто згадати про Vuetify – бібліотеку компонентів, яка спеціалізується на інтеграції з фреймворком VueJS. Вона пропонує готові компоненти та стилі, які добре інтегруються з іншими компонентами фреймворка VueJS. Однак, одним з недоліків Vuetify можна відзначити велику кількість залежностей, які можуть зробити її важкою для розгортання та підтримки. До недоліків також можна віднести використання Material Design, який важко налаштовувати під потреби проектів.

Існує безліч інших рішень, наприклад Quasar, NaiveUI, VuesticUI, зі своїми плюсами та мінусами, але всі ці бібліотеки зроблено різними способами. Це значно ускладнює покращення бібліотек іншими людьми. Також при побудові нової бібліотеки кожному автору окремо потрібно вирішувати по-своєму [3] проблеми недостатньої зміни зовнішнього вигляду, помилки при SSR та TreeShaking. Також не всі такі бібліотеки відповідають стандартам доступності (accessibility).

Зазвичай код на JavaScript проходить так званий шаг збірки. Використовуючи спеціальні інструменти збірки такі як Webpack або Vite, код трансформується перед тим як потрапити до веб-браузеру. Також ці інструменти збірки займаються компонуванням CSS та SCSS, переводом мови TypeScript у JavaScript тощо. Зазвичай бібліотеку компонентів підключають уже в скомпільованому вигляді. Якщо говорити про методи побудови бібліотек для VueJS, то можна виділити такі основні способи опису компонентів: використання Single File Component синтаксису, використання JSX, використання RenderFuction. Для написання стилів можуть використовувати SCSS, CSS, CSSR. Для написання логіки також використовуються різни стилі: Options API, Composition API, Script Setup тощо. Як бачимо, єдиного способу немає.

Рішенням проблеми є створення уніфікованого способу для побудови бібліотек компонентів використовуючи інструменти збірки. Для зручності написання коду у стандартному Single File Components синтаксису з використанням SCSS та мови TypeScript – саме те, що використовують під час розробки веб-додатків, це дозволить людям робити вклад у бібліотеку не вивчаючи новий синтаксис. Розв'язання проблеми є створення фреймворку для побудови UI бібліотек з такими можливостями:

• Інструмент, що створює Vue бібліотеку з нульовою конфігурацією;
• Узагальнення правил та шаблонів для уникнення проблем з SSR;
• CSS TreeShaking у ESM форматі;
• Вбудоване середовище для тестування бібліотеки у різних середовищах;
• Надання інструментів для побудови демонстрацій можливостей компонентів, що корисно для візуального тестування та розробки;
• Надання інструмент для створення документації.

Таким чином можна буде просто створити проєкт і почати розробляти бібліотеку, без зайвих та довгих налаштувань.

СПИСОК ВИКОРИСТАНИХ ДЖЕРЕЛ

1. Порівнюємо способи генерації сторінок: CSR, SSR, SSG, ISR. Гайд на основі стеку React [Електронний ресурс] – Режим доступу до ресурсу: https://dou.ua/forums/topic/41585/.
2. The Ultimate List of 7 Perfect Vue 3 UI Libraries for every project [Електронний ресурс] – Режим доступу до ресурсу: https://dev.to/ranaharoon3222/the-ultimate-list-of-7-perfect-vue-3-ui-libraries-for-every-project-1l39.
3. Creating a UI Framework: A Story of Blood, Sweat and Tears... of Joy! [Електронний ресурс] – Режим доступу до ресурсу: https://www.outsystems.com/blog/posts/creating-ui-framework/.