Чим відрізняється Frontend та Backend розробка? Що обрати?

Фронтенд-розробка — це створення інтерфейсу користувача на стороні веб-сайту або програми. Це все, що бачить користувач, коли відкриває веб-сторінку, і з чим він взаємодіє: кнопки, банери та анімація. Фронтенд пов'язані з бізнес-логікою товару (клієнтська частина постійно «спілкується» з серверної), але її розробкою займаються бекенд-программисты.

У процесі роботи фронтендер взаємодіє з дизайнерами, бекенд-розробниками та UX-аналітиками.

Щоб зрозуміти, що являє собою фронтенд, відкрийте сторінку будь-якого сайту – ви побачите інтерфейс. Клацніть правою кнопкою миші по сторінці, виберіть пункт «Вихідний код сторінки», і перед вами відкриється її вихідний код :)

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

Бекенд - це розробка бізнес-логіки продукту (сайту або веб-додатки).

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

ПРИКЛАД

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

Коли ви вводите запит на сторінці пошукової системи і тиснете клавішу Enter, ви переходите з області фронтенду в бекенд. Запит відправляється на сервер Google на якому розташовані складні алгоритми пошуку, - там і відбувається все "чарівництво". Як тільки на моніторі з'явилася інформація, яку ви шукали, ви повертаєтеся в область фронтенду.

За великим рахунком, сервер - це той самий комп'ютер, тільки віддалений і потужніший. Він зберігає дані та відповідає на запити користувачів.

Бекенд-розробник застосовує інструменти, доступні на його сервері. Він має право вибрати будь-яку з універсальних мов програмування - наприклад, Ruby, PHP, Python або Java. Все залежить від конкретного проекту та завдання замовника.

Також для бекенд-розробки використовуються системи управління базами даних:

• MySQL;
• PostgreSQL;
• SQLite;
• MongoDB.

Також використовуються інструменти завантаження (деплою):

• CI/CD;
• Kubernetes (K8s);
• Docker.

Бекенд - це не тільки написання коду, а й створення архітектури програми. Архітектура у розробці визначає структуру та порядок використання баз даних. Важливо, щоб база даних коректно взаємодіяла з кодом програми і безперервно доставлялася на сервер — це відповідає бекенд-разработчик.

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

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

• клієнтська частина програми (фронтенд) відправляє інформацію користувача на сервер (бекенд);
• програма на сервері опрацьовує інформацію;
• інформація повертається клієнтській стороні у зрозумілій для користувача формі.

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

Існує кілька варіантів взаємодії фронтенду та бекенду:

• HTTP-запит безпосередньо відправляється на сервер, сервер шукає інформацію, вбудовує її в шаблон і повертає у вигляді HTML-сторінки.
• Варіант із використанням AJAX (Asynchronous JavaScript and XML). У цьому випадку запит надсилає JavaScript, завантажений у браузер, а відповідь надходить у форматі XML або JSON.
• Односторінкові програми завантажують дані без оновлення сторінки. Це також робиться за допомогою AJAX або фреймворків Angular і Ember.
• Бібліотека React допомагає використовувати програму і на сервері, і на клієнтській частині. Веб-сайт перетворюється на повноцінну програму, яка отримує необхідну для користувача інформацію без оновлення сторінок.

ПРИКЛАД

Коли ви вводите текст у Google Документах, то відразу ж отримуєте зворотний зв'язок від сервера: програма підсвічує синтаксичні помилки і пропонує виправлення. При цьому перезавантажувати сторінку не потрібно. Фронтенд та бекенд взаємодіють через AJAX та HTML-код, який обробляється на сервері. Читай також як стати фронтенд розробником →

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

Програмісти, які впевнено почуваються як у фронтенді, так і в бекенді, нерідко зустрічаються на ринку. Найчастіше це розробники рівня Senior, які пройшли складний шлях в одній з областей - фронтенд або бекенд - і мають досвід в іншій.

Резюмуємо:

Хочеш стати Frontend розробником тобі сюди →

Хочеш стати Backend розробником тобі сюди →