Бэкэнд-инженер тоже должен знать это - лучшие 5 методов и модулей фронтенд JS

Даже бэкэнд-инженеры в конечном итоге создают "результат", который работает в браузере.
Не нужно углубляться в профессиональное изучение фронтенда, но знание основ синтаксиса JavaScript и методов поможет:

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

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

1. `fetch` – Выполнение HTTP-запросов в браузере

Почему это важно?

Для бэкэнд-инженеров наиболее знакомое - это HTTP API.
Во фронтенде этот API часто вызывает fetch.
Понимание того, как отправляются запросы и как обрабатывать ответы/ошибки, значительно упрощает отладку.

Основные инструкции

// Пример GET-запроса
fetch('https://api.example.com/users/1')
  .then((res) => {
    if (!res.ok) throw new Error('HTTP ошибка ' + res.status);
    return res.json(); // Парсинг JSON
  })
  .then((data) => {
    console.log('пользователь:', data);
  })
  .catch((err) => {
    console.error('ошибка fetch:', err);
  });

Пример POST + JSON

async function createUser() {
  try {
    const res = await fetch('https://api.example.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ name: 'Alice', age: 30 }),
    });

    if (!res.ok) {
      throw new Error('HTTP ошибка ' + res.status);
    }

    const data = await res.json();
    console.log('создан:', data);
  } catch (e) {
    console.error(e);
  }
}

Основные моменты

res.ok, res.status и т. д. помогут отличить ошибки сервера
Шаблоны использования JSON.stringify, res.json() выгодно запомнить как можно скорее
Если появляется ошибка CORS, полезно иметь привычку проверять в консоли браузера, как отправляется fetch запрос

2. `Promise` и `async/await` – Основы асинхронной логики

Почему это важно?

Во фронтенде обычно все асинхронно.

События UI
HTTP-запросы
Таймеры, WebSocket и т. д.

Ключевыми концепциями для работы с этим являются Promise и async/await.
Если вы использовали асинхронный I/O на бэкэнде, то концепция будет похожей.

Основы Promise

function getUser(id) {
  return fetch(`/api/users/${id}`).then((res) => res.json());
}

getUser(1)
  .then((user) => {
    console.log(user);
  })
  .catch((err) => {
    console.error(err);
  });

Чтение с помощью async/await

async function showUser(id) {
  try {
    const res = await fetch(`/api/users/${id}`);
    if (!res.ok) throw new Error('HTTP ' + res.status);

    const user = await res.json();
    console.log(user);
  } catch (e) {
    console.error(e);
  }
}

showUser(1);

Параллельные вызовы (совместимый с паттерном бэкэнда)

async function loadDashboard() {
  const [userRes, statsRes] = await Promise.all([
    fetch('/api/me'),
    fetch('/api/stats'),
  ]);

  const [user, stats] = await Promise.all([
    userRes.json(),
    statsRes.json(),
  ]);

  console.log(user, stats);
}

Основные моменты

API на основе Promise можно читать удобно, выбирая один из способов: .then().catch() или async/await
Когда вы отправляете несколько запросов одновременно, полезно знать о паттерне Promise.all

3. Три метода для массивов: `map`, `filter`, `reduce`

Почему это важно?

Во фронтенде тоже работают с данными.

Преобразование JSON-списков из сервера в форму данных для отображения
Фильтрация данных только по определенным условиям
Расчет сумм/статистики

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

`map` – Преобразование каждого элемента массива

const users = [
  { id: 1, name: 'Alice', age: 31 },
  { id: 2, name: 'Bob', age: 27 },
];

const names = users.map((u) => u.name);
// ['Alice', 'Bob']

`filter` – Оставляем только соответствующее условию

const adults = users.filter((u) => u.age >= 30);
// [{ id: 1, name: 'Alice', age: 31 }]

`reduce` – Сворачивание массива в одно значение

