Модуль 32

UI-бібліотеки та дизайн-системи

Ось готовий урок, створений спеціально для тебе у стилі курсу CS50. Пристебни ремені, ми починаємо! 🚀

🎨 Тема уроку: UI-бібліотеки та Дизайн-системи

(Або чому не варто щоразу винаходити велосипед, коли треба просто доїхати до магазину)

1. 🔥 Вступ: Хаос проти Порядку

Уявіть, що ви відкриваєте власну мережу кав'ярень. У вас є точка в Києві, у Львові та в Одесі.

Ви заходите в київську кав'ярню — стіни зелені, чашки квадратні, меню написане крейдою. Їдете до Львова — стіни червоні, чашки скляні, меню на планшеті. В Одесі взагалі все фіолетове, а каву наливають у баночки з-під джему.

Питання: Це одна й та сама мережа? Чи це просто набір випадкових закладів? Як клієнт, ви відчуваєте розгубленість. Де мій улюблений лате? Чому тут він коштує дорожче і смакує інакше?

У розробці програмного забезпечення відбувається те саме.

Уявіть, що ви працюєте в команді з 10 розробників. * Василь робить кнопку "Купити" синьою і круглою. * Оксана робить кнопку "Скасувати" червоною і квадратною. * Петро взагалі використовує інший шрифт, бо йому так більше подобається.

Результат? Ваш додаток виглядає як чудовисько Франкенштейна. Користувач не розуміє, куди натискати. Підтримка коду перетворюється на пекло: щоб змінити колір бренду, вам треба знайти 50 різних файлів і виправити 50 різних шматків CSS-коду.

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

2. 🧠 Теоретична база: Від Атома до Галактики

Давайте зазирнемо "під капот". Що насправді означають ці модні слова?

1. UI-бібліотека (UI Library / UI Kit)

Це ваш "ящик з інструментами". Це набір готових компонентів (кнопок, полів вводу, перемикачів), які хтось уже написав, стилізував і перевірив за вас. * Приклади: Bootstrap, Material UI (MUI), Ant Design, Tailwind UI. * Як це працює: Замість того, щоб писати div, span і 50 рядків CSS для створення красивої кнопки, ви просто імпортуєте <Button /> з бібліотеки.

2. Дизайн-система (Design System)

Це дещо більше. Це "Конституція" вашого проєкту. Це не просто набір кнопок. Це правила гри. Дизайн-система включає: * UI-бібліотеку (інструменти). * Гайдлайни (правила): які кольори ми використовуємо? Які відступи (повітря) між елементами? Який тон ми використовуємо в текстах (дружній чи офіційний)? * Філософію бренду.

Атомарний дизайн (Atomic Design)

Це концепція, яку обов'язково треба зрозуміти інтуїтивно. Уявіть хімію: 1. Атоми: Це базові елементи, які не можна розбити (колір, шрифт, іконка, кнопка). 2. Молекули: Група атомів, що працюють разом (поле пошуку + кнопка "Знайти"). 3. Організми: Складні блоки інтерфейсу (хедер сайту, картка товару). 4. Шаблони (Сторінки): Готовий екран, зібраний з організмів.

👉 Запам’ятайте: UI-бібліотека економить час ваших рук. Дизайн-система економить час вашого мозку (вам не треба думати "який тут має бути відступ", бо система вже це вирішила).

3. 🧪 Приклади: Еволюція кнопки

Давайте подивимось, як це виглядає в коді.

Рівень 1: "Дикий Захід" (Без системи)

Ви пишете все вручну.

<!-- HTML -->
<button style="background-color: #3498db; color: white; padding: 10px 20px; border-radius: 5px; border: none;">
  Натисни мене
</button>

Проблема: Якщо дизайнер скаже змінити синій колір на зелений, а у вас таких кнопок 200 штук на сайті... вітаю, ви сьогодні не йдете додому вчасно.

Рівень 2: Компонентний підхід (UI-бібліотека)

Ви використовуєте React (або інший фреймворк) і бібліотеку, наприклад, Material UI.

import Button from '@mui/material/Button';

function MyComponent() {
  return (
    <Button variant="contained" color="primary">
      Натисни мене
    </Button>
  );
}

