Керування станом у React — одна з ключових тем для розробників, оскільки додатки стають дедалі складнішими, а їхня архітектура потребує продуманих рішень. Незважаючи на вбудований useState і useReducer, у багатокомпонентних додатках часто виникає необхідність централізованого керування станом. У цій статті ми розглянемо топ-5 бібліотек для керування станом у React, їхні особливості, переваги та коли їх варто використовувати.
🌟 Коли використовувати:
🔹 Основні особливості:
redux-thunk або redux-saga) дозволяють керувати асинхронними запитами.🔸 Мінуси:
🔹 Приклад Redux у дії:
// store.js
import { createStore } from 'redux';
const initialState = { count: 0 };
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case 'INCREMENT':
return { count: state.count + 1 };
case 'DECREMENT':
return { count: state.count - 1 };
default:
return state;
}
};
const store = createStore(counterReducer);
export default store;
// CounterComponent.js
import { useSelector, useDispatch } from 'react-redux';
const CounterComponent = () => {
const count = useSelector((state) => state.count);
const dispatch = useDispatch();
return (
<div>
<p>{count}</p>
<button onClick={() => dispatch({ type: 'INCREMENT' })}>+</button>
<button onClick={() => dispatch({ type: 'DECREMENT' })}>-</button>
</div>
);
};
🌟 Коли використовувати:
🔹 Основні особливості:
🔸 Мінуси:
🔹 Приклад використання:
import create from 'zustand';
const useStore = create((set) => ({
count: 0,
increment: () => set((state) => ({ count: state.count + 1 })),
decrement: () => set((state) => ({ count: state.count - 1 })),
}));
const CounterComponent = () => {
const { count, increment, decrement } = useStore();
return (
<div>
<p>{count}</p>
<button onClick={increment}>+</button>
<button onClick={decrement}>-</button>
</div>
);
};
🌟 Коли використовувати:
🔹 Основні особливості:
🔸 Мінуси:
🔹 Приклад використання:
import { atom, useRecoilState } from 'recoil';
// Створюємо атом (маленький шматочок стану)
const countState = atom({
key: 'countState',
default: 0,
});
const CounterComponent = () => {
const [count, setCount] = useRecoilState(countState);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
</div>
);
};
🌟 Коли використовувати:
🔹 Основні особливості:
🔸 Мінуси:
🔹 Приклад використання:
import { atom, useAtom } from 'jotai';
const countAtom = atom(0);
const CounterComponent = () => {
const [count, setCount] = useAtom(countAtom);
return (
<div>
<p>{count}</p>
<button onClick={() => setCount(count + 1)}>+</button>
<button onClick={() => setCount(count - 1)}>-</button>
</div>
);
};
🌟 Коли використовувати:
🔹 Основні особливості:
🔸 Мінуси:
🔹 Приклад використання:
import { useQuery } from '@tanstack/react-query';
const fetchUsers = async () => {
const res = await fetch('https://jsonplaceholder.typicode.com/users');
return res.json();
};
const UsersList = () => {
const { data, error, isLoading } = useQuery(['users'], fetchUsers);
if (isLoading) return <p>Loading...</p>;
if (error) return <p>Error loading users</p>;
return (
<ul>
{data.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
};
Обирайте бібліотеку відповідно до завдань вашого проєкту! 🚀
JavaScript — це однопотокова мова програмування, що працює на основі event loop (циклу подій). Це означає, що виконання складних або тривалих обчислень може заблокувати головний потік, зробивши додаток непрацездатним (UI перестане відповідати, а користувачі побачать “зависання”). Тому вкрай важливо правильно ділити тривалі завдання, щоб не порушувати плавність роботи застосунку.
У цій статті ми розглянемо основні способи розбиття довготривалих завдань у JavaScript, їхні переваги та недоліки.
Веб-додатки працюють у середовищі, де кожна задача виконується в основному потоці. Якщо якийсь код займає надто багато часу (наприклад, складні обчислення або обробка великої кількості даних), це блокує подальше виконання подій, включаючи анімації, введення користувача та відповіді на HTTP-запити.
Приклад проблеми:
// Симуляція довготривалої обчислювальної задачі
function longTask() {
let sum = 0;
for (let i = 0; i < 1e9; i++) { // Величезний цикл
sum += i;
}
console.log("Task completed", sum);
}
// Виклик блокує головний потік
longTask();
console.log("Цей код виконається лише після завершення довгої задачі.");
Результат:
Як цього уникнути? Ось кілька основних способів.
setTimeout або setIntervalОдним із простих способів розділити виконання тривалих завдань є розбиття задачі на менші частини та виконання їх у наступних ітераціях циклу подій.
function longTaskChunked() {
let sum = 0;
let i = 0;
function processChunk() {
let start = Date.now();
while (i < 1e9) {
sum += i;
i++;
// Виходимо з циклу, якщо витратили більше 50 мс
if (Date.now() - start > 50) {
console.log("Chunk processed");
setTimeout(processChunk, 0); // Відкладаємо наступну ітерацію
return;
}
}
console.log("Task completed", sum);
}
processChunk();
}
longTaskChunked();
requestIdleCallbackФункція requestIdleCallback дозволяє виконувати задачі, коли браузер має вільний час, тобто між основними подіями.
function longTaskIdle(deadline) {
let sum = 0;
let i = 0;
function processChunk() {
while (i < 1e9 && deadline.timeRemaining() > 0) {
sum += i;
i++;
}
if (i < 1e9) {
requestIdleCallback(processChunk);
} else {
console.log("Task completed", sum);
}
}
requestIdleCallback(processChunk);
}
longTaskIdle();
requestIdleCallback не гарантує виконання задачі в певний час.Web Workers дозволяють виконувати задачі у фоновому потоці, повністю уникаючи блокування головного потоку.
const worker = new Worker("worker.js");
worker.onmessage = function (e) {
console.log("Result from worker:", e.data);
};
worker.postMessage(1e9); // Надсилаємо велику кількість ітерацій
self.onmessage = function (e) {
let sum = 0;
for (let i = 0; i < e.data; i++) {
sum += i;
}
self.postMessage(sum); // Повертаємо результат у головний потік
};
yield у Generator функціяхГенератори (function*) дозволяють створювати “паузи” у виконанні функції, які можна контролювати.
function* longTaskGenerator() {
let sum = 0;
for (let i = 0; i < 1e9; i++) {
sum += i;
if (i % 1e6 === 0) yield; // "Перериваємося" на ітерації
}
return sum;
}
const task = longTaskGenerator();
function processNext() {
const result = task.next();
if (!result.done) {
setTimeout(processNext, 0); // Відкладаємо наступну ітерацію
} else {
console.log("Task completed", result.value);
}
}
processNext();
У JavaScript є кілька підходів до розбиття тривалих завдань:
| Метод | Блокування UI | Багатопоточність | Застосування |
|---|---|---|---|
setTimeout / setInterval |
❌ Ні | ❌ Ні | Дрібні задачі, нескладна обробка |
requestIdleCallback |
❌ Ні | ❌ Ні | Фонові задачі без чітких дедлайнів |
| Web Workers | ❌ Ні | ✅ Так | Тяжкі обчислення, незалежні задачі |
yield + Generator |
❌ Ні | ❌ Ні | Гнучке управління процесом |
setTimeout.requestIdleCallback.yield).Головне — правильний вибір інструменту, адже неправильне використання може призвести до зайвих витрат ресурсів або складнощів у підтримці коду.
Сподіваюся, ця стаття допомогла вам краще розібратися у темі! 🚀
Безпека в інтернеті — це одна з ключових тем, яку не можна ігнорувати. Якщо на сайті передаються важливі дані (наприклад, паролі або платіжна інформація), то безпечний канал зв’язку є критично важливим. SSL (Secure Sockets Layer) і його наступник — TLS (Transport Layer Security) забезпечують захищене з’єднання між клієнтом (браузером) та сервером. У цій статті пояснимо, що таке SSL, чому потрібні SSL-сертифікати та як усе це працює на практиці.
SSL (Secure Sockets Layer) — це криптографічний протокол, який створює захищений канал передачі даних через інтернет. Починаючи з певного часу, SSL-технологія була вдосконалена й формально змінилася на TLS. Однак у щоденному вжитку говорять “SSL” та “TLS” майже як синоніми. Принцип полягає у шифруванні даних та взаємній автентифікації учасників з’єднання, щоб третя сторона (зловмисник) не змогла їх прочитати чи підробити.
Навіщо потрібні SSL-сертифікати
Щоб браузер і сервер домовилися про безпечний канал, потрібен “секрет” — сертифікат, що підтверджує, що даний сервер — дійсно той, за кого себе видає. Користувач бачить “замочок” у адресному рядку (https://) і може бути впевненим, що з’єднання зашифроване.
Типові причини, чому SSL-сертифікати стали стандартом:
Захист даних
Усі дані (паролі, повідомлення, платіжна інформація), що передаються між клієнтом і сервером, стають зашифрованими. Зловмисник, який перехопить трафік, побачить лише набори зашифрованих байтів.
Автентифікація сайту
Сертифікат містить інформацію про домен, організацію, якій цей домен належить. Якщо сертифікат відповідає домену, браузер довіряє з’єднанню.
Поліпшення SEO
Починаючи з певного часу, Google краще оцінює сайти, доступні через HTTPS, у рейтингу пошуку.
Handshake
Створення сесійного ключа
Захищене з’єднання
Приклад (Nginx)
server {
listen 443 ssl;
server_name example.com;
ssl_certificate /etc/ssl/certs/cert.pem;
ssl_certificate_key /etc/ssl/private/key.pem;
location / {
proxy_pass http://localhost:3000;
}
}
Node.js (HTTPS)
const https = require('https');
const fs = require('fs');
const express = require('express');
const app = express();
const options = {
key: fs.readFileSync('key.pem'),
cert: fs.readFileSync('cert.pem')
};
https.createServer(options, app).listen(443, () => {
console.log('HTTPS server running on port 443');
});
Якщо ви вже налаштували TLS, варто розглянути HTTP/2, адже більшість браузерів вмикають HTTP/2 лише при використанні https. HTTP/2 дає мультиплексування, що покращує продуктивність (кілька запитів можуть оброблятися одночасно в межах одного TCP-з’єднання).
SSL (точніше TLS) — фундаментальний механізм захисту даних, який гарантує шифрування й перевірку автентичності домену. Без нього сучасний веб важко уявити, бо весь обмін конфіденційними даними був би небезпечним. Сертифікати можна отримати безкоштовно (Let’s Encrypt) або придбати розширені опції (OV, EV) для більш серйозних проєктів. Налаштування SSL-сертифіката не складне: достатньо згенерувати ключі, налаштувати веб-сервер і переконатись, що домен відповідає конфігурації. У результаті отримуєте https-з’єднання (замочок), підвищений рівень довіри, кращий рейтинг у пошуку та захист даних від прослуховування й атак посередника.
Node.js – це середовище виконання JavaScript, яке, попри однопоточну архітектуру, здатне обробляти велику кількість одночасних з’єднань. Однак бувають ситуації, коли додатку потрібно скористатися додатковим процесом, щоби, наприклад, розпаралелити ресурсоємну задачу, обробити складні обчислення чи забезпечити ізоляцію. У таких випадках актуальною стає проблема обміну даними між процесами. Ця стаття присвячена різним механізмам IPC (Inter-Process Communication – взаємодія між процесами) у Node.js, а також тому, як вони вирішують задачу “зшивання” даних між різними частинами застосунку.
Node.js має вбудовану можливість створювати дочірні процеси для виконання коду. Коли використовується fork(), створений процес має “канал” для обміну повідомленнями з батьківським процесом за допомогою process.send() і child.on('message').
Приклад – просте спілкування між parent.js і child.js.
child.js:
process.on('message', (msg) => {
console.log('Child received:', msg);
process.send({ reply: 'Hello from child' });
});
parent.js:
const { fork } = require('child_process');
const child = fork('./child.js');
child.on('message', (msg) => {
console.log('Parent got message:', msg);
});
child.send({ text: 'Hi child' });
Важливо, що fork() виконує новий JavaScript-файл у окремому процесі, дозволяючи паралельні обчислення і незалежний контекст, а також channel для повідомлень.
Починаючи з Node.js v10.5, з’явився модуль worker_threads, який дозволяє створювати Worker. Вони запускаються у тому самому процесі, проте мають окремий event loop, окрему пам’ять (хоча можна використовувати SharedArrayBuffer). Перевага в тому, що передача об’єктів часто є швидшою, ніж при child_process, і немає overhead створення повноцінного окремого процесу.
Приклад worker.js:
const { parentPort } = require('worker_threads');
parentPort.on('message', (data) => {
// робимо щось із data
parentPort.postMessage(`Worker processed: ${data}`);
});
Головний файл:
const { Worker } = require('worker_threads');
const worker = new Worker('./worker.js');
worker.on('message', (msg) => {
console.log('From worker:', msg);
});
worker.postMessage('Hello from main thread');
Cluster – це модуль, що дозволяє “клонуати” процес Node.js на декілька робочих (worker) процесів, які використовують одну “слухаючу” порт програму. Підходить для створення “pool” процесів, що приймають HTTP-запити, розподіляючи навантаження на всі CPU-ядра.
const cluster = require('cluster');
const http = require('http');
const numCPUs = require('os').cpus().length;
if (cluster.isMaster) {
for (let i = 0; i < numCPUs; i++) {
cluster.fork();
}
cluster.on('exit', (worker) => {
console.log(`Worker ${worker.process.pid} died, forking a new one.`);
cluster.fork();
});
} else {
http.createServer((req, res) => {
res.writeHead(200);
res.end(`Handled by worker ${process.pid}\n`);
}).listen(3000);
}
IPC у cluster
Всі робочі процеси можуть обмінюватись повідомленнями з майстер-процесом (через event worker.on('message')), а майстер може відправляти повідомлення назад worker.send(msg). Це зручно, коли потрібно зберігати якісь глобальні дані, які синхронізуються поміж процесами.
Якщо у вас складна система мікросервісів, Node.js-процеси можуть взагалі не обмежуватись єдиним хостом. Тоді ефективно застосовувати зовнішній брокер повідомлень (Redis Pub/Sub, RabbitMQ, Kafka). Це переходить із рівня локального IPC до рівня мережевого, проте концептуально виконує схожу функцію — обмін даними між процесами.
IPC у Node.js дозволяє писати більш потужні та масштабовані застосунки, оскільки перерозподіляє завдання поміж кількома процесами чи потоками. Вибір інструменту залежить від вашого сценарію:
Правильне налаштування IPC, врахування безпеки, перезапуску при помилках та ефективне передавання даних — все це складається у архітектуру Node-додатків, що можуть обробляти значні навантаження та лишатися стабільними.
React дозволяє створювати інтерфейси, які оновлюються лише тоді, коли дані справді змінюються. Але на практиці трапляються випадки, коли компоненти рендеряться знову й знову, навіть без реальної потреби. Це може знижувати продуктивність, спричиняти “пригальмовування” та сповільнювати відгук додатка. У цій статті зібрано ключові прийоми та концепції, які допоможуть вам ефективно боротися з надлишковими перерендерами і зберігати високу швидкодію UI.
React працює за принципом Virtual DOM, порівнюючи попередній стан з новим та оновлюючи інтерфейс лише там, де відбулися зміни. Але якщо компонент “вважає”, що змінився його проп або стан, відбувається повторний рендер. Якщо таких повторів багато, UI може почати гальмувати. Особливо це помітно у великих таблицях, списках або багаторівневих компонентах.
Анонімні функції та об’єкти у пропсах
Кожного разу при рендері батьківський компонент створює нове посилання (наприклад, () => setState(…)), яке React бачить як “зміна пропів” у дочірнього компонента.
Зміна контексту (Context)
Коли в контексті оновлюється навіть одне поле, всі компоненти, які його споживають, можуть перерендеритися.
Відсутність мемоізації
Якщо підкомпоненти не “захищені” за допомогою React.memo або PureComponent, вони можуть рендеритись навіть при незначних змінах у батьківському компоненті.
Фальшиві оновлення стану
Коли викликається setState з тим самим значенням (наприклад, setCount(count)), React теж ініціює рендер (хоча він може оптимізувати, якщо ви користуєтесь певними підходами).
DevTools Profiler
Chrome DevTools (Performance) або профайлер у React DevTools дають змогу побачити, які компоненти рендеряться і скільки часу це займає.
why-did-you-render
Спеціальна бібліотека, яка вказує у консоль, коли React виконує перерендер компонента і чому він вважає, що пропи змінились.
Для функціональних компонентів існує React.memo, який проводить поверхневе порівняння пропів:
const MyComponent = React.memo(function MyComponent(props) {
console.log('Render MyComponent');
return <div>{props.value}</div>;
});
Якщо props.value не змінився (поверхнево), MyComponent не буде ререндеритися. Проте це працює лише, якщо пропи є простими (числа, рядки). Для об’єктів чи масивів, які завжди створюються заново, React.memo не допоможе без додаткових прийомів.
Якщо передаємо у пропсах функції чи складні об’єкти, бажано використовувати useCallback і useMemo, щоб React “запам’ятав” (мемоізував) значення. Наприклад:
function Parent() {
const [count, setCount] = useState(0);
const increment = useCallback(() => setCount(c => c + 1), []);
return <Child onClick={increment} />;
}
Тепер onClick завжди має те саме посилання на функцію, і якщо Child обгорнуто в React.memo, він не ререндеритиметься при зміні count (якщо на інші пропи це не впливає).
Якщо контекст (React Context) містить багато даних або часто змінюється, кожен Consumer може ререндеритися. Один зі способів:
Захист від “фальшивих” оновлень
function Parent() {
const [count, setCount] = useState(0);
const increment = () => {
setCount(prev => {
if (prev === 100) return prev; // Якщо досягнуто межі, не оновлюємо
return prev + 1;
});
};
return <button onClick={increment}>{count}</button>;
}
У такому разі, якщо поточний стан уже 100, ми не викликаємо непотрібний рендер.
Для складних даних у стані можна використовувати такі бібліотеки, щоб грамотно робити immutable-оновлення, не створюючи “зайвих” нових об’єктів. Це зменшує ризик випадкових перезаписів, що провокують ререндер.
MobX автоматично “прив’язує” компоненти до певних спостережуваних (observable) полів. Якщо поле не змінювалося, компонент не ререндериться. Проте це вимагає додаткових архітектурних рішень, а також знання MobX.
Якщо у батьківському компоненті є багато дочірніх, краще “розділити” логіку так, щоб дочірні компоненти отримували тільки ті пропи, які їм дійсно потрібні. Таким чином, якщо змінюється якась глобальна змінна, яку не використовує конкретний дочірній компонент, він не рендериться.
Якщо у вас є довгий список (наприклад, відображення сотень чи тисяч елементів), зверніть увагу на:
Зайві перерендери у React можуть “з’їдати” продуктивність, але є багато способів боротися з ними. Головне — зрозуміти, чому відбуваються ці повторні рендери: чи це через передачу функцій-анонімок, великих об’єктів у пропсах, чи, можливо, контекст оновлюється надто часто. Правильне використання React.memo, useCallback, useMemo, архітектурне розділення стану, оптимізація контексту — усе це зменшить кількість непотрібних рендерів. У підсумку, користувачі отримають швидкі й чуйні інтерфейси, а код стане більш передбачуваним і зручним у підтримці.
Час завантаження сайту часто є вирішальним чинником для користувачів: якщо сторінка вантажиться надто довго, відвідувач може просто піти. Це безпосередньо впливає на конверсії, SEO та загальний досвід користувачів. Тож “як прискорити завантаження сайту?” — питання, яке хвилює багатьох розробників. У цій статті зібрано найважливіші поради та прийоми, які можна легко реалізувати у будь-якому веб-проєкті.
Вибір правильного формату
Стиснення
Ледаче завантаження (lazy loading)
Об’єднання файлів (bundling)
Використання CDN
Попереднє завантаження (preload, prefetch)
Мінімізація
Вилучення невикористаного коду
Кеш заголовки (cache headers)
Service Worker
Динамічне підключення
Code splitting
Прискорення завантаження сайту — це багатоаспектне завдання. Часто розпочинають із оптимізації зображень та мінімізації ресурсів (CSS, JS), налаштування кешу. Потім переходять до тонших прийомів, таких як lazy loading, code splitting, використання CDN і коректного налаштування сервера (HTTP/2, Gzip). Важливо постійно моніторити швидкодію та стежити за рекомендаціями інструментів на кшталт Lighthouse. Правильна оптимізація дасть вашому сайту швидший старт, кращий досвід для користувачів та позитивний вплив на SEO.
Laravel давно вважається одним із найпопулярніших фреймворків для PHP завдяки його простоті, структурі і великій спільноті. Проте одна з ключових проблем у проєктах на Laravel — це налаштування середовища, особливо якщо розробники працюють на різних операційних системах. Docker дає змогу створювати уніфіковані середовища для розробки та продакшену, значно спрощуючи життєвий цикл додатка. У цій статті розглянемо, як працювати з Docker для Laravel, з чого почати та як налагодити процес розгортання.
Уніфіковане середовище
Якщо один розробник працює на Linux, інший на Windows, а третій на macOS, виникають різні нюанси налаштування PHP, бази даних і розширень. Docker виключає такі конфлікти, адже всі запускаються в однакових контейнерах.
Легке масштабування
Для продакшен-середовища можна швидко підняти кілька контейнерів з різними компонентами: Nginx/PHP-FPM, Redis, MySQL. Це робить додаток більш гнучким для навантажень і розподілення сервісів.
Зручне оновлення середовища
Якщо потрібна інша версія PHP або якесь нове розширення, змінюють Dockerfile, а потім перезбирають контейнер. Не треба ручного “відловлювання” несумісностей.
CI/CD інтеграція
Docker гарно інтегрується з інструментами безперервної інтеграції і деплою, адже один і той самий образ можна запускати в розробці, на тест-середовищі і в продакшені.
Найпростіший варіант — використати офіційні образи PHP (з розширеннями) і MySQL/Redis. Але зручніше мати docker-compose.yml, де буде описано всі сервіси.
docker-compose.yml
version: "3.9"
services:
app:
build:
context: .
dockerfile: Dockerfile
image: laravel-app
container_name: laravel_app
volumes:
- ./:/var/www/html
ports:
- "8000:80"
depends_on:
- db
db:
image: mysql:8
container_name: laravel_db
environment:
MYSQL_DATABASE: laravel_db
MYSQL_ROOT_PASSWORD: secret
MYSQL_USER: laravel
MYSQL_PASSWORD: secret
ports:
- "3306:3306"
Dockerfile
# Залежить від PHP-образу з фреймворком
FROM php:8.1-fpm
# Встановлюємо додаткові розширення (gd, pdo, etc.)
RUN apt-get update && apt-get install -y \
libpng-dev \
libonig-dev \
libxml2-dev \
zip \
unzip
RUN docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd
# Composer
COPY --from=composer:2 /usr/bin/composer /usr/bin/composer
WORKDIR /var/www/html
# Виставляємо права доступу
RUN chown -R www-data:www-data /var/www/html
# За замовчуванням php-fpm буде слухати 9000 порт
EXPOSE 80
CMD ["php-fpm"]Пояснення
php:8.1-fpm./var/www/html.Після того, як ми маємо docker-compose.yml і Dockerfile, у корені проєкту (там, де папка з Laravel) можна запустити
docker-compose build
docker-compose up -d
Тепер у браузері можна перейти на http://localhost:8000 і побачити Laravel.
DB_CONNECTION=mysql
DB_HOST=db
DB_PORT=3306
DB_DATABASE=laravel_db
DB_USERNAME=laravel
DB_PASSWORD=secret
Тут DB_HOST=db означає ім’я сервісу з docker-compose.
Зверніть увагу, що у docker-compose.yml використовується
volumes:
- ./:/var/www/htmlЦе означає, що локальна папка відображена у контейнері як /var/www/html. Усі зміни, які ви робите локально (редагування файлів Laravel), автоматично відображаються у контейнері, тож немає потреби ребілдити контейнер.
Виготовляйте окремі Dockerfile для development і production.
Якщо залежності встановлюються часто, оптимізуйте шари Dockerfile так, щоб composer install кешувався, якщо composer.json не змінюється.
Приклад виробничого Dockerfile (Production)
FROM php:8.1-fpm as builder
RUN apt-get update && apt-get install -y \
libpng-dev \
libonig-dev \
libxml2-dev \
zip \
unzip
RUN docker-php-ext-install pdo_mysql mbstring exif pcntl bcmath gd
COPY --from=composer:2 /usr/bin/composer /usr/bin/composer
WORKDIR /var/www/html
COPY composer.json composer.lock ./
RUN composer install --no-dev --optimize-autoloader
COPY . .
RUN php artisan config:cache
FROM php:8.1-fpm
COPY --from=builder /var/www/html /var/www/html
WORKDIR /var/www/html
CMD [\"php-fpm\"]Структура
Docker дає змогу зробити процес розробки Laravel проєктів більш передбачуваним і контрольованим. Замість витрачати час на ручне налаштування PHP, розширень і СУБД, ми описуємо все у Dockerfile і docker-compose.yml, а потім просто запускаємо контейнери. Це особливо корисно, коли команда розробників велика або коли потрібно швидко відтворити середовище для тестування чи продакшену. Незважаючи на початкові труднощі, переваги (універсальність середовища, масштабованість, легкість деплою) роблять Docker для Laravel гарним вибором.
Сучасні веб-додатки дедалі частіше вимагають реального часу або майже миттєвого обміну даними між клієнтом та сервером. Класичний підхід, де клієнт надсилає запити (requests) через HTTP, а сервер відповідає (responses), не завжди ефективний для задач, які потребують постійного потоку інформації (наприклад, чати, ігри, аналітика, оновлення в реальному часі). Саме тут у гру вступають WebSocket і Socket.IO. У цій статті ми розглянемо, що таке WebSocket, чому він важливий для вебу, а також дізнаємось про Socket.IO — фреймворк, який спрощує роботу з WebSocket і надає додаткові можливості.
WebSocket — це протокол, що забезпечує двосторонній зв’язок (full-duplex) між клієнтом і сервером. На відміну від HTTP, де кожен запит ініціюється клієнтом, WebSocket відкриває постійне з’єднання: клієнт і сервер можуть надсилати повідомлення один одному будь-коли. Це дозволяє:
const socket = new WebSocket('ws://example.com');
// коли з’єднання відкрите
socket.addEventListener('open', () => {
console.log('WebSocket connection established');
socket.send('Hello from client');
});
// коли отримуємо повідомлення від сервера
socket.addEventListener('message', (event) => {
console.log('Received:', event.data);
});
// коли з’єднання закрите
socket.addEventListener('close', () => {
console.log('WebSocket connection closed');
});
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('New client connected');
ws.on('message', (message) => {
console.log('Received:', message);
ws.send('Hello from server');
});
ws.on('close', () => {
console.log('Client disconnected');
});
});
Хоча WebSocket — потужний стандарт, є моменти, де можуть виникати труднощі:
Socket.IO — це бібліотека, яка поверх WebSocket (а також fallback-механізмів) надає більш високорівневий API. Вона полегшує розробку у реальному часі. Якщо з’єднання WebSocket недоступне (старий браузер чи певний проксі), Socket.IO автоматично переключається на інші методи (HTTP Long Polling).
Приклад: швидкий чат на Socket.IO
Сервер (Node.js)
const express = require('express');
const http = require('http');
const { Server } = require('socket.io');
const app = express();
const server = http.createServer(app);
const io = new Server(server);
io.on('connection', (socket) => {
console.log('A user connected');
socket.on('chat message', (msg) => {
// транслюємо повідомлення усім підключеним клієнтам
io.emit('chat message', msg);
});
socket.on('disconnect', () => {
console.log('User disconnected');
});
});
server.listen(3000, () => {
console.log('Listening on *:3000');
});
Клієнт (HTML+JS)
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO Chat Example</title>
</head>
<body>
<ul id="messages"></ul>
<form id="form">
<input id="input" autocomplete="off" /><button>Send</button>
</form>
<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io();
const form = document.getElementById('form');
const input = document.getElementById('input');
const messages = document.getElementById('messages');
form.addEventListener('submit', (e) => {
e.preventDefault();
if (input.value) {
socket.emit('chat message', input.value);
input.value = '';
}
});
socket.on('chat message', (msg) => {
const li = document.createElement('li');
li.textContent = msg;
messages.appendChild(li);
});
</script>
</body>
</html>
Пояснення:
Встановлення автентифікації
Якщо треба, щоб WebSocket чи Socket.IO були захищеними, можна додавати токен (JWT) або інший механізм аутентифікації. Для Socket.IO існують middleware, щоб перевіряти користувача під час handshake.
Використання HTTPS (WSS)
Для безпечного каналу використовується wss:// (WebSocket Secure) замість ws://. Аналогічно з https://, щоб дані передавалися шифрованими.
WebSocket дозволяє створювати постійний двосторонній канал зв’язку між клієнтом і сервером, що робить можливим реалізацію режиму реального часу. Socket.IO, у свою чергу, спрощує управління з’єднаннями, перехоплення подій та відновлення з’єднання. Обираючи між чистим WebSocket і Socket.IO, варто враховувати складність проєкту, необхідність fallback-механізмів, а також потребу в додаткових функціях (кімнати, broadcast, тощо).
У будь-якому випадку робота з реальним часом виводить веб-додатки на новий рівень інтерктивності та покращує досвід користувачів. Якщо ваш проект потребує миттєвого оновлення даних, повідомлень чи спільного редагування — варто вивчити WebSocket і Socket.IO, щоб обрати найзручніший та найефективніший варіант реалізації.
Express залишається одним із найпопулярніших фреймворків для Node.js, який допомагає швидко й гнучко створювати веб-сервери. Незважаючи на конкуренцію зі сторони Nest, Fastify та інших технологій, Express зберігає простоту й зрозумілість, що приваблює тисячі розробників. Версія 5.0 (Express 5) обговорюється вже досить довго, але тепер настав час серйозно задуматися про перехід. У цій статті ми розглянемо, чому варто оновитися до Express 5.0, які ключові зміни відбулися й що це означає для вашого коду та проєктів.
Спочатку згадаємо, за що розробники люблять Express:
Express 5.0 розроблявся вже кілька років. Основна ідея — очистити фреймворк від застарілих API, підготувати його до сучасних можливостей Node.js і змін у JavaScript.
Офіційне вилучення застарілих методів
Кілька методів та middleware, що давно були позначені, як deprecated, нарешті зникли з кодової бази. Це зменшує “захаращення” фреймворку, робить його код більш підтримуваним.
Покращена підтримка промісів
Express 5.0 працює краще з асинхронними функціями і промісами. Хоча Express завжди базувався на middleware з колбеками, у сучасному JS дедалі частіше застосовуються async/await. Express 5.0 пропонує офіційні способи обробляти помилки, коли ви використовуєте асинхронні методи.
Оновлені middleware
Деякі middleware, що раніше постачалися у складі Express, тепер виокремлено в окремі пакети. Це впорядковує залежності: коли middleware оновлюється, вам не обов’язково чекати оновлення усього Express.
Наприклад, bodyParser перестав бути частиною ядра, його слід підключати самостійно.
Типові покращення продуктивності
Завдяки оновленням у Node.js і внутрішній реорганізації фреймворку, Express 5.0 має трішки кращу продуктивність у деяких сценаріях, хоча це не основна мета релізу. Можливо, ви отримаєте незначний приріст швидкодії без змін у коді.
Підтримка сучасних версій Node.js
Express 5.0 офіційно орієнтується на нові видання Node.js, які підтримують сучасні фічі ECMAScript.
npm install express@latest
Переконайтеся, що всі супутні пакети оновлено і що вони сумісні з Express 5.
bodyParser, тепер варто додатиnpm install body-parser
у ваші залежності й підключати окремо.
Перевірка на deprecated API
Погляньте на лог змін (changelog) Express 5. Там зможете знайти список застарілих методів, які тепер прибрано. Якщо у вашому коді все ще використовується, доведеться внести правки.
Тестування async/await
Якщо ваш код містить асинхронні функції — перевірте, чи все працює, як слід, і чи коректно відбувається обробка помилок (catch). Express 5 дозволяє більш чітко відловлювати винятки, що виникають у асинхронній логіці.
Більшість проєктів з Express можуть оновитися досить безболісно, якщо вони вже уникали deprecated API і middleware. Основне, що зміниться:
Приклад коду
const express = require('express');
const bodyParser = require('body-parser'); // Тепер встановлюємо окремо
const app = express();
// Налаштовуємо middleware
app.use(bodyParser.json());
// Асинхронний маршрут
app.get('/users/:id', async (req, res) => {
const { id } = req.params;
try {
const user = await getUserFromDB(id);
if (!user) {
return res.status(404).send({ error: 'User not found' });
}
res.send({ user });
} catch (err) {
res.status(500).send({ error: 'Something went wrong' });
}
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
Ключовий момент: async/await, а також body-parser підключено через окремий пакет.
Якщо ваш проєкт дуже великий, і ви залежите від численних плагінів, що можуть бути несумісні з Express 5, варто дочекатися, поки ці плагіни офіційно оновляться. Перед міграцією добре запустити тести та перевірити роботу всієї системи.
Express 5.0 — логічний крок уперед для фреймворку, який роками лишається ключовим інструментом у Node.js-екосистемі. Новий реліз вилучає застарілі речі, краще підтримує асинхронний синтаксис, дозволяє продовжити роботу з сучасними версіями Node.js і отримати трохи кращу продуктивність. Якщо ваш код уже більш-менш дотримується поточних практик, перехід має бути нескладним. У результаті ви отримаєте чистіше API, ефективнішу обробку помилок та зручне середовище для подальших оновлень і розширень.
JavaScript часто використовують для розробки фронтенд-додатків, але ця мова також поширена на бекенді завдяки Node.js. Незалежно від сфери застосування, знання структур даних і алгоритмів є важливою складовою для розробників, оскільки вони впливають на ефективність та підтримку коду. У цій статті ми розглянемо, які структури даних доступні в JavaScript, як їх застосовувати на практиці, а також обговоримо кілька базових алгоритмів, без яких не обходиться жоден серйозний проєкт.
Найпоширеніша структура даних у JS. Відрізняється від традиційних масивів у мовах на кшталт C++ чи Java, адже насправді це об’єкт із числовими індексами. Проте для більшості випадків можна вважати його динамічним масивом.
const arr = [10, 20, 30];
arr.push(40); // додає елемент у кінець
arr.pop(); // видаляє останній елемент
console.log(arr[1]); // 20
Порада: масиви підходять для більшості операцій, де потрібен швидкий доступ за індексом і швидке додавання в кінець. Однак вставка чи видалення елементу всередині вимагає O(n) часу.
Об’єкти в JavaScript часто використовують як хеш-таблиці (key-value). Але вони мають обмеження, адже ключі завжди перетворюються на рядки. Також є ризик конфлікту з “вбудованими” ключами в prototype.
const obj = {};
obj['name'] = 'Alice';
obj.age = 25;
console.log(obj.name, obj.age);
Починаючи з ECMAScript 2015, з’явилися Map і Set, які точніше реалізують ідею “словника” та “множини”.
Map — це структура ключ-значення, схожа на об’єкт, проте ключі можуть бути будь-якого типу (навіть об’єктами чи функціями).
const map = new Map();
map.set('name', 'Alice');
map.set({ id: 1 }, 'UserOne');
console.log(map.get('name')); // 'Alice'
console.log(map.size); // 2
Основні переваги:
Set — це структура, що зберігає унікальні значення. Додаючи елемент, якщо він уже присутній, операція ігнорується.
const set = new Set([10, 20, 30]);
set.add(20);
set.add(40);
console.log(set); // Set(4) { 10, 20, 30, 40 }
console.log(set.has(10)); // true
Зручно, коли потрібно тримати унікальні елементи (наприклад, збирання унікальних ID).
Це спеціалізовані структури, схожі на Map і Set, але ключі (в WeakMap) і значення (в WeakSet) є “слабкими” посиланнями на об’єкти. Це дає переваги в автоматичному очищенні (збирач сміття прибирає об’єкт, якщо більше немає сильних посилань). Корисно для кешування без ризику “витоку” пам’яті.
Лінійний пошук (Linear search) Перевіряємо кожен елемент у масиві, поки не знайдемо потрібний. Складність O(n). Для невеликих масивів достатньо, але якщо масив дуже великий — це повільно.
Бінарний пошук (Binary search) Працює тільки в відсортованому масиві. Починаємо з середини, якщо елемент більший від шуканого — йдемо в ліву частину, інакше — у праву. Складність O(log n).
function binarySearch(arr, target) {
let left = 0;
let right = arr.length - 1;
while (left <= right) {
const mid = Math.floor((left + right)/2);
if (arr[mid] === target) {
return mid;
} else if (arr[mid] < target) {
left = mid + 1;
} else {
right = mid - 1;
}
}
return -1;
}
JS має вбудований метод sort(), але важливо знати, що:
const numbers = [10, 2, 30];
numbers.sort((a, b) => a - b); // [2, 10, 30]
При використанні .sort() всередині реалізовано алгоритм Timsort (O(n log n) у середньому). У більшості випадків цього достатньо.
Хоча вбудованих структур (Tree чи Graph) в JS немає, можна реалізувати самостійно:
Основні алгоритми:
Приклад BFS у графі:
function bfs(start, graph) {
const visited = new Set();
const queue = [start];
visited.add(start);
while (queue.length) {
const current = queue.shift();
console.log(current);
for (const neighbor of graph.get(current) || []) {
if (!visited.has(neighbor)) {
visited.add(neighbor);
queue.push(neighbor);
}
}
}
}
У graph зберігається Map, де ключі — назви вершин, а значення — масив суміжних вершин.
Пам’ятайте, що в JS відсутнє вбудоване API для графів, доведеться робити все вручну.
Як правильно підбирати структуру даних?
Структури даних (Array, Map, Set, Tree, Graph) і алгоритми (пошук, сортування, BFS/DFS) — це основа для ефективного коду. У JavaScript, незважаючи на те, що мова спочатку задумувалася як проста для браузерних задач, зараз є достатньо інструментів для реалізації як базових, так і складних структур. Важливо розуміти, як працюють масиви, об’єкти, Map та Set, щоб вибирати правильний інструмент для конкретної задачі. А вміння застосовувати алгоритми (лінійний або бінарний пошук, сортування, обходи у графах) допоможе створювати швидші й надійніші застосунки, які будуть добре масштабуватися разом із проєктом.
Відкрийте криптовалютну картку Trustee за кілька хвилин! Оплачуйте ваші покупки миттєво з автоматичною конвертацією