const totalAge = users.reduce((sum, u) => sum + u.age, 0);
// 58

Пример с цепочкой

const avgAgeOfAdults = users
  .filter((u) => u.age >= 30)
  .reduce((acc, u, _, arr) => acc + u.age / arr.length, 0);

Основные моменты

Если вы видите "фронтендный код, полный for-цикла", то начинаете понимать, где точки для рефакторинга с помощью map/filter/reduce
Держите в голове параллель между библиотеками коллекций на бэкэнде (Java, Kotlin, Python, Go и т. д.)

4. Основы манипуляции с DOM: `querySelector`, `addEventListener`, `classList`

Почему это важно?

Даже используя фреймворки (React, Vue и т. д.), на этапе отладки в конечном итоге нужно смотреть на DOM.
Иногда простые страницы администрирования или внутренние инструменты создаются на чистом JS без фреймворков.

Выбор элемента – `querySelector`

<button id="save-btn">Сохранить</button>

const saveBtn = document.querySelector('#save-btn');

Использует синтаксис CSS-селекторов.

#id
.class
button.primary
div > span и т. д.

Обработчик событий – `addEventListener`

saveBtn.addEventListener('click', () => {
  console.log('Кнопка сохранения нажата!');
});

Переключение стиля/состояния – `classList`

<button id="save-btn" class="primary">Сохранить</button>

saveBtn.classList.add('loading');     // Добавить класс
saveBtn.classList.remove('primary');  // Удалить класс
saveBtn.classList.toggle('hidden');   // Если есть, удалить, если нет, добавить

Если вы знаете только это сочетание:

“Почему кнопка не нажимается?” → можно проверить, корректно ли находится элемент DOM, и есть ли событие
“Почему этот div не отображается?” → можно отследить, какие классы состояния применяются по classList

Основные моменты

Понимание базовых DOM API значительно упрощает понимание внутренней логики фреймворков
Важная привычка - это использование document.querySelector(...) в консоли браузера для проверки

5. ES Модули – Основы `import` / `export`

Почему это важно?

Теперь фронтенд JavaScript, как правило, использует ES Module (ESM).

Код делится на файлы
Используются только нужные элементы с помощью import
Даже без веб-паков/бабелей/сборщиков браузеры понимают ESM напрямую

Поскольку использование ESM также увеличивается на стороне бэкэнда (Node.js), будет полезно разобраться в этом, чтобы это помогло в обеих областях.

Экспорт модуля – `export`

// mathUtils.js
export function add(a, b) {
  return a + b;
}

export const PI = 3.14;

// Основной (default) экспорт – значение/функция, представляющая модуль
export default function mul(a, b) {
  return a * b;
}

Импорт модуля – `import`

// main.js
import mul, { add, PI } from './mathUtils.js';

console.log(add(1, 2)); // 3
console.log(mul(3, 4)); // 12
console.log(PI);        // 3.14

{ add, PI } : имя экспортируемого (named export)
mul : экспорт по умолчанию

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

<script type="module" src="/static/js/main.js"></script>

При таком объявлении вы можете использовать синтаксис import / export в main.js.

Основные моменты

Концепция "модули" одинакова для фронтенда и бэкэнда
Знание правил импорта (например, ./, ../, абсолютные пути и т. д.) поможет упростить восприятие настроек сборки для фронтенда

Бэкэнд-инженер пишет js код

Заключение – Минимум, который должен знать бэкэнд-инженер, чтобы как можно лучше взаимодействовать с фронтендом

В总结, минимальные знания, которые бэкэнд-инженер должен иметь для понимания фронтенд JS:

fetch – Выполнение HTTP-запросов и обработка JSON в браузере
Promise / async/await – Понимание структуры асинхронной логики
Методы массивов (map, filter, reduce) – Преобразование/фильтрация/агрегация данных
Основы работы с DOM (querySelector, addEventListener, classList) – Выбор элементов на экране, события и переключение состояний
ES Модули (import / export) – Понимание структуры кода по модулям