Запитання до вас: Звідки кнопка знає, що таке primary колір? Що станеться, якщо ми захочемо змінити цей primary колір глобально?

Відповідь: Вона бере це з "теми" (Theme). Це центральне сховище налаштувань.

Рівень 3: Дизайн-система (Theme Provider)

Ось де магія. Ви налаштовуєте "серце" вашої системи.

// theme.js (Налаштування системи)
const theme = {
  colors: {
    primary: '#ff4500', // Наш брендовий помаранчевий
    secondary: '#333333',
  },
  spacing: (factor) => `${8 * factor}px`, // Крок сітки 8px
};

// Використання
<Button sx={{ 
    bgcolor: theme.colors.primary, 
    marginTop: theme.spacing(2) // 16px
}}>
   Системна кнопка
</Button>

Чому це круто? Ви змінили #ff4500 на синій в одному файлі — і весь ваш величезний додаток миттєво перефарбувався. Це сила системи.

4. 🛠 Практична частина

Час забруднити руки кодом (або хоча б логікою).

Завдання 1: Детектив Відкрийте будь-який популярний сайт (наприклад, Facebook, Airbnb або Google). * Знайдіть 3 різні кнопки. * Перевірте через інспектор коду (F12): чи є у них спільні CSS-класи? Чи однакові у них padding та border-radius? * Мета: Побачити патерни, які використовують інженери цих компаній.

Завдання 2: "Дизайнер передумав" Уявіть, що у вас є 3 компоненти: Header, Footer і Sidebar. У кожному з них фон заданий як background: black. * Замовник каже: "Чорний надто похмурий. Давайте зробимо темно-сірий (#333)". * Завдання: Напишіть псевдокод об’єкта theme, який вирішує цю проблему, щоб не змінювати колір у трьох місцях вручну.

Завдання 3: Вибір інструменту Ви робите лендінг для продажу домашнього печива. Часу — 2 дні. Дизайн не має бути унікальним, головне — охайно. Ви робите складну банківську систему, яку будуть розробляти 5 років. * Питання: У якому випадку ви візьмете готову бібліотеку (Bootstrap), а в якому будете писати власну дизайн-систему з нуля? Чому?

Завдання 4: Міні-кейс Спроєктуйте структуру "Картки товару" (Product Card) за методом Атомарного дизайну. * Які там будуть Атоми? (Ціна, Картинка...) * Які будуть Молекули? (Наприклад, блок "Ціна + Знижка").

5. 💡 Мислення як у розробника

Як відрізнити новачка від профі (Senior) у цій темі?

  1. Синдром "Я сам":

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

  2. Consistency (Узгодженість) > Краса:

    • Розробник думає системами. Якщо дизайнер намалював відступ 17px, а в системі крок 4px (4, 8, 12, 16, 20), розробник поставить 16px або піде до дизайнера уточнити. Він не ліпить "магічні числа" (magic numbers) у код.

  3. Компроміс:

    • Використання UI-бібліотек — це завжди компроміс. Ви виграєте у швидкості, але втрачаєте у гнучкості. Якщо вам треба кнопка, яка вибухає феєрверком при натисканні, стандартний Material UI вам може заважати, а не допомагати.

6. 🧩 Підсумок

Отже, що ми сьогодні розібрали? 1. UI-бібліотеки — це ваші готові деталі, щоб будувати швидко. 2. Дизайн-системи — це правила, щоб будувати узгоджено і масштабно. 3. Атомарний дизайн — це спосіб мислення, розбиття складного на просте.

Що ви тепер вмієте? Ви більше не дивитесь на інтерфейс як на пласку картинку. Ви бачите структуру. Ви розумієте, чому розробники Google чи Apple так фанатично ставляться до гайдлайнів. Ви готові створювати інтерфейси, які легко підтримувати, навіть якщо проєкт розростеться до розмірів Facebook.

🎬 Тизер наступної серії: Тепер, коли у нас є красиві кнопки та поля вводу, виникає питання: а як зробити так, щоб при натисканні кнопки дані з'являлися в іншому місці екрану? На наступному уроці ми поговоримо про State Management (Керування станом). Готуйтеся, будемо вчити наші компоненти "спілкуватися" між собою!

Побачимось! 👋

← До списку уроків Наступний урок →