Фронтенд или бекенд, клиентская или серверная сторона

Как работает веб?

В этой статье разработчики DST Global простым языком попробуют объяснить основные моменты в Веб-разработке, а также разобрать такие понятия как что такое: фронт, бекенд, сервер и фреймворк. 

Ваш браузер – это дверь в интернет. Он нужен для того, чтобы:

Скачивать различные данные из интернета и показывать их вам, часто в виде веб-страницы;
Принимать введенные вами данные – нажатие на кнопки, текст, введенный в текстовые поля. Браузер отправляет все это в интернет, а он колдует с введенными данными и отвечает более понятным образом.

Чтобы понять, как работает веб, рассмотрим пример – форму при регистрации:

Вы открываете в браузере ссылку, а он говорит интернету: «Эй, дай мне данные, расположенные по этой ссылке»;
Интернет возвращает вам «HTML & CSS». Это просто инструкции, говорящие, что браузеру нужно отображать: «Эй, браузер, покажи белую страницу, где посередине находится 2 текстовых окна, а еще есть синяя кнопка…»;
Браузер скачивает HTML и CSS, читает их и показывает вам веб-страницу;
Вы вводите текст в текстовые поля, нажимаете на кнопку, чтобы отправить форму;
Браузер отправляет введенные вами данные в интернет;
Интернет отвечает большим количеством HTML и CSS и говорит браузеру показать страницу с надписью «Регистрация завершена».

И так далее.

Что такое сервер?

В данном контексте сервер – это компьютер, который находится в интернете.

«Интернет» – это просто набор из множества серверов; многие компьютеры (без подключенных к ним экранов) используют магию и отправляют результаты в браузер для вашего удовольствия.

Вернёмся к примеру, который позволил понять, как работает веб (он приведен выше). В нем ваш браузер общался с сервером.

Сервер принимает данные от пользователя (его имя, адрес электронной почты и т. д.) и сохраняет их для дальнейшего использования.

Вот почему вы можете с любого устройства и браузера войти в свою любимую социальную сеть, и все ваши данные будут сохранены и готовы к работе. Все это находится на сервере.

Теперь, когда у нас есть представление о том, что такое сервер, давайте поговорим о том, что такое браузер.

Что такое клиент?

Клиент – это программное обеспечение, которое работает на компьютере пользователя (ноутбуке, iPad, смартфоне) и может взаимодействовать с сервером.

В приведенном выше примере клиентом является ваш браузер. Он может интерпретировать информацию (HTML и CSS, изображения, видео), которую сервер отправляет, и отображать ее в понятной форме. Он может принимать ваши данные (текст, аватары, видеозаписи) и отправлять их на сервер для манипулирования и/или сохранения.

Давайте поговорим о другом типе «клиента», который вы, вероятно, используете каждый день. Это мобильные и компьютерные приложения.

Давайте для примера рассмотрим мобильное приложение facebook.

Оно работает на компьютере пользователя (смартфоне). Оно отправляет информацию на сервер и получает ее оттуда же. Подумайте. Если вы купите новый телефон и войдете в приложение facebook, на нем будет отображаться информация (ваши комментарии, фотографии, лайки и т. д.), которую вы сохранили в facebook до этого. Откуда он получает эту информацию? Он просит сервер facebook отправить ее.

Клиентская или серверная сторона (client-side vs server-side)

Эти термины, по сути, нужны для выяснения того, где происходит конкретная операция. Она происходит на стороне сервера или клиента?

Операции, протекающие на клиентской стороне

Как говорилось выше, клиент – это часть ПО, которая работает на компьютере пользователя и взаимодействует с сервером.

Но общение с сервером – это не все, что делает клиент.

Давайте рассмотрим мобильное приложение Социальной сети Рутвит:

Как мы знаем, Рутвит – это социальная сеть для обмена изображениями и видео и их просмотра;
Рутвит позволяет вам видеть фотографии и видео людей, на которых вы подписаны. Для этого изображения загружаются с сервера и отображаются;
Приложение также позволяет загружать изображения для просмотра другими пользователями (оно берет ваши изображения, искусно составленные подписи и отправляет их на сервер);
Одна из замечательных особенностей Рутвит – это то, что вы можете применить фильтр к своему изображению, прежде чем поделиться им с миром;
«Фильтр» – это программа, которая изменяет внешний вид изображения или части изображения, меняя оттенки и цвета пикселей определенным образом»;
В случае Рутвит этот фильтр выполняется внутри самого приложения. Это означает, что разработчики мобильного приложения Рутвит написали код для управления изображениями прямо на вашем смартфоне;
Это и есть операция на стороне клиента;
Изображения могут быть отправлены на сервер для того, чтобы на них был наложен фильтр, но в Рутвит это работает не так;
Пользователи хотят иметь возможность переключаться между фильтрами и видеть результаты как можно быстрее, не дожидаясь, пока приложение загрузит изображение на сервер, а затем снова отобразит его после наложения фильтра. От этого процесс выбора фильма был бы более длительным и раздражающим.