При горизонтальной агрегации с этими пятью моментами:

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

Дальше можно расширять знания по мере необходимости на фреймворках, таких как React/Vue, а также на сборке/упаковке (Webpack, Vite, SWC и т. д.).

Бэкэнд-инженер тоже должен знать это - лучшие 5 методов и модулей фронтенд JS

1. `fetch` – Выполнение HTTP-запросов в браузере

Почему это важно?

Основные инструкции

Пример POST + JSON

2. `Promise` и `async/await` – Основы асинхронной логики

Почему это важно?

Основы Promise

Чтение с помощью async/await

Параллельные вызовы (совместимый с паттерном бэкэнда)

3. Три метода для массивов: `map`, `filter`, `reduce`

Почему это важно?

`map` – Преобразование каждого элемента массива

`filter` – Оставляем только соответствующее условию

`reduce` – Сворачивание массива в одно значение

Пример с цепочкой

4. Основы манипуляции с DOM: `querySelector`, `addEventListener`, `classList`

Почему это важно?

Выбор элемента – `querySelector`

Обработчик событий – `addEventListener`

Переключение стиля/состояния – `classList`

5. ES Модули – Основы `import` / `export`

Почему это важно?

Экспорт модуля – `export`

Импорт модуля – `import`

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

Заключение – Минимум, который должен знать бэкэнд-инженер, чтобы как можно лучше взаимодействовать с фронтендом

Похожие записи

MAME RUN!! За кулисами создания – техническая сторона

Скрытые герои оптимизации изображений: свойства `width`, `height` и стратегии улучшения Core Web Vitals

Способы определения ширины браузера в JavaScript и странный опыт с браузером Samsung

JavaScript, Python словарь и std::map в C++

Оставьте комментарий

Добавить новый комментарий

1. fetch – Выполнение HTTP-запросов в браузере

Почему это важно?

Основные инструкции

Пример POST + JSON

2. Promise и async/await – Основы асинхронной логики

Почему это важно?

Основы Promise

Чтение с помощью async/await

Параллельные вызовы (совместимый с паттерном бэкэнда)

3. Три метода для массивов: map, filter, reduce

Почему это важно?

map – Преобразование каждого элемента массива

filter – Оставляем только соответствующее условию

reduce – Сворачивание массива в одно значение

Пример с цепочкой

4. Основы манипуляции с DOM: querySelector, addEventListener, classList

Почему это важно?

Выбор элемента – querySelector

Обработчик событий – addEventListener

Переключение стиля/состояния – classList

5. ES Модули – Основы import / export

Почему это важно?

Экспорт модуля – export

Импорт модуля – import

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

Заключение – Минимум, который должен знать бэкэнд-инженер, чтобы как можно лучше взаимодействовать с фронтендом

Похожие записи

MAME RUN!! За кулисами создания – техническая сторона

Скрытые герои оптимизации изображений: свойства `width`, `height` и стратегии улучшения Core Web Vitals

Способы определения ширины браузера в JavaScript и странный опыт с браузером Samsung

JavaScript, Python словарь и std::map в C++

Оставьте комментарий

Добавить новый комментарий

1. `fetch` – Выполнение HTTP-запросов в браузере

2. `Promise` и `async/await` – Основы асинхронной логики

3. Три метода для массивов: `map`, `filter`, `reduce`

`map` – Преобразование каждого элемента массива

`filter` – Оставляем только соответствующее условию

`reduce` – Сворачивание массива в одно значение

4. Основы манипуляции с DOM: `querySelector`, `addEventListener`, `classList`

Выбор элемента – `querySelector`

Обработчик событий – `addEventListener`

Переключение стиля/состояния – `classList`

5. ES Модули – Основы `import` / `export`

Экспорт модуля – `export`

Импорт модуля – `import`