Чим відрізняється фронтенд-і бекенд-розробка

Frontend та backend — різні, але дуже міцно пов'язані між собою напрями веб-розробки. Не будемо говорити, що між ними виникає плутанина, бо здебільшого це не так. Однак пропонуємо все ж детальніше розглянути ці поняття, їх особливості, а також принципи взаємодії. Якщо ви тільки починаєте свій шлях до IT і вибираєте оптимальний напрямок навчання, наступна інформація — для вас!

Що таке фронтенд-розробка

Фронтенд-розробка — це комплекс робіт зі створення інтерфейсів сайтів і додатків.

Все, що ви бачите, коли відкриваєте сайт або запускаєте програму на смартфоні, - це фронтенд. Це і форматування тексту, і розташування блоків, і кнопки з банерами, і поля для введення тексту, і багато іншого. Власне, ви прямо зараз дивитеся на сторінку, зверстану фронтендником.

Звичайно, фронтенд - це не розробка сторінки з нуля. Макет розробляє дизайнер, роботою керує менеджер проекту або тимлід, до завдання можуть підключатися UX-аналітики та, звичайно ж, бекенд-розробники. Але про останні трохи пізніше.

Хочете подивитись роботу фронтендера, скажімо так, зсередини? Відкрийте будь-який сайт та натисніть F12 (працює у більшості браузерів). Відкриється вікно з HTML-кодом сторінки, CSS-стилями та іншими елементами.

Саме цей код «бачить» браузер і відповідно до нього малює сторінку. Будь-який блок за потреби можна перемістити, видалити, додати новий, внести коригування тощо.

Компоненти фронтенд-розробки

Frontend-розробка за великим рахунком тримається на трьох «слонах»:

• HTML — мова розмітки, за допомогою якої створюється структура будь-якої сторінки, її "кістяк". HTML-код містить заголовки, абзаци, списки, пункти меню, лінки на зображення та багато іншого. При цьому HTML практично не використовується для стилізації.
• CSS — це каскадні таблиці стилів, які потрібні для стилізації елементів сторінки. Саме за допомогою CSS можна зручно працювати зі шрифтами, розмірами окремих блоків та зображень, робити верстку адаптивною та багато іншого.
• JavaScript – мова програмування, за допомогою якої можна «оживити» сторінку. Наприклад, змусити сайт реагувати на певні дії користувача та виконувати задані команди. Сайти з JavaScript більш динамічні, функціональні та чуйні.

Володіючи HTML, CSS та JavaScript, ви вже можете називатися фронтенд-розробником та брати в роботу цікаві проекти різної складності. Якщо вас цікавить саме цей напрям, рекомендуємо курс Wezom Академії «Frontend-розробка 2022. Junior-верстальник». Цього року ми суттєво доопрацювали, оновили та оптимізували один із найпопулярніших курсів Академії. Рекомендуємо!

Що таке бекенд-розробка

Backend-розробка- Це розробка логіки роботи внутрішньої частини сайту чи сервера.

Для кращого розуміння наведемо приклад!

Ви заходите на сайт інтернет-магазину, переглядаєте товари, вибираєте потрібну позицію, додаєте кошик, заповнюєте необхідні поля та натискаєте кнопку «Підтвердити замовлення». По суті, весь цей час ви маєте справу з фронтендом — видимою частиною сайту. Але після того, як ви натиснули кнопку, інформація відправляється на сервер, і ось тут уже в хід вступає бекенд. Надходить інформація про замовлення, дані вносяться до бази, відповідні фахівці отримують інформацію про те, що товар замовлений, тощо. Усього цього користувач вже не бачить, це і є backend. А от коли користувач отримує повідомлення «Замовлення оформлений» - це знову фронтенд.

Якщо говорити максимально коротко, то бекенд це все, що відбувається на сервері, а не на сайті або в додатку.

Компоненти бекенд-розробки

Самі принципи бекенда досить суттєво відрізняються від фронтенду. Розробник повинен вміти працювати як мінімум з однією з популярних мов програмування: Ruby, PHP, Python або Java. Володіння кількома мовами буде лише перевагою.

