Разница и взаимодействие client-side и server-side кода

Быстрый ответ

Главное отличие между клиентской и серверной разработкой заключается в месте их исполнения:

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

// Проверка данных, введенных пользователем. Это элемент клиентского взаимодействия.
document.getElementById('submit').onclick = () => {
  if (!document.getElementById('name').value) {
    alert('Уважаемый пользователь, даже у Волдеморта есть имя!');
    return false;
  }
};

• Серверная разработка, с другой стороны, включает в себя серверные языки программирования, такие как Node.js, отвечающие за обработку данных и реализацию бизнес-логики.

// Отправка и обработка данных. Это происходит на сервере.
app.post('/submit', (req, res) => {
  if (!req.body.name) {
    res.status(400).send('Имя так же важно, как и кофе для программиста!');
    return;
  }
  // В этот момент в дело вступают базы данных.
});

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

Погружение в детали: исполнение и взаимодействие с каждой стороны

Сфера применения: Клиентская в сравнении с серверной

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

Подробнее об этом расскажет наш спикер на видео

Отслеживание определённого состояния пользователя: задача сервера

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

// Получаем данные о сессии пользователя со стороны клиента
$.ajax({
  url: '/getSessionData',
  success: function (data) {
    console.log('Получены данные сессии: ', data);
  }
});

// Сервер управляет данными сессии
session_start();
$_SESSION['user_data'] = $user_data;

Взаимодействие клиент-сервер: AJAX в действии

Клиентская сторона для улучшения общения с пользователем может использовать асинхронные запросы через AJAX или Fetch API, что позволяет обмениваться данными с сервером без необходимости перезагрузки страницы.

// Использование Fetch API на стороне клиента для отправки данных без перезагрузки страницы.
fetch('/submit-form', {
  method: 'POST',
  body: JSON.stringify(formData),
  headers: { 'Content-Type': 'application/json' }
})
.then(response => response.json())
.then(data => console.log('Данные, полученные с сервера: ', data))
.catch(error => console.error("Возникла ошибка: ", error));

Визуализация

Давайте представим клиентскую и серверную разработку, используя аналогию с рестораном:

| Кухня (Серверная сторона) | Зал (Клиентская сторона) |
|:--------------------------|:--------------------------|

Представим, что сделали заказ:

| Ваш Заказ (Запрос)  -> |

1. Кухня (серверная сторона) готовит блюдо.
2. Официант (клиентская сторона) подает блюдо на стол.

И вот как это работает:

| Заказ Обработан  -> | Блюдо Подано  |

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

Конфиденциальные операции и управление файлами: область серверной стороны

Конфиденциальность операций

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

<?php
// У сервера есть права на запись в файлы. Вот это сила!
$file = fopen('secure-data.txt', 'w');
fwrite($file, 'Очень секретные данные');
fclose($file);
?>

Разделение зон ответственности в целях безопасности

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

// Серверная валидация данных, потому что не все, что блестит, является золотом
if (empty($_POST["name"])) {
  // Имени нет
  die("Имя обязательно. Путь к успеху потерян в коде.");
}

Производительность и простота обслуживания

Быстрая загрузка страниц: благодаря клиентской стороне

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

Разделение кода – ключ к успеху

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

Полезные материалы

1. Введение в веб-API — подробное руководство по клиентским веб-API.
2. Серверное скриптование – Википедия — компактный обзор особенностей серверного скриптования.
3. Node.js — Введение в Node.js — руководство по началу работы с Node.js в серверной разработке.
4. Что такое DOM? Значение модели объекта документа в JavaScript — объяснения о модели объекта документа в JavaScript.
5. Учебник | DigitalOcean — руководство для новичков по использованию AJAX в JavaScript.
6. Установка Express — инструкция по быстрой настройке Express.js для разработки API на Node.js.
7. HTTP | MDN — детальный анализ протокола HTTP, ключевого элемента клиент-серверного общения.