Front-end – это часть программы предназначенная для взаимодействия пользователя с программой. В основном FE разрабатывается на нескольких языках: HTML, CSS, JavaScript.
HTML – язык разметки, он отвечает за расположенные элементов на странице.
CSS – язык стилей элементов. Благодаря этому языку можно сделать уникальный дизайн своей страницы.
JS – этот динамический язык позволяет сделать страницу более «живой», благодаря ему создаются анимации и прочие не статичные действия на странице.
Back-end – это основной блок программы, в котором происходят все операции. Эта часть не видна пользователю. Back-end разрабатывается на таких языках как: Node.JS, PHP, Java, C#, JavaScript, Python и другие.
Как они взаимодействуют?
Есть несколько вариантов взаимодействия:
Серверные приложения:
При таком виде связи HTTP-запросы отправляются на сервер приложения, затем сервер отвечает HTML-страницей.
Связь с использованием AJAX:
Такой подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее.
В качестве формата передачи данных могут использоваться фрагменты простого текста, HTML-кода, JSON или XML.
Универсальные приложения:
Благодаря такому методу код выполняется как на сервере, так и на клиентской машине(браузере).
Автономный фронтенд
Такой фронтенд подразумевает что использование сервера не будет и все данные будут хранится на устройстве пользователя. Это актуально на лёгких одностраничных сайтах(лендингах).
Размытые границы
В зависимости от приложения можно сделать так чтобы все вычислительные операции производились или на сервере, или на клиентской машине.
При использовании вычислений на стороне пользователя нужно учитывать, что не всем подойдет такой метод работы сайта. Не все пользователи используют актуальные версии браузеров и не все имеют хорошее интернет-соединение. Использование сервера упразднит эти недостатки.