Крім того, розробник зобов'язаний вміти використовувати системи управління базами даних: MySQL, SQLite, PostgreSQL, MongoDB і т.д. Плюс інструменти деплою, такі як CI/CD, Docker або Kubernetes.

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

Якщо вам здалося, що бекенд складніший за фронтенд, то вам зовсім не здалося. Це дійсно так, тому багато бекендерів — це вихідці з фронтенду, які вирішили спробувати себе в чомусь новому. Звичайно ж, можна почати свій шлях до IT саме з бекенда. Але вам у будь-якому випадку доведеться паралельно вивчати і фронтенд, тому що напрямки сильно взаємопов'язані. А вчити одночасно frontend і backend — завдання безперечно з простих. І якщо вас цікавить саме наша думка, радимо починати з фронтенду.

Як взаємодіють фронтенд та бекенд

У наведеному вище прикладі ми коротко пояснили, як саме відбувається взаємодія фронтенду та бекенду на практиці. Але давайте все ж таки заглибимося в це питання і розберемо процес детальніше.

Взаємодія у класичному варіанті відбувається так:

1. Користувач взаємодіє з сайтом або програмою через клієнтську частину (frontend), після чого інформація йде на сервер (backend).
2. Програма на серверній стороні обробляє вхідні дані.
3. Сервер направляє оброблену інформацію знову на клієнтську сторону у зручній та зрозумілій для користувача формі.

Повторимося, що хоча фронтенд і бекенд - це різні напрямки веб-розробки, вони тісно пов'язані між собою. А тому розробникам потрібно хоча б на базовому рівні розуміти, як працюють їхні колеги, щоб не припускатися помилок і не доставляти незручностей тим, хто перебуває «з іншого боку» користувача-інтерфейсу. Більше того, сьогодні навіть для дизайнерів інтерфейсів гарним тоном вважається розуміння принципів фронтенду та бекенду.

Давайте для більшої наочності розглянемо ще кілька форматів взаємодії фронтенду та бекенду:

1. Дії користувача формують HTTP-запит, який йде не сервер. Сервер у свою чергу знаходить необхідну інформацію, інтегрує її у спеціальний шаблон, а далі повертає її знову у форматі HTML-сторінки.
2. Запит формується та надсилається за допомогою JavaScript, який завантажений у веб-браузер. Відповідь у своїй надходить у форматі JSON чи XML.
3. Всі запити обробляються без потреби оновлювати сторінку. Це можна зробити через AJAX, а також за допомогою фреймворків Ember чи Angular.
4. Запити обробляються як на сервері, а й у клієнтської частини. Подібне можна реалізувати за допомогою бібліотеки React. У цьому випадку йдеться не про класичний веб-сайт, а про повноцінний веб-додаток, який працює без оновлення сторінки.

Хороший приклад взаємодії frontend і backend через AJAX та HTML-код, що обробляється на серверній стороні, - сервіс Google Документи або Google Таблиці. Користувач вводить текст, а сервер відразу дає зворотну інформацію в міру введення - виправляє помилки і підсвічує помилки. Все це відбувається в режимі нон-стоп без необхідності оновлювати і перезавантажувати сторінку. Зручно та швидко!

І ще дещо насамкінець!

Останнім часом все частіше зустрічаються фахівці, які працюють одразу в обох напрямках — фронтенд та бекенд. Їх називають fullstack-розробниками, і вони, як правило, дуже затребувані. А їхня робота, відповідно, дуже добре оплачується.

Якщо ваша мета - стати fullstack-девелопером, рекомендуємо почати з більш простого. Пройдіть курс «Frontend-розробка 2022. Junior-верстальник» і почніть працювати саме як фронтенд-розробник. Далі, коли станете впевненішим спеціалістом, можна переходити до бекенд-розробки та розширювати список своїх компетенцій. Можливо, ви вирішите повністю перейти в бекенд, залишивши "фронт" у минулому. А можливо, станете fullstack-розробником і зможете втілювати нові проекти у життя повністю самостійно. Вибір за вами!