Привіт, я радий бачити тебе у моєму блозі.
Сьогодні я б хотів поговорити про незалежних і перевикористовуваних компонентах у VueJS.
Оскільки ми в студії використовуємо цей Фреймворк на постійній основі - ми прийшли до висновку що такі компоненти це найбільш зручний і швидкий спосіб розробки та прототипування додатків.
Такий вид компонентів дуже нагадує нам конструктор Lego.
Всі ми любили в дитинстві цю іграшку, і всі ми збирали свої конструкції з нього. Так чому б і зараз не продовжити це веселощі та не збирати так само наш User Interface !?
Основні якості
Для початку, нам варто визначити основні якості таких компонентів.
Компонент має бути без стану (stateless), а стан має бути передано батьком.
Компонент зобов'язаний виконувати лише одну задачу.
Дозволена будь-яка вкладеність компонентів.
Компоненти не повинні бути логічно перевантажені.
Давайте я розповім вам докладно про ці пункти.
Компоненти без стану
Незалежний компонент не може мати свій стан.
Щоб наочно продемонструвати вам, уявімо що у нас є список користувачів.
Для нашого рішення ми будемо використовувати 2 компоненти, UsersList і Table.
Думаю вже зрозуміло що Table це наш незалежний компонент який вміє створювати списки.
У сучасному UI різниця між таблицею з користувачами й таблицею з продуктами (наприклад) складається тільки в кількості полів в таблиці.
Тут нам на допомогу і приходять різні UI бібліотеки, як, наприклад: Vuikit, Vuetify або Buefy.
Вони містять безліч готових компонентів для використання.
І так, наш Table це універсальний компонент який приймає на вхід поля у вигляді масиву ключів зі значеннями для label і дані.
Дані ж представлені у вигляді масиву об'єктів де кожен атрибут об'єкта відповідає ключу масиву з полів.
В цьому випадку ми просто створюємо таблицю на підставі цих даних і відмальовуємо її.
За що ж відповідає наш UsersList?!
Його завдання якраз і полягає в тому, щоб зібрати дані та передати їх нашому незалежному компоненту.
Якби Table збирав дані про користувачів він би вже був пов'язаний з контекстом програми, але не міг бути перевикористаним в інших проєктах.
Підсумок: Незалежні компоненти не можуть мати стану для запобігання зв'язування контексту з бізнес-моделлю додатки.
Не дуже смарт компонент
Наші незалежні компоненти не дуже уми. Вони вміють виконувати лише 1 поставлену їм завдання.
Іноді їх завдання банально прості, а іноді комплексні.
Коли ми розробляли форми в одному з проєктів, ми обернули простий input в компонент.
Він брав в параметрах кілька опцій:
small (boolean) для зменшення розміру поля (застосовувався інший клас)
icon (string) для додавання текстової іконки в кінці поля
tooltip (object) для позиціювання та контенту вспливаючих підказок.
І безліч інших, які якимось чином видозмінили його зовнішній вигляд.
Але він завжди виконував лише одну задачу - обробляти введення користувача, форматувати ці введення для показу і передавати дані через подію input вгору батькові чи матері (подія input передає дані в директиву v-model яка була підключена до цього компоненту).
Таким чином компонент ні перевантажений логічним призначенням його в проєкті, а був його незалежною частиною.
Підсумок: Усі перевикористовувані компоненти повинні виконувати лише одну логічну задачу для спрощення їх зв'язування з контекстом додатки.
Компонент компонентом критий
Звичайно іноді перед вами стане завдання використовувати незалежні компоненти один в одному.
Оскільки нам дозволена будь-яка вкладеність компонентів - ми можемо, наприклад використовувати наш компонент ConfirmButton в компоненті з першого прикладу Table.
При такому підході ми зможемо розширити базові можливості Table, але з іншого боку та ускладнити його логіку.
Що я маю на увазі під "ускладнити".
Тепер будь-які параметри які можуть бути передані в кнопку, так само повинні бути передані в таблицю, що ускладнює контроль даних переданих в компоненти.
Для розв'язання даної проблеми, я настійно рекомендую вам використовувати slots.
Такий підхід дозволити вам, наприклад додати SubmitButton в Table не зв'язуючи їх.
Все зв'язування буде вже відбуватися в батьку (UsersList) який з легкістю може контролювати вкладеність даних.
Підсумок: Якщо ваші компоненти не залежать на додаткових параметрах і логічно вписуються в компонент - сміливо використовуйте вкладеність. В іншому випадки потрібно використовувати slots.
Четвертий пункт нашого списку добре описаний в останніх двох, і я не думаю що варто якось детально його розглядати.
Підсумки
Як ми вже зрозуміли, такі компоненти дуже легко винести в окремий пакет і використовувати в будь-якому своєму проєкті.
Покриваючи компонентами класами з css фреймворків - ми можемо створювати інтеграцію з будь-яким доступним варіантом.
А якщо ви використовуєте власне рішення - такий пакет компонентів прискорить процес розробки ваших додатків.
Дякую за увагу <3
p.s. Ця публікація є репостом оригінальної статті.
p.s.s. Це моя перша спроба у публікування, тож буду радий любій критиці.
Цікавитесь IT-шечкою?! Долучайтесь до україномовної спільноти про IT у Діскорд: UA IT Спільнота
