Фронтенд (frontend) - це все, що бачить користувач на сайті чи у веб-застосунку: дизайн, кнопки, меню, анімації. Він складається з трьох технологій: HTML, CSS і JavaScript. Пояснюю простими словами, для проектних менеджерів.
Фронтенд - це візитна картка будь-якого цифрового продукту. Щоб ефективно керувати проектами веб-розробки, проектному менеджеру важливо розуміти його основні принципи. Це допоможе краще спілкуватися з розробниками та реалістичніше оцінювати трудомісткість завдань.
Що таке фронт-енд
Фронтенд (англ. frontend, ще пишуть «фронт-енд») - це все, що бачить користувач і з чим він взаємодіє на веб-сайті чи у веб-застосунку. Це візуальна частина: дизайн кнопок, колір, розташування елементів на сторінці, анімації та інтерактивні елементи.
Якщо сайт - це будинок, то фронтенд - це фасад, інтер'єр і все, з чим ми контактуємо візуально.
Де застосовують фронтенд: сайт, веб-застосунок, веб-сторінка
- Веб-сайт - набір веб-сторінок, об'єднаних спільною темою чи належністю до однієї організації. Сайти переважно інформаційні: користувач читає й переглядає. Наприклад, сайт компанії, блог чи сайт-візитівка.
- Веб-застосунок (інша назва - веб-додаток) - інтерактивніший продукт, у якому користувач виконує дії: редагує документи, спілкується, купує. Його вміст змінюється залежно від дій користувача. Наприклад, Google Docs, Trello чи Jira.
- Веб-сторінка - окрема сторінка, через яку користувач взаємодіє із сайтом чи застосунком. Наприклад, стаття, яку ви зараз читаєте.
З чого складається фронт-енд
HTML (HyperText Markup Language) - це мова розмітки, якою структурують вміст веб-сторінки. HTML це скелет сайту. Він визначає, які елементи є на сторінці й у якому порядку вони розташовані: де заголовок, де основний текст, де абзаци та їхні підзаголовки.
Як подивитися HTML-структуру сторінки:
- Клікніть правою кнопкою миші в будь-якому місці веб-сторінки.
- У меню виберіть «Переглянути код» (або «Inspect», «Inspect element», «Перевірити», залежно від браузера). Цей пункт може бути внизу меню або під пунктом «Додаткові інструменти».
- Відкриється панель розробника - інструмент, у якому можна переглядати й редагувати HTML, CSS і JavaScript сторінки.
- Знайдіть вкладку «Elements» («Елементи»). Саме там ви побачите HTML-код.
На скриншоті нижче показано, як це виглядає в браузері Google Chrome.
Тут видно основні елементи HTML-структури: html, head, body. Вони задають каркас сторінки. Усередині body розташовані елементи nav, main, footer, які відповідають за навігацію та основний вміст. Тобто HTML це скелет сторінки.
CSS: зовнішній вигляд
CSS (Cascading Style Sheets) - це мова стилів, якою оформлюють веб-сторінки. Якщо HTML визначає структуру контенту (заголовки, абзаци, списки), то CSS відповідає за вигляд: кольори, шрифти, розміри та розташування елементів.
CSS-правила застосовуються до HTML-елементів за допомогою селекторів. Селектор дозволяє вибрати конкретний елемент або групу елементів, до яких потрібно застосувати стиль.
Як побачити CSS на сторінці:
- Клікніть правою кнопкою миші на елементі, стиль якого вас цікавить.
- Виберіть «Переглянути код» (або «Inspect», «Inspect element», «Перевірити», залежно від браузера).
- Знайдіть вкладку «Styles» («Стилі»). У вікні, що відкриється, ви побачите всі стилі вибраного елемента.
На картинці в дереві HTML-елементів вибрано один елемент. Вкладка «Styles» показує всі CSS-правила, які до нього застосовуються: колір, розмір шрифту, форму тощо. Тобто спочатку розробник робить скелет документа (HTML), а потім «одягає» його в стилі (CSS).
JavaScript: інтерактивність
JavaScript (JS) - це мова програмування, яка додає веб-сторінкам інтерактивність. З його допомогою створюють динамічні елементи, обробляють дії користувача (наприклад, кліки мишкою) і взаємодіють із сервером.
JavaScript дозволяє робити анімацію, слайдери, меню, форми та багато іншого. Також він може оновлювати вміст сторінки без перезавантаження, завдяки чому сайт працює плавніше й зручніше.
Як знайти JavaScript на сторінці:
- Клікніть правою кнопкою миші в будь-якому місці сторінки.
- Виберіть «Переглянути код» (або «Inspect», «Inspect element», «Перевірити», залежно від браузера).
- Знайдіть вкладку «Sources» («Джерела»). Ліворуч ви побачите список файлів, пов'язаних зі сторінкою. Розгорніть папки й знайдіть файли з розширенням .js - це і є файли JavaScript.
Розробник спочатку зробив скелет для документа (HTML), далі вдягнув цей скелет в одяг (додав CSS), і вже в кінці зробив так, щоб цей скелет рухався (наклав javascript).
Головне запам'ятати: HTML створює структуру сторінки, CSS оформлює її, а JavaScript додає інтерактивність і динаміку.
Хто такий фронт-енд розробник
Фронтенд-розробник - це фахівець, який створює те, що користувач бачить і з чим взаємодіє на сайті чи у веб-застосунку. Це художник і будівельник в одній особі: він не лише малює красиву картину (CSS), а й будує міцну конструкцію (HTML), яка працює бездоганно.
Основні інструменти фронтенд-розробника - HTML, CSS і JavaScript. Крім них, він використовує фреймворки та бібліотеки. Неформально таких розробників називають фронтендниками.
Фреймворк та бібліотека
Щоб розробники працювали швидше й не «вигадували велосипед», існують фреймворки та бібліотеки.
Фреймворк - це готовий каркас для веб-розробки: набір інструментів, які спрощують створення веб-застосунків. Розробник не пише код із нуля, а бере готовий шматок і додає його до того, що вже написано. Так він економить час і не вигадує те, що вже придумано. Наприклад, щоб створити кнопку, можна не писати код із нуля, а взяти готовий компонент із фреймворку й налаштувати його під свої потреби.
Популярні інструменти фронтенду - React, Angular і Vue.js. Найпопулярніший з них React, за ним ідуть Angular і Vue.js. Формально React це бібліотека, а Angular - фреймворк, але на практиці їх часто називають однаково. Точні відсотки змінюються щороку, тому актуальні дані дивіться в щорічному опитуванні розробників Stack Overflow (додай посилання). Тож у ваших командах, найімовірніше, будуть фронтендники, які працюють на React, і ті, хто працює на Angular.
Бібліотека - це набір готових функцій та інструментів, які розробник використовує в проекті. Уявіть інструментальний ящик з інструментами для конкретних завдань. На відміну від фреймворка, який задає каркас для всього проекту, бібліотеку беруть частинами, за потреби.
Замість того щоб писати багато коду для зміни стилю елемента, розробник бере готові елементи з потрібних бібліотек і зосереджується на унікальних можливостях продукту, а не на рутині.
Чим фронтенд відрізняється від бекенду
Фронтенд - це те, що користувач бачить. Бекенд - це те, що відбувається за лаштунками: сервер, база даних і логіка, які обробляють запити. Наприклад, коли ви натискаєте «Увійти», кнопку й форму показує фронтенд, а перевіряє ваш пароль і шукає акаунт бекенд. Між собою вони спілкуються через API. Про це я писала тут: "Що таке API простими словами. Посібник для нетехнічних спеціалістів"
Що фронтенд означає для проектного менеджера
- Макети. Фронтендники верстають за дизайном, часто з Figma. Нечіткий макет означає зайві правки.
- Оцінка. Складність залежить від кількості сторінок, станів елементів (помилка, завантаження, порожній список) і адаптивності під різні екрани.
- Браузери та пристрої. Сторінка має однаково працювати в різних браузерах і на різних екранах. Це впливає на тестування.
- Залежність від бекенду. Часто фронтендники чекають на API від бекенд-розробників, і PM координує цей процес.
- Спільна мова з командою. Розуміння HTML, CSS і JavaScript допомагає ставити зрозумілі задачі й вести діалог.
Питання, які часто ставлять про фронтенд (FAQ)
1. Що таке фронтенд простими словами?
Фронтенд - це видима частина сайту чи застосунку: те, що користувач бачить на екрані й чим користується. Це дизайн, кнопки, меню, форми й анімації.
2. З яких технологій складається фронтенд?
Основних технологій три: HTML (структура), CSS (оформлення) і JavaScript (інтерактивність). Окрім них, розробники використовують фреймворки та бібліотеки, наприклад React, Angular чи Vue.js.
3. Чим фронтенд відрізняється від бекенду?
Фронтенд відповідає за те, що бачить користувач, а бекенд - за сервер, базу даних і логіку, які працюють за лаштунками. Вони обмінюються даними через API.
4. Чи потрібно проектному менеджеру вміти програмувати?
Писати код не обов'язково, але розуміти основи варто: що таке HTML, CSS і JavaScript, чим фронтенд відрізняється від бекенду. Це допомагає оцінювати трудомісткість і спілкуватися з командою однією мовою.
Розуміння основ фронтенду - невід'ємна частина роботи проектного менеджера. Коли ви знаєте, що таке HTML, CSS і JavaScript, як вони взаємодіють і які інструменти використовують розробники, ви ефективніше спілкуєтеся з командою, краще оцінюєте трудомісткість і розумієте, що відбувається «під капотом» веб-застосунку.
Більше технічних статтей
- Що таке API простими словами. Посібник для нетехнічних спеціалістів
- Cередовища розробки програмного забезпечення: Від кодування до релізу
- Тестування ПЗ: Все, що ви хотіли знати, але боялися запитати
- Домен, хостинг та DNS що це і навіщо потрібно? Простими словами для нетехнічних спеціалістів
- Словник технічних термінів для проєктного менеджера: 22 поняття простими словами
Відео-уроки:
Основи front-end для нетехнічних спеціалістів
Основи back-end для нетехнічних спеціалістів
ПОВНИЙ КУРС З ПРОЕКТНОГО МЕНЕДЖМЕНТУ | МЕТОДИЧКИ ДО КУРСУ
Ще немає коментарів