Фронтенд – це візитна картка будь-якого цифрового продукту. Щоб ефективно керувати проектами веб-розробки, проектним менеджерам необхідно розуміти основні принципи фронтенду. Це допоможе забезпечити якісну комунікацію з командою розробників та більше розуміти трудомісткість їх завдань.
Що таке фронт-енд
Фронтенд (фронт-енд) – це все, що бачить користувач, коли взаємодіє з веб-сайтом або веб-додатком. Це візуальна частина, яку ми сприймаємо нашими очима: дизайн кнопок, колір, розміщення елементів на сторінці, анімації, інтерактивні елементи, і т.д.
Якщо веб-сайт це будинок, то фронтенд - це фасад, інтер'єр та все, з чим ми візуально контактуємо.
До фронтенду відноситься наступне:
Веб-сайт - це набір веб-сторінок, об'єднаних спільною тематикою або належністю до однієї організації. Веб-сайти зазвичай статичні і містять інформацію, яку користувач переглядає. Наприклад поточний сайт PMtips або Linkedin, чи Rozetka.
Веб-додаток- це більш інтерактивний продукт, який дозволяє користувачам виконувати певні дії, наприклад, редагувати документи, спілкуватися або здійснювати покупки. Веб-додатки часто мають динамічний вміст, який змінюється в залежності від дій користувача. Наприклад Дія чи Монобанк.
Веб сторінка - це інтерфейс, через який користувач взаємодіє з веб-сайтом або веб-додатком. Вона дозволяє користувачеві отримувати інформацію та виконувати певні дії. Наприклад, стаття, яку ви зараз читаєте, розміщена на веб-сторінці, або просто сторінці.
З чого складається фронт-енд
Фронтенд складається з трьох основних технологій: HTML, CSS і JavaScript.
HTML відповідає за структуру розміщення контенту на сторінці. CSS відповідає за зовнішній вигляд сторінки, тобто за кольори, шрифти, розміри елементів та їх розташування. JavaScript додає інтерактивність, дозволяючи елементам сторінки реагувати на дії користувача. Ці три технології працюють разом, створюючи динамічні та привабливі веб-інтерфейси.
Розглянемо детальніше:
1) HTML (HyperText Markup Language) – це мова розмітки, яка використовується для структурування вмісту веб-сторінки. HTML це як скелет веб-сайту.
Він визначає, які елементи будуть присутні на сторінці і в якому порядку вони будуть розташовані. Тобто, де буде заголовок, де буде основний текст, де будуть розташовані параграфи, де будуть заголовки цих параграфів і так далі.
Щоб подивитися HTML структуру сторінки, необхідно:
- Клікнути правою кнопкою миші в будь-якому місці на веб-сторінці.
- У контекстному меню вибрати пункт "Переглянути код" (або "Inspect", "Inspect element", "Перевірити" тощо, залежно від браузера). Цей пункт може бути розташований внизу меню або прихований під пунктом "Додаткові інструменти".
- Відкриється панель розробника. Це спеціальний інструмент, який дозволяє переглядати і редагувати HTML, CSS і JavaScript код веб-сторінки.
- Знайдіть вкладку "Elements" (Елементи). Саме тут ви побачите HTML-код сторінки.
На скріншоті нижче показано, як це виглядає в браузері Google Chrome.
Структура HTML-документа: Ми можемо чітко побачити основні елементи HTML-структури: html, head, body. Вони визначають загальну структуру веб-сторінки, тобто її скелет. Індивідуальні елементи: Всередині тегу body розташовані різні елементи, такі як nav, main, footer - вони відповідають за навігацію та основний вміст сторінки. Тобто, HTML це як скелет сторінки.
2) CSS (Cascading Style Sheets) – це мова стилів, яка використовується для оформлення веб-сторінок.
Якщо HTML визначає структуру контенту (заголовки, параграфи, списки тощо), то CSS відповідає за зовнішній вигляд: кольори, шрифти, розміри елементів, їхнє розташування на сторінці і багато іншого.
CSS-правила застосовуються до елементів HTML за допомогою селекторів. Селектори дозволяють вибрати конкретні елементи або групи елементів на сторінці, до яких потрібно застосувати стиль.
Щоб побачити CSS на сторінці, необхідно:
- Клікнути правою кнопкою миші на елементі, стиль якого вас цікавить.
- Вибрать "Переглянути код" (або "Inspect", "Inspect element", "Перевірити" тощо, залежно від браузера).
- Знайти вкладку "Styles" (Стилі), у вікні, яке відкриється, ви побачите всі стилі, що застосовуються до вибраного елемента.
На картинці в дереві HTML-елементів обраний елемент. Вкладка "Styles"вкладка показує всі стилі CSS, які застосовуються до вибраного елемента. Під стилями мається на увазі набір правил, які визначають зовнішній вигляд елементів на веб-сторінці. (колір, розмір шрифта, форма і т.п.). Тобто спочатку розробник робить скелет документа (HTML), а далі одягає цей скелет в одяг (CSS).
3) JavaScript (JS)– це мова програмування, яка додає інтерактивність веб-сторінкам.
За допомогою JavaScript можна створювати динамічні елементи, обробляти події користувача (наприклад, кліки мишкою) і взаємодіяти з сервером.
JavaScript дозволяє створювати анімацію, слайдери, меню, форми і багато іншого, що робить веб-сайт більш привабливим і зручним для користувача. Також, за допомогою JavaScript можна оновлювати вміст сторінки без перезавантаження, створюючи більш плавний користувацький досвід.
Щоб перейти до JavaScript необхідно:
- Клікнути правою кнопкою миші на елементі, стиль якого вас цікавить.
- Вибрать "Переглянути код" (або "Inspect", "Inspect element", "Перевірити" тощо, залежно від браузера).
- Знайти вкладку "Source" (Джерела), у лівій частині вікна ви побачите список файлів, пов'язаних зі сторінкою. Розгорніть папки, щоб знайти файли з розширенням .js - це якраз JavaScript файли.
Розробник спочатку зробив скелет для документа (HTML), далі вдягнув цей скелет в одяг (додав CSS), і вже в кінці зробив так, щоб цей скелет рухався (наклав javascript).
З усього вищеописаного треба запам'ятати наступне:
HTML створює структуру сторінки, CSS оформляє цю структуру, надаючи їй зовнішній вигляд, а JavaScript додає інтерактивність та динаміку.
Хто такий фронт-енд розробник
Фронтенд-розробник - це фахівець, який займається створенням того, що користувач бачить і з чим взаємодіє у веб-сайті, веб-додатку. Це як художник і будівельник одночасно: він не тільки малює красиву картину (СSS), але й будує міцну конструкцію (HTML), яка працює бездоганно.
Основні інструменти в арсеналі фронтенд-розробника - це те, що ми розібрали вище. Розробник використовує HTML для створення структури сторінки, CSS - для її оформлення та JavaScript для інтерактивності та динамічних елементів.
Окрім HTML, CSS та JavaScript існують фреймворки та бібліотеки, які активно використовуються фронтенщики (неформальна назва фронт-енд розробників).
Фреймворк та бібліотека
Щоб фронтенд розробник швидше працював та не "вигадував велосипед" існують такі поняття як фреймворк та бібліотека.
Фреймворк – це готовий каркас для веб-розробки, тобто набір інструментів, які спрощують процес створення веб-додатків. Працюючи з певним фреймворком, розробник не пише код з нуля, а вже бере певний готовий шматок, який йому потрібен і додає до того, що в нього вже написано. Це дозволяє розробникам економити час і не видумувати те, що все придумано.
До прикладу, розробнику треба створити кнопку, він може не писати код з нуля, для цієї кнопки, а взяти вже готовий компонент з фреймворку та налаштувати його під свої потреби.
Популярні фреймворки фронтенду для веб-сайтів - React, Angular, Vue.js.
Статистика каже, що найбільш популярний фреймворк React (40-45%), далі Angular (20-25%), на третьому місці - Vue.js (15-20%). Відповідно до цієї статистики, у ваших командах скоріш за все будуть фронтенщики працюючі на реакті, та фронтенщики-ангулярщики.
Бібліотека - це набір готових функцій і інструментів, які розробник може використовувати у своєму проекті. Уявіть, що це інструментальний ящик, в якому є різні інструменти для виконання конкретних завдань. На відміну від фреймворка, який надає готовий каркас для всього проекту, бібліотека пропонує окремі інструменти, які ви можете використовувати за потреби.
Замість того, щоб писати багато рядків коду для зміни стилю елемента розробник використовує елементи з необхідних йому бібліотек. Це дозволяє фокусуватися на створенні унікальних функціональних можливостей, не витрачаючи час на вирішення рутинних завдань.
Розуміння основ фронтенду є невід'ємною частиною роботи будь-якого проектного менеджера. Знання того, що таке HTML, CSS і JavaScript, як вони взаємодіють між собою і які інструменти використовують розробники, дозволить вам ефективніше спілкуватися з командою, оцінювати трудомісткість завдань та краще розуміти, що відбувається "під капотом" веб-додатку.
Більше технічних статтей:
Що таке API простими словами. Посібник для нетехнічних спеціалістів
Cередовища розробки програмного забезпечення: Від кодування до релізу
Тестування ПЗ: Все, що ви хотіли знати, але боялися запитати
Домен, хостинг та DNS що це і навіщо потрібно? Простими словами для нетехнічних спеціалістів
Ще немає коментарів