Backend vs frontend, блог про веб-розробці та веб-технологіях
Справжні «бойові» програмні продукти ніколи не складаються з одного файлу і не роблять все відразу, їх ділять на частини. Деяка частина займається виведенням інформації користувачеві і збором даних, які користувач може ввести: тексти в формах, що завантажуються файли, кліки і рух покажчиком миші, звук з мікрофона, зображення з камери. Це називається фронтенд (front-end). Потім все це передається в ту частину програмної системи, яка може це зберегти в базу даних, змінити, передати в іншу програму. Цю невидиму частину програмних систем називають бакенд (back-end).
У додатках може бути багато шарів, кожен з яких або займається побудовою інтерфейсу користувача, або готує дані для нього і збирає дані від користувача. Кожен з шарів буде включати в себе front end і back end.
У веб-додатках умовно вважається, що front-end - це все, що прийшло з веб-сервера в браузер (ще називають «клієнтська сторона»), а то, що працює на сервері, вважається back-end. Можу сказати, що поділ це дуже умовне, бо і на стороні сервера, і в браузері може бути як front-end, так і back-end.
Gmail намагається відновити зв'язок і відправити мої листи
Вихідний код сторінки вКонтакте
1. Онлайн-клієнт електронної пошти Gmail. Якщо написати лист і натиснути «Відправити» під час збою підключення до Інтернет, то лист не відправиться, але і не загубиться. Воно пропаде з екрану, але десь всередині програмного коду, який зараз завантажений в Бразер, є невидима частина, яка раз по раз намагається відправити лист, поки це не вдасться. Виходить, клієнтська частина містить back-end для фонової відправки запитів на сервер.
2. Популярний сервіс vk.com. Сторінки сформовані на сервері. І там поділ на дві частини, одна з яких знайшла запис в базі даних, а інша зробила з цього запису фрагмент HTML, тобто створила фрагмент майбутнього інтерфейсу користувача, який пізніше відобразиться в браузері. На сервері теж може бути front-end, який формує дані для безпосереднього відображення користувачеві після передачі в браузер і back-end, який, наприклад, працює з базою даних.
Такий поділ робить веб-розробку простіше і швидше. Двома частинами можуть займатися два програміста. Приклад на діаграмі Гантта і дошці Канбан.
Паралельна робота двох програмістів на частинами back-end і front-end
Розділивши два завдання на чотири (Завдання 1.1 + Завдання 1.2, Завдання 2.1 + Завдання 2.2), можна робити їх так, що частини фронтенд і бакенд будуть реалізовані послідовно в рамках одного завдання (спочатку Завдання 1.1, потім 1.2, потім 2.1, потім 2.2) , але паралельно для двох різних задач (Завдання 1.2 і Завдання 2.1).
Крім поділу роботи за часом важливо також поділ розробників за спеціалізаціями. Колись за весь сайт міг відповідати одна людина. Він і сторінки в Dreamweaver накидає, і тексти з картинками на сайт викладе і хостингом займеться. А зараз в веб-технологіях настільки велика різноманітність. що одній людині стало дуже важко знати все. Тому з'явилися розробники для front-end і розробники для back-end. Універсалів, які знають обидві частини, називають «комбайни» або «full-stack developer«. Зауважу, що фронтенд розробка теж може бути розділена: на верстку і безпосередньо програмування.
Поділ коду програми на базі фреймворка Yii на адмінку і фронт
І є ще один розподіл на front / back в веб-розробці. Якщо веб-проект має на увазі різний інтерфейс для різних типів користувачів, то front - це все що є звичайним користувачам, а back - це те, що є адміністраторам, модераторам та службі підтримки (умовно називається «админка» або «панель адміністратора»). Ось, наприклад, старий, але наочний приклад створення програми на базі фреймворка Yii з розподілом на панель адміністратора і панель користувача: Спосіб поділу front-end / back-end-частин в Yii.
Відповідно, команда розробки може бути поділена на дві: група розробки панелі користувача і група панелі адміністратора. Кожна з них може реалізовувати свої частини з незалежних технологій. наприклад:
webmentor.pro - твій надійний друг, досвідчений радник і підтримка
Програми підтримки при вивченні проектування і розробки веб-додатків, нових мов програмування і веб-технологій.
Опитувальник по стеку технологій для веб-розробника
Швидка оцінка поточного рівня знань. Графіки особистого професійного зростання. Віджети для портфоліо. Рекоментацій по ефективному підвищенню рівня знань.