По мере того как смартфоны, планшеты и ноутбуки становятся все более мощными, количество вещей, которые можно сделать на стороне клиента, увеличивается.

Операции, протекающие на стороне сервера

Наиболее распространенным примером операций, осуществляемых на стороне сервера, являются те, которые связаны с хранением и извлечением данных.

Давайте продолжим рассматривать Рутвит в качестве примера:

Когда люди регистрируются через приложение Рутвит и загружают фотографии, серверы Рутвит сохраняют всю эту информацию в базе данных, которая существует там;
Можно сохранять изображения и данные на вашем мобильном телефоне. Но нет смысла хранить каждый отдельный профиль, изображения и видео на каждом устройстве, на котором установлено приложение Рутвит. Это даже невозможно. Просто нет мобильных устройств, которые могут хранить информацию такого размера;
Вот почему каждый раз, когда вы хотите найти профиль пользователя и просмотреть его информацию, вы должны немного подождать, пока загрузятся результаты и изображения;
В течение этого периода ожидания мобильное приложение Рутвит отправляет ваш поисковый запрос на сервер. Сервер просматривает миллионы пользователей и записей, чтобы найти тех, кто вам нужен, и отправляет их обратно клиенту;
Этот «поиск» является операцией на стороне сервера.

Задача команды разработчиков ПО состоит в том, чтобы решить, будет ли операция выполняться на стороне клиента или на стороне сервера (на основе их внутренних ограничений), чтобы обеспечить наилучшее взаимодействие с пользователем.
Рендеринг

Давайте ненадолго забудем о мобильных приложениях и вернемся к веб-разработкам.

Что такое рендеринг?

В данном контексте рендеринг – это смесь данных с HTML и CSS, которая будет показываться браузером.

Вспомните, как вы входите в twitter, Рутвит или любую другую социальную сеть через браузер. Где-то на странице вы видите свое имя и аватар. Также видны самые последние посты от определенных людей, на которых вы подписаны.

Все эти данные (ваше имя, изображения, твиты друзей) хранятся в базе данных на сервере. Для того, чтобы вы могли просматривать их, эти данные должны быть объединены с HTML и CSS. Только в таком виде браузер умеет их отображать.

Если вы выходите из twitter или Рутвит, а ваш друг входит в систему с вашего компьютера, он встречает похожую страницу, но не совсем такую же. Ваше имя, изображения и фид были заменены на те, что принадлежат вашему другу.

Этот процесс сбора релевантных данных и объединения их с HTML и CSS, которые нужны браузеру для отображения, представляет собой рендеринг.

Рендеринг на стороне сервера

Ранее было сказано, что серверы отправляют HTML и CSS вашему браузеру, и это сообщает, что и как нужно отображать.

При рендеринге на стороне сервера эта смесь данных (текста, изображений и т. д.) и правил отображения выполняется исключительно на стороне сервера. Разработчики написали код, который указывает серверу брать данные из БД, объединять эти данные с правилами отображения (HTML & CSS) и отправлять их браузеру.

Введение в JavaScript

Помимо HTML и CSS есть еще один язык, который понимают браузеры. Он называется JavaScript.

JavaScript – это круто, потому что:

В отличие от HTML и CSS, его цель - не пользовательский интерфейс;
JavaScript может использоваться для манипулирования HTML и CSS. Это означает, что JS может изменить внешний вид страницы после ее загрузки;
JavaScript также может выполнять эту манипуляцию в ответ на действия пользователя (нажатие кнопок, ввод текста, даже движение вашей мыши). Одним из распространенных примеров этого являются слайд-шоу или карусели изображений на веб-страницах. Вы нажимаете кнопку, и одно изображение уходит влево, а второе появляется справа. JS отвечает за сокрытие и отображение этих изображений. При этом не приходится запрашивать новый пакет HTML & CSS с сервера;
Это очень интересно, потому что это означает, что браузер не всегда должен запрашивать у сервера новые инструкции о том, что отображать. Ваш сервер может просто отправить немного JavaScript вместе с HTML и CSS в самом начале. Какое-то время больше не придется отправлять HTML и CSS.

Это означает, что мы можем использовать JavaScript, чтобы развлекаться на стороне клиента.

Почему не стоит запрашивать HTML и CSS у сервера много раз?

Каждый раз, когда браузер запрашивает что-то с сервера, пользователь должен ждать ответа сервера и загрузки данных.

