Фронтенд- і бекенд- розробка: в чому різниця і як вони взаємодіють

Фронтенд- і бекенд- розробка: в чому різниця і як вони взаємодіють

‍

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

Аби краще зрозуміти різницю, розглянемо кожен вид окремо.

‍

Фронтенд розробка — це створення користувацького інтерфейсу. Це все, що бачить користувач після відкриття вебсторінки й з чим він взаємодіє: кнопки, банери, анімації тощо. Клієнтська частина постійно “спілкується” з серверною, яку створюють вже бекенд-програмісти. В процесі роботи фронтендер взаємодіє з дизайнерами, UX-аналітиками та бекенд-розробниками.

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

Браузер активує код, що описує кольори, шрифти, верстку сайту, а ми бачимо готовий результат.

Фронтенд сайту аби веб-застосунку можна поділити на три великі частини: HTML, CSS та JavaScript.

HTML (HyperText Markup Language) - це мова розмітки документів, якою створюють структуру сторінки: абзаци, заголовки, списки тощо.

CSS (Cascading Style Sheets) - мова для стилізації та опису зовнішнього вигляду документа. Вона задає кольори шрифтів, визначає, як будуть розташовані певні блоки сайту. CSS також дозволяє відкривати документ в різних форматах: для друку (звичайного аби шрифтом Брайля), виведення на екран або для читання скрінрідером.

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

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

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

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

Для бекенд-розробки також використовують системи управління базами даних: MySQL, SQLite, MongoDB, PostgreSQL.

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

Тож як взаємодіють фронтенд і бекенд?

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

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

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

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

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

Наприклад, ви друкуєте текст в Google Документах і одразу отримуєте зворотній зв'язок від сервера: програма виділяє синтаксичні помилки і пропонує виправлення без оновлення сторінки.

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

‍