менше хвилини читання
Зміст
- Frontend-розробка: що це таке?
- Що таке backend-розробка?
- Full Stack-розробка: що це означає?
- Напрямки розробки
Якщо ти хоч раз цікавився світом веб-розробки, то точно чув ці три слова: Frontend, Backend і Full Stack. Звучить серйозно, правда? Але насправді все трохи простіше, ніж здається.
Frontend — це все, що ти бачиш на екрані: кнопки, меню, анімації й навіть ті милі спливаючі повідомлення. Backend — це невидимий “мозок” сайту чи додатку, який тихо працює в бекграунді, зберігає дані, перевіряє паролі та відправляє потрібну інформацію. А Full Stack — це та сама людина-оркестр, яка вміє і гарно намалювати інтерфейс, і змусити всю систему працювати як годинник.
У цій статті ми без складних термінів розберемо, що це за три світи, чим вони відрізняються і як зрозуміти, який з них твій.
Frontend-розробка: що це таке?
Frontend-розробка — це створення того, що бачить користувач у цифровому продукті: сайті, мобільному додатку, грі, CRM-системі чи будь-чому іншому. Простими словами, це вся “картинка” на екрані — від шапки сайту й банерів до кнопок, форм, таблиць і навіть маленьких анімацій.
Frontend-розробник — це та людина, яка робить інтерфейс зручним, красивим і таким, щоб із ним було приємно взаємодіяти.
Хочеш зрозуміти, як це працює? Відкрий будь-який сайт у браузері, натисни праву кнопку миші й вибери «Перегляд коду». Перед тобою з’явиться купа тексту — це й є основа сторінки. За допомогою HTML робиться структура, CSS відповідає за стиль і дизайн, а JavaScript додає сторінці “мозок” і інтерактивність.
Пояснимо коротко, що це таке:
- HTML – це мова гіпертекстової розмітки, за допомогою якої розмічають структуру веб-сторінки, задають розташування заголовків, підзаголовків, тексту, картинок тощо.
- CSS – це каскадні таблиці стилю, які відповідають за стиль оформлення html-елементів.
- JavaScript – це мова програмування, що забезпечує інтерактивність веб-сторінки та її взаємодію з користувачем.
Це — базовий набір знань, який повинен мати кожен новачок або junior frontend-розробник. Саме з цього починають усі курси для початківців. А якщо хочеться рухатися далі, можна вивчити jQuery — це такий набір готових інструментів JavaScript, який допомагає швидко та зручно працювати з HTML.
У складніші речі ми зараз заглиблюватися не будемо. Наша мета — розібратися, які взагалі бувають види розробки, чим вони відрізняються та що робить кожен спеціаліст.
Обов’язки frontend-розробника:
- Розробка інтерфейсу цифрового продукту з нуля.
- Модернізація інтерфейсу готового цифрового продукту.
- Кросбраузерна верстка, зазвичай в HTML5/CSS3.
- Адаптивна верстка.
- Написання скриптів.
- Налаштування функціоналу цифрового продукту (кнопки, слайдери, форми зворотного зв’язку, інше).
- Розробка реактивних елементів.
- Робота з існуючою архітектурою сайтів і додатків на базі віджетів.
- Програмування модулів для працюючих додатків.
Для довідки:
- Кросбраузерна верстка – це здатність сайту однаково коректно відображатися у всіх основних браузерах.
- Адаптивна верстка – це здатність цифрового продукту автоматично підлаштовуватися під розміри та орієнтацію екрану пристрою.
- Скрипт – це невелика програма або сценарій, що містить послідовність дій для автоматичного виконання завдання.
Це те, що повинен вміти кожен frontend-розробник. Але залежно від проекту список завдань може бути значно ширшим. Наприклад, іноді доводиться писати автотести, виправляти баги, працювати з дизайнерами та бекенд-розробниками в Agile-командах, а також використовувати популярні інструменти, як-от Angular (платформа для веб-додатків) чи Vue (фреймворк для створення інтерфейсів).
Щоб зрозуміти, що саме доведеться робити на конкретному проекті, найкраще подивитися реальні вакансії або напряму поспілкуватися з роботодавцем.
Досвідчені розробники знають, що в темі зовнішнього вигляду цифрового продукту часто зустрічається термін UX/UI-дизайн. Тут UI — це візуальна частина (як виглядає кнопка), а UX — це функціонал (що відбувається, коли ти її натискаєш).
За все це відповідає UX/UI-дизайнер — він придумує, як має виглядати і працювати продукт. Але оживити цю ідею, зробити так, щоб усе працювало в браузері — це вже робота frontend-розробника.
У ідеалі frontend-фахівець повинен трохи розумітися на UX/UI-дизайні. Це допомагає оцінювати роботу дизайнерів, відсіювати нереалістичні ідеї та максимально якісно реалізовувати хороші задуми.
Що таке backend-розробка?
Backend-розробка — це створення “внутрішнього світу” цифрового продукту, того, що живе на сервері та приховано від очей користувача. Саме завдяки цій частині ми бачимо інтерфейс і можемо взагалі користуватися сайтом чи додатком.
Простими словами, бекенд — це те, що обробляє дані й передає їх на фронтенд, щоб вони з’явилися на екрані у зручному вигляді.
Часто різницю між frontend і backend пояснюють на прикладі автомобіля. Фронтенд — це кузов, панель приладів, кнопки й усе те, що ми бачимо та чіпаємо. А бекенд — це двигун, трансмісія, ходова та інші механізми, які приховані під капотом, але без них машина просто не поїде. Ви ж не бачите, як працює двигун, коли тиснете на педаль газу, але від цього залежить усе.
Є й інший образ — вишивка. З лицьового боку бачимо гарний візерунок, але варто перевернути тканину, і відкривається хаотична плутанина ниток та вузлів. Так само і з будь-яким сайтом: перед нами — гарний інтерфейс, а десь “у тіні” працює сервер, який отримує наші запити, обробляє їх і відправляє результат назад.
Взаємодія фронтенда й бекенда працює по колу:
- Клієнтська частина (frontend) відправляє інформацію користувача на сервер (backend).
- Програма на сервері обробляє отриману інформацію користувача.
- Відповідна інформація повертається клієнтській стороні в зрозумілій для користувача формі.
Отже, backend-розробник — це людина, яка створює і налаштовує внутрішню “начинку” цифрового продукту. Його робота — зробити так, щоб серверна частина працювала чітко, швидко й без збоїв. Що для цього потрібно? Знати мови програмування, вміти працювати з базами даних і користуватися інструментами, які допомагають все це з’єднати в єдину систему.
Які саме мови, бази та інструменти найчастіше використовують бекенд-розробники? Давай пройдемося по головних складових, без яких серверна магія просто не запрацює.
Мови програмування для backend-розробки:
- PHP.
- Python.
- Ruby.
- С, С++, C#.
- Java.
- JavaScript / Node.
Серед мов програмування для бекенду сьогодні особливо популярний Python. Також у цій сфері використовують C, C++ і C#. Яку мову обрати — залежить від конкретного проєкту та його завдань.
Ми не будемо зараз занурюватися в усі нюанси роботи з кожною з цих мов — на це знадобилася б окрема стаття для кожної. Тут важливо зрозуміти головне: бекенд-розробник повинен вміти працювати хоча б з однією з основних мов програмування.
За таким же принципом ми розглянемо й інші ключові елементи бекенду: просто назвемо, що використовується, а вже детальніше ти зможеш розібратися сам і обрати один-два інструменти для подальшого вивчення.
Системи управління базами даних для backend-розробки:
- MySQL.
- PostgreSQL.
- SQLite.
- MongoDB.
Інструменти завантаження (деплоя) для backend-розробки:
- CI/CD.
- Kubernetes (K8s).
- Docker.
Для чого ж backend-розробнику все це знати і що саме він буде робити з цими знаннями? Давайте подивимося.
Обов’язки backend-розробника:
- Створення архітектури коду.
- Створення баз даних.
- Управління базами даних.
- Конфігурація автоматичних оновлень.
- API-розробка.
- Оптимізація функціоналу веб-ресурсу для зменшення часу завантаження.
- Оптимізація алгоритмів.
- Створення з нуля семантичного ядра.
- Доопрацювання семантичного ядра.
- Налаштування бекапу.
- Контроль функціональності внутрішньої частини цифрового продукту.
- Контроль роботи серверів.
Серед усіх термінів у бекенді варто окремо зупинитися на API. Якщо зовсім просто, API — це набір правил і способів, за якими різні програми можуть “спілкуватися” між собою та обмінюватися даними.
Ми вже знаємо, що в бекенді можуть використовуватися різні мови програмування. Так от, API потрібен, щоб, наприклад, сайт на PHP міг зрозуміти запит від сервісу, написаного на Python. Або щоб ти міг замовити піцу чи купити авіаквиток як з Android-смартфона, так і з iPhone — і все працювало без збоїв.
Бекенд-розробка зараз — популярний напрям серед молоді, яка мріє про кар’єру в IT. Таємничий світ “закулісся” цифрових продуктів навіть проник у мистецтво: іноді технічні терміни з’являються в назвах пісень, як-от у треку Backend Error від Mychraw Seraphim.
Але давай повернемося до теми. Ми вже розібралися, чим відрізняються бекенд і фронтенд. І, мабуть, у тебе вже визріло логічне питання: чи можна довірити весь процес розробки одному фахівцю, без поділу на дві спеціалізації? Так! І це вже зовсім інша історія — про Full Stack.
Full Stack-розробка: що це означає?
Насправді, розробники, здатні зробити і frontend-розробку, і backend-розробку в природі існують. Називається такий фахівець full stack-розробник. Окремо обговорювати його функції не будемо, тому що ми вже про все розповіли раніше. Простіше кажучи, full stack-розробник повинен знати все, що знає backend-розробник і frontend-розробник.
Це можна представити у вигляді наступної формули:
Backend + Frontend = Full Stack
Звучить привабливо, правда? Один фахівець, який уміє і фронтенд, і бекенд. То чому ж тоді взагалі існує поділ?
По-перше, щоб стати профі у кожній із цих сфер, потрібно вивчити та переварити величезну кількість інформації. І тут вузький спеціаліст, який копнув глибше у свою тему, зазвичай виграє в універсала, який знає “про все потроху”.
По-друге, не завжди фізично можливо об’єднати обидві ролі в одній людині. Це як запитати: навіщо потрібен контролер у транспорті, якщо ці функції можна віддати водієві? У маршрутці, можливо, ще можна — водій і керує, і бере оплату. Але уяви машиніста електрички, який має одночасно стежити за колією і перевіряти квитки. Без додаткового контролера або автоматичних турнікетів, як у метро, тут не обійтися.
Ось чому full stack-розробка частіше підходить для мобільних додатків або односторінкових сайтів, ніж для величезних, складних проектів. І до речі, у створенні мобільних додатків є свої тонкощі — наприклад, тут розрізняють нативну та кросплатформену розробку.
Види мобільної розробки:
- Нативна розробка – коли додаток розробляють окремо для Android і окремо для iOS/ iPhone.
- Кросплатформна розробка – коли розробляють один додаток, який потім адаптується під Android і iOS за допомогою компілятора.
Тепер подивимося, за допомогою яких інструментів реалізуються ці напрямки.
Мови нативної розробки:
- Додатки для Android – мови Java і Kotlin.
- Додатки для iOS/ iPhone – мови Objective-C і Swift.
Для кросплатформенної розробки використовуються фреймворки React Native, Flutter або Xamarin.
Мови кросплатформенної розробки:
- Для React Native – мова JavaScript
- Для Flutter – мова Dart.
- Для Xamarin – мова С#.
Отже, ми з тобою вже розібралися, що таке full stack, backend і frontend на прикладі найбільш знайомих більшості напрямків — веброзробки та створення мобільних додатків. Але можливостей для програмістів набагато більше, і деякі з них ми ще навіть не зачіпали.
Напрямки розробки
Окрім веброзробки та мобільних додатків, є ще два важливих напрямки — десктопна розробка та створення серверного програмного забезпечення.
Десктоп — це програми, які працюють прямо на комп’ютері без інтернету. Наприклад, ти встановлюєш гру, відеоредактор або програму для обробки звуку — і можеш запускати їх у будь-який момент, незалежно від того, підключений ти до мережі чи ні.
Серверне програмне забезпечення — це те, що працює на сервері та забезпечує функціонування внутрішньої частини цифрового продукту. Тут є безліч типів серверів і спеціалізованого софту — це окрема велика тема.
І ще один важливий поділ у розробці — замовна та продуктова.
- Замовна розробка — це коли створюєш сайт, додаток чи CRM під конкретні вимоги клієнта.
- Продуктова розробка — це створення програм, які використовує широке коло користувачів.
Якщо ти верстаєш сайти для магазинів чи ресторанів — це замовна робота. А якщо працюєш у Microsoft над новою версією Windows — це продуктова. Що краще? Тут немає універсальної відповіді: у кожного варіанту є свої плюси й мінуси. Головне — спершу добре опанувати професію, а вже потім визначати, куди рухатися далі.
А якщо хочеш дізнатися про ще одну перспективну IT-професію, радимо прочитати статтю Хто такий дата-аналітик і що він робить: зарплата, навички, інструменти — можливо, саме вона надихне тебе на наступний крок у кар’єрі.
