Чим JS відрізняється під час роботи на front-end і back-end?

Повне пояснення

Що це і навіщо

• JavaScript – універсальна мова, що застосовується як у браузері (front‑end), так і на сервері (back‑end) через Node.js. Вона дозволяє створювати динамічні UI‑компоненти та обробляти серверну логіку.

Ключові принципи/терміни

• Event loop – цикл обробки подій, спільний для обох середовищ.
• DOM – Document Object Model, доступний лише у браузері.
• libuv – бібліотека Node.js для асинхронного I/O.
• Modules – ES‑modules у браузері, CommonJS/ESM у Node.js.

Як це працює

• У браузері код виконується в контексті window або worker, має доступ до document і API, таких як fetch.
• У Node.js код запускається в процесі V8‑рушія, має доступ до fs, net і інших серверних модулів.

Практика та реалізація

• Front‑end: document.querySelector('.btn').addEventListener('click', () => console.log('clicked'));
• Back‑end: const fs = require('fs'); fs.readFile('data.json', 'utf8', (err, data) => { if (!err) console.log(JSON.parse(data)); });

Тестування

• Front‑end: Jest + Testing Library – render(<Button />); fireEvent.click(screen.getByText('Submit')); expect(console.log).toHaveBeenCalled();
• Back‑end: Jest + Supertest – request(app).get('/api').expect(200);

Безпека та приватність

• На front‑end обмежений доступ до файлової системи; безпечність забезпечується CORS, CSP.
• На back‑end слід обмежувати доступ до файлової системи через ролі, використовувати process.env для конфігурації.

Оптимізація

• Front‑end: мінімізувати кількість DOM‑операцій, використовувати requestAnimationFrame.
• Back‑end: пул з’єднань, кешування, асинхронні обробники.

Диагностика

• Front‑end: консоль браузера, DevTools → Network.
• Back‑end: логування через console.log або Winston, профілювання з node --inspect.

Альтернативи

• Для front‑end: WebAssembly, TypeScript.
• Для back‑end: Deno, Go, Python – але JS через Node.js залишається найпоширенішим.

Часті помилки

1. Виклик document у Node.js → ReferenceError.
2. Невірне використання require в ES‑module → SyntaxError.
3. Переповнення стеку через синхронні I/O у Node.js → блокування.
4. Перевищення CORS‑політики при fetch → 403/401.
5. Неправильне оброблення колбеків → callback hell.
6. Відсутність async/await у Node.js → неочікувані проміси.
7. Перевантаження DOM у front‑end → низька продуктивність.
8. Неправильне налаштування process.env → витік конфіденційних даних.