Традиційно ці дві сфери розробки (frontend і backend) поділяють на сцену і закулісся. У frontend ви працюєте на очі користувача, в backend же - на його досвід і відчуття.
В чому особливості цих 2-х напрямків та як вони взаємодіють між собою - розбираємо детальніше.
Що таке frontend-розробка?
Frontend - це розробка користувацького інтерфейсу і функцій, які працюють на стороні клієнта веб-сайту або програми. Це все, що бачить користувач, відкриваючи веб-сторінку, і з чим він взаємодіє.
Frontend-розробник співпрацює з дизайнерами, програмістами та UX-аналітиками, щоб створювати зручний і затребуваний продукт.
Щоб наочно зрозуміти frontend-розробку, відкрийте сторінку будь-якого сайту - перед собою ви побачите інтерфейс. Клацнувши правою кнопкою миші, відкриєте код сторінки в браузері.
Це і є приклад роботи frontend-розробника - він скачується в браузер користувача, і його можна побачити своїми очима. Код сторінки описує кольори, верстку, шрифти, розташування графічних елементів і так далі.
Компоненти frontend-розробки
- HTML (HyperText Markup Language) - мова розмітки документів для створення структури сторінки: заголовки, абзаци, списки і так далі.
- CSS (Cascading Style Sheets) - мова для опису і стилізації зовнішнього вигляду документа. Завдяки CSS-коду браузер розуміє, як саме відображати елементи. CSS задає кольори і параметри шрифтів, визначає, як будуть розташовуватися різні блоки сайту, і так далі. Ще він дозволяє виводити один і той же документ в різних стилях, наприклад, для друку (звичайним або шрифтом Брайля), виведення передачі на екран або читання голосом.
- JavaScript - це мова, що створювалася, щоб оживити веб-сторінки. Її завдання - реагувати на дії користувача, обробляти кліки мишкою, переміщення курсора, натискання клавіш. Ще вона посилає запити на сервер і завантажує дані без перезавантаження сторінки, дозволяє вводити повідомлення і багато іншого.
Що таке backend-розробка?
Backend-розробка - це набір апаратно-програмних засобів, за допомогою яких реалізована логіка роботи сайту. Попросту кажучи, це те, що приховано від очей користувача і відбувається поза його браузером і комп'ютером.
Наприклад, коли ви вводите запит на сторінці пошуковика і тиснете клавішу Enter, frontend закінчується і починається backend. Ваш запит відправляється на сервер Google чи іншої пошукової системи, де розташовані алгоритми пошуку. Саме там трапляється все «диво». Як тільки на моніторі з'явилася інформація, яку ви шукали, - знову відбувається повернення в зону frontend.
За великим рахунком, сервер - це той же комп'ютер, тільки більш потужний. Він зберігає дані і відповідає на запити користувачів.
Backend - це процес об'єднання сервера з користувачем.
Компоненти backend-розробки
Backend-розробник застосовує ті інструменти, що доступні на його сервері. Він має право вибрати будь-яку з універсальних мов програмування, наприклад, Ruby, PHP, Python, Java. Все залежить від конкретного проекту і завдання замовника.
Також для backend-розробки використовуються системи управління базами даних:
- MySQL
- PostgreSQL
- SQLite
- MongoDB
Залежно від продукту обов'язки backend-розробника сильно змінюються. Такий фахівець може створювати та інтегрувати бази даних, забезпечувати безпеку або налаштовувати технології резервного копіювання та відновлення.
Як взаємодіють frontend і backend?
Взаємодія frontend і backend відбувається по колу:
- frontend відправляє призначену для користувача інформацію в backend;
- інформація обробляється;
- і повертається назад, прийнявши зрозумілу форму.
Над цим займаються різні фахівці, але кожному з них бажано розуміти принципи, за якими працюють колеги. Навіть дизайнеру інтерфейсів (UI-дизайнер) важливо хоча б в загальних рисах знати, що являє собою backend проекту, яким він займається. Це допоможе адекватно оцінити, які технічні можливості є у сайту або програми.
Існує кілька варіантів взаємодії frontend і backend:
- HTTP-запит безпосередньо відправляється на сервер, сервер шукає інформацію, вбудовує її в шаблон і повертає у вигляді HTML-сторінки.
- Варіант з використанням інструментарію AJAX (Asynchronous JavaScript and XML). У цьому випадку запит відправляє JavaScript, завантажений в браузер, а відповідь приходить в форматі XML або JSON.
- Односторінкові додатки, які завантажують дані без оновлення сторінки. Це робиться також за допомогою AJAX або фреймворків Angular і Ember.
- Ember або бібліотека React допомагають використовувати додаток і на сервері, і в клієнті. Frontend і backend взаємодіють через AJAX і HTML-код, який обробляється на сервері.
Обов'язки frontend- і backend-розробників, як правило, розділені, але бувають моменти, коли програміст вирішує проблеми як на стороні сервера, так і в клієнтської частини. Обидва види розробки мають на увазі і технічні, і творчі компоненти. Нерідко на ринку зустрічаються фахівці, які впевнено почуваються як у frontend, так і в backend і можуть поєднувати їх.
Почати свій шлях в обох галузях можна з курсу Академії ШАГ «Розробка програмного забезпечення». Він підходить для всіх, хто хоче опанувати програмування "з нуля". За період навчання ви на практиці вивчите основні мови програмування та технології для розробки web-сторінок і web-додатків, створите портфоліо, яке допоможе знайти перспективну і добре оплачувану роботу.