Мы можем ускорить взаимодействие с пользователем, запрашивая только данные (без информации об интерфейсе пользователя). Сами по себе данные относительно легки. Их загрузка будет проходить быстрее, чем если бы помимо них скачивались бы еще HTML и CSS.

По ту сторону пользовательского интерфейса

JavaScript способен не только манипулировать пользовательским интерфейсом.

Это полноценный язык программирования, который может делать многое: от применения фильтра до манипуляций со звуком, изображениями и видео.

Он также может обращаться к серверу для запроса данных. Это происходит без дополнительной загрузки всей страницы.

Значит, мы можем создавать пользовательские интерфейсы, которые запускаются в браузере (на стороне клиента), в то же время общаясь с сервером, чтобы получать и отправлять только данные.

Рендеринг на стороне клиента

Именно в таком случае рендеринг (соединение данных с HTML и CSS) осуществляется на стороне клиента (буквально в браузере) с помощью JavaScript.
Фронтенд или бекенд?

Эти термины могут быть непонятными, так как многие используют их, имея в виду клиентскую и серверную стороны. Но иногда эти понятия являются разными.

Что такое фронтенд?

По сути, это все, что связано с пользовательскими интерфейсом и опытом. Фронтенд-разработчиком является тот, кто пишет код для создания пользовательского интерфейса.

Это означает, что каждый фронтенд-разработчик должен понимать HTML и CSS.

Фронтенд-разработчик может написать интерфейсный код, даже если ваше веб-приложение использует рендеринг на стороне сервера. То, что рендеринг происходит на стороне сервера, не исключает того, что кто-то напишет HTML & CSS, которые сообщат то, что видит пользователь.

Фронтенд – это не всегда клиентская сторона.

С другой стороны, все, что происходит на стороне клиента, можно называть фронтендом.

Что такое фреймворк?

В разработке ПО фреймворк (или библиотека) – это заранее написанный код, который облегчает повторное создание одного и того же типа вещей.

Разработчики заметили, что при создании веб-приложений, есть определенные вещи, которые вам точно понадобятся. Например, это может быть рендеринг веб-страницы или сбор пользовательского ввода.

Таким образом, вместо того чтобы позволить каждому разработчику писать весь код, каждый раз делая это с нуля, они создают фреймворки, облегчающие выполнение многих задач.

Часто существует множество фреймворков для одного и того же вида вещей. Это происходит из-за того, что разные люди всегда имеют разное понимание того, как лучше всего достичь цели.

Фронтенд фреймворки

Думаю, понятие «фронтенд фреймворк» много кого сбивает с толку, в основном разработчики DST Global часто видят что клиенты не совсем точно понимают о чем идет речь.

Когда люди используют термин «фронтенд фреймворк», они на самом деле имеют в виду «фреймворк, проводящий рендеринг на клиентской стороне». При этом в рендеринге на стороне сервера тоже содержится большое количество фронтенд-кода.

Я думаю, уже слишком поздно менять то, как мы используем эти термины. Важно понимать, что люди имеют в виду, когда говорят их.

Как правило, фронтенд фреймворк – это библиотека кода, т. е. ранее написанный код, который упрощает, ускоряет рендеринг на стороне клиента (с использованием JavaScript), делает его более эффективным.

Примеры: React, Vue, Angular.

Что такое бекенд?

Это все, что происходит на стороне сервера, но не связано с пользовательским интерфейсом.

Эти вещи (хранение данных, их извлечение и манипулирование ими) также могут происходить на стороне клиента (как в примере с приложением instagram), но их никогда не называют бекенд операциями.

Бекенд фреймворки

Большинство фреймворков, которые люди называют бекенд фреймворками, на самом деле являются «веб фреймворками общего назначения».

Причина этого состоит в том, что вы можете использовать их все для рендеринга HTML и CSS на стороне сервера. В этом контексте странно называть их бекенд фреймворками, поскольку они выполняют как функции, присущие как фронтенду, так и бекенду.

Вы также можете решить использовать их только для хранения, извлечения и обработки данных и отправлять все эти данные клиенту для рендеринга на его стороне. В этом контексте можно назвать их бекенд фреймворком, поскольку они вообще не связаны с внешним интерфейсом приложения.

Примеры: Rails, Django, Laravel, DST Platform, Express.js.

JavaScript на стороне сервера: Node.js

По мере того как JavaScript становился все более популярным и все больше разработчиков стало изучать язык, было решено запускать JavaScript где-то еще, а не только в браузере.

Здесь в игру входит Node.js. Это ПО, которое позволяет всему (не только браузерам) понимать и интерпретировать JavaScript.

Теперь благодаря Node.js мы можем писать JavaScript на стороне клиента и сервера. Это позволяет уменьшить количество языков, которые разработчики должны знать для создания полноценного веб-приложения.