Що таке фронтенд і за що він відповідає?
Автор: Редакція Domeny.ForSale Опубліковано
Коротко: Фронтенд — це частина сайту або застосунку, яку користувач бачить і з якою взаємодіє: розташування вмісту, меню, кнопки, форми та їхня реакція на дії. У вебі його створюють переважно за допомогою HTML, CSS і JavaScript. Бекенд натомість відповідає за внутрішню роботу системи, наприклад перевірку даних для входу та збереження замовлень.
Що належить до фронтенду?
Фронтенд — це інтерфейс, тобто рівень, який дає користувачеві змогу взаємодіяти із системою. Він охоплює не лише вигляд екрана, а й поведінку елементів: відкривання меню, вибір дати, показ помилок у формі чи оновлення вмісту кошика без перезавантаження сторінки.
В інтернет-магазині до фронтенду належать, зокрема, картка товару, фотогалерея, список варіантів і кнопка «Додати до кошика». Саме фронтенд показує, що вибраний товар додано, а під час очікування відповіді сервера може відображати індикатор завантаження.
Отже, фронтенд — не просто оздоблення. Читабельність вмісту, можливість керування з клавіатури та коректна робота на телефоні не менш важливі, ніж кольори чи анімації. Гарна форма, яку неможливо надіслати або яка не пояснює помилок, усе одно залишається інтерфейсом, що працює неналежно.
Фронтенд і бекенд — де проходить межа?
Бекенд — це частина системи, що забезпечує її внутрішню роботу, зазвичай на сервері. Він реалізує правила роботи сервісу, контролює права доступу та взаємодіє з базою даних. Фронтенд передає йому запити й подає отримані результати у зрозумілому для людини вигляді.
Обидві частини часто взаємодіють через API — визначений спосіб обміну даними між програмами. Наприклад, фронтенд запитує список доступних дат і годин для візиту, а бекенд надсилає дані, на основі яких відображається календар.
Процес входу добре ілюструє розподіл відповідальності:
- Фронтенд відображає поля для адреси електронної пошти та пароля.
- Після надсилання форми дані потрапляють до бекенду через зашифроване з’єднання HTTPS.
- Бекенд перевіряє дані та вирішує, чи надати доступ.
- Фронтенд показує екран облікового запису або повідомлення про невдалий вхід.
Перевірка в браузері, чи не порожнє поле, допомагає користувачеві, але не захищає систему. Таку перевірку можна обійти, тому бекенд має самостійно перевіряти дані та права доступу. У коді фронтенду не слід розміщувати секретні ключі чи паролі: код і дані, передані до браузера, можна переглянути.
Не кожному сайту потрібен складний бекенд. Простий сайт із пропозицією та контактними даними може складатися зі статичних файлів — готових документів, які надсилають користувачеві. А от обліковий запис клієнта, історія покупок чи бронювання вже потребують додаткової серверної частини або підключення до зовнішнього сервісу.
HTML, CSS і JavaScript — три різні завдання
Основні технології фронтенду доповнюють одна одну, але кожна відповідає за своє:
| Технологія | Основна роль | Приклад |
|---|---|---|
| HTML | Визначає структуру та значення вмісту | Заголовок, посилання, поле форми |
| CSS | Описує вигляд і розташування елементів | Кольори, відступи, розташування на екрані телефона |
| JavaScript | Додає логіку та динамічну поведінку | Фільтрування товарів без перезавантаження сторінки |
HTML — це мова розмітки, а CSS — мова таблиць стилів. JavaScript — мова програмування. Простий документ із текстом, фотографіями та посиланнями може працювати без JavaScript; не кожна взаємодія потребує додаткового скрипту.
У більших проєктах також застосовують бібліотеки та фреймворки — інструменти, що надають готові механізми та спосіб організації коду. Приклади — React, Vue і Angular. Вони допомагають будувати інтерфейс із компонентів — частин, які можна використовувати повторно, як-от картка товару чи діалогове вікно, — але не замінюють знання основ.
Сучасні застосунки також можуть готувати HTML на сервері, перш ніж він потрапить до браузера. Тому межа між фронтендом і бекендом не завжди точно відповідає місцю виконання коду. Найкориснішим залишається поділ на інтерфейс користувача та внутрішню частину системи.
Чим займається фронтенд-розробник?
Фронтенд-розробник реалізує інтерфейс у коді та дбає про його роботу. Він може працювати за графічним макетом, але його завдання не зводиться до відтворення картинки. Треба врахувати й ситуації, яких статичний макет не показує: відсутність даних, довгий заголовок, помилку з’єднання чи багаторазове натискання кнопки.
До цієї роботи належать, зокрема:
- Адаптивність: пристосування розташування елементів до різних розмірів екрана.
- Доступність: забезпечення можливості користуватися сайтом також за допомогою клавіатури та програми зчитування з екрана.
- Продуктивність: зменшення кількості зайвого коду та обсягу надто великих ресурсів.
- Інтеграція з бекендом: отримання, надсилання та відображення даних.
- Тестування: перевірка функцій у різних браузерах і станах інтерфейсу.
Дизайнер інтерфейсу зазвичай визначає його вигляд і спосіб взаємодії з ним, а фронтенд-розробник втілює ці рішення у робочому сайті. У невеликих командах одна людина може поєднувати ці ролі, але проєктування та програмування потребують різних навичок.
Як почати вивчати фронтенд?
Найкраща перша вправа — невеликий сайт, наприклад сайт-візитівка послуги. Спочатку створіть за допомогою HTML заголовки, опис, список і контактні дані. Потім додайте CSS, щоб сторінку було зручно читати і на широкому, і на вузькому екрані.
Лише після цього підключіть JavaScript, наприклад для простого калькулятора вартості. Перевірте, що відбувається після введення некоректного значення та чи можна взаємодіяти з усіма елементами без миші. Така вправа показує різницю між сторінкою, яка лише має належний вигляд, та інтерфейсом, яким справді можна користуватися.
Дивіться також: Що таке GitLab?
Читайте також
