React – це одна з найпопулярніших бібліотек для створення сучасних веб-додатків. Одна з ключових переваг React – це його велика екосистема додаткових бібліотек, які дозволяють швидко розширювати функціональність та прискорювати розробку. Але велика кількість доступних бібліотек іноді ускладнює вибір.
Тож які бібліотеки варто використовувати у ваших React-додатках? У цій статті ми розглянемо найкращі, перевірені часом та спільнотою бібліотеки, які рекомендують експерти React-розробки.
Redux – це стандартна бібліотека для керування глобальним станом у великих React-додатках.
Однак використання чистого Redux може бути занадто громіздким. Тут на допомогу приходить Redux Toolkit, який значно спрощує написання Redux-коду:
import { configureStore, createSlice } from '@reduxjs/toolkit';
const counterSlice = createSlice({
name: 'counter',
initialState: 0,
reducers: {
increment: (state) => state + 1,
decrement: (state) => state - 1,
},
});
export const { increment, decrement } = counterSlice.actions;
const store = configureStore({
reducer: {
counter: counterSlice.reducer,
},
});
Zustand – це легка і проста бібліотека для керування станом, яка ідеально підходить для невеликих і середніх додатків.
Приклад використання Zustand:
import { create } from 'zustand';
const useStore = create(set => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
}));
function Counter() {
const { count, increment } = useStore();
return <button onClick={increment}>{count}</button>;
}
React Router – це фактично стандартна бібліотека для маршрутизації в React-додатках.
Приклад простого роутингу:
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
Material UI – це популярна бібліотека UI-компонентів, що реалізує принципи Google Material Design.
Приклад кнопки з Material UI:
import Button from '@mui/material/Button';
function MyButton() {
return <Button variant="contained" color="primary">Click Me!</Button>;
}
Tailwind – це CSS-фреймворк, який набув величезної популярності завдяки своїй простоті й швидкості розробки.
Приклад використання Tailwind у React:
function MyCard() {
return (
<div className="p-6 bg-white rounded-lg shadow-lg">
<h2 className="text-xl font-bold">Tailwind CSS + React</h2>
</div>
);
}
React Query – це надзвичайно потужна бібліотека для роботи з асинхронними даними у React.
Приклад використання:
import { useQuery } from '@tanstack/react-query';
function Users() {
const { isLoading, error, data } = useQuery(['users'], () =>
fetch('/api/users').then(res => res.json())
);
if (isLoading) return 'Loading...';
if (error) return 'Error loading data!';
return (
<ul>
{data.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
Framer Motion – найкращий вибір для створення сучасних та плавних анімацій у React-додатках.
Приклад використання:
import { motion } from 'framer-motion';
function AnimatedButton() {
return (
<motion.button
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
>
Click me!
</motion.button>
);
}
Formik – це бібліотека, яка значно спрощує роботу з формами у React.
Приклад з Formik та Yup:
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
const schema = Yup.object({
email: Yup.string().email('Invalid email').required('Required'),
});
function MyForm() {
return (
<Formik
initialValues={{ email: '' }}
validationSchema={schema}
onSubmit={values => console.log(values)}
>
<Form>
<Field name="email" type="email" />
<ErrorMessage name="email" />
<button type="submit">Submit</button>
</Form>
</Formik>
);
}
React має неймовірно багату екосистему, яка може задовольнити практично будь-які потреби вашого додатка. Використання рекомендованих бібліотек допоможе вам писати чистий, ефективний і підтримуваний код, значно пришвидшивши розробку ваших проєктів.
Не забувайте, що найкращий набір інструментів залежить від вашого конкретного завдання. Тому експериментуйте, аналізуйте свої потреби та обирайте те, що найкраще підходить саме вам! 🚀
Довгий час вважалося, що браузер – це середовище виключно для JavaScript. Але що, якби ви могли запускати в браузері код, написаний на C++, Rust чи навіть Python, без необхідності переписувати його на JavaScript? Колись це звучало як фантастика, однак зараз це реальність завдяки технології під назвою WebAssembly (Wasm).
Як WebAssembly змінив наше розуміння того, що можливо зробити в браузері, та як ця технологія робить «неможливе» можливим — саме про це ми й поговоримо.
WebAssembly – це бінарний формат інструкцій для виконання коду у веб-браузері з продуктивністю, близькою до «нативної». Простими словами, це технологія, яка дозволяє запускати в браузері програми, написані на будь-якій мові програмування, що компілюється у WebAssembly (наприклад, C++, Rust, Go, Python тощо).
Замість того, щоб переписувати код для браузера на JavaScript, ви можете взяти готову програму, скомпілювати її в WebAssembly та запустити прямо в браузері. Це відкриває фантастичні можливості для розробників.
WebAssembly зробив реальністю те, що раніше було неможливо або дуже складно зробити в браузері. Ось кілька яскравих прикладів того, як Wasm змінив веб:
Завдяки WebAssembly ігри з високою графікою та складною логікою, які раніше можна було запускати лише як десктопні застосунки, стали доступними прямо в браузері. Це стало можливим завдяки компіляції ігрових движків (наприклад, Unity або Unreal Engine) у WebAssembly.
Прикладом є браузерна версія гри DOOM 3, яка запускається безпосередньо у браузері через WebAssembly.
Обчислення великих обсягів даних чи складна бізнес-логіка традиційно запускалась на сервері. Тепер завдяки WebAssembly частину цих обчислень можна винести на клієнтську частину, суттєво зменшуючи навантаження на сервер і прискорюючи час відгуку додатків.
Інструменти для редагування зображень, аудіо та відео, які раніше працювали лише у вигляді нативних додатків (Photoshop, Lightroom, Premiere), тепер можуть легко переноситись у браузер завдяки компіляції коду у WebAssembly.
Наприклад, редактор Figma використовує WebAssembly для прискорення роботи з графікою.
Те, що робить WebAssembly справді особливим, – це його здатність виконуватися з майже нативною швидкістю. Як це можливо?
На відміну від JavaScript, WebAssembly – це низькорівневий бінарний формат. Це означає, що браузеру не потрібно витрачати час на парсинг і виконання текстового JavaScript. WebAssembly інструкції швидко завантажуються та виконуються віртуальною машиною браузера.
WebAssembly підтримує багатопоточність, дозволяючи використовувати багатоядерні процесори браузера. Це особливо важливо для завдань, що вимагають інтенсивних обчислень, таких як шифрування, обробка відео та складна фізика у іграх.
WebAssembly тісно взаємодіє з JavaScript, що дозволяє легко інтегрувати нову технологію в існуючі додатки. JavaScript може викликати функції WebAssembly і навпаки, створюючи потужну симбіозну модель розробки.
Приклад інтеграції JavaScript з WebAssembly:
fetch('example.wasm').then(response =>
response.arrayBuffer()
).then(bytes =>
WebAssembly.instantiate(bytes)
).then(result => {
const wasmInstance = result.instance;
console.log(wasmInstance.exports.sum(5, 7)); // Виклик WebAssembly-функції
});
Незважаючи на всі свої переваги, WebAssembly не є «срібною кулею»:
Розвиток WebAssembly йде дуже швидко. Серед найближчих перспективних напрямків:
Якщо ви хочете почати працювати з WebAssembly, ось кілька порад:
WebAssembly перетворив браузери з простих «переглядачів» веб-сторінок на потужну платформу для створення додатків, які ще декілька років тому здавалися неможливими.
Можливість запускати складні, продуктивні додатки безпосередньо в браузері кардинально змінює правила гри. І хоча WebAssembly ще тільки набирає обертів, його потенціал вже важко переоцінити.
Те, що раніше здавалося неможливим, вже тут, доступне просто у вашому браузері. Саме це і є справжньою магією WebAssembly. ✨
Кожен, хто хоч трохи знайомий із сучасним Інтернетом, чув термін «SSL-сертифікат». Імовірно, ви бачили значок замочка в адресному рядку вашого браузера, який свідчить, що з’єднання із сайтом «безпечне». Це означає, що ваші дані захищені за допомогою протоколу TLS (Transport Layer Security), який багато хто знає як SSL. Але чи насправді це гарантія абсолютної безпеки? Наскільки бездоганна система, на яку ми так активно покладаємося?
Розглянемо детальніше фундаментальну проблему TLS/SSL та зрозуміємо, чому сучасна система сертифікації не настільки бездоганна, як здається.
Спочатку коротко пояснимо, як працює SSL/TLS:
Здавалося б, проста і зрозуміла схема. Але що може піти не так?
Головна проблема полягає саме в понятті «довірений центр». Система TLS/SSL ґрунтується на безумовній довірі до CA. Якщо хоча б один центр сертифікації зламано або скомпрометовано, це ставить під загрозу весь механізм безпеки.
Фактично, це питання централізованої довіри. Браузери за замовчуванням мають список сотень центрів сертифікації, яким вони повністю довіряють. Якщо зловмисники отримають доступ хоча б до одного такого центру, вони зможуть створювати сертифікати для будь-яких сайтів.
Історія свідчить, що такі ситуації вже траплялися неодноразово.
Один із найгучніших інцидентів, що стався у 2011 році, пов’язаний із нідерландським центром сертифікації DigiNotar. Хакери отримали доступ до його системи та створили фальшиві сертифікати для сайтів, включно з Google. Це дозволило їм перехоплювати й розшифровувати трафік користувачів, видаючи себе за легітимні сайти.
Як наслідок:
Знаменитий центр сертифікації Symantec також потрапив у скандал. Google виявив численні порушення у видачі сертифікатів, включно з видачею сертифікатів без належної перевірки та реєстрації доменів.
Це призвело до того, що:
Це наочно демонструє, що навіть найбільші компанії не застраховані від помилок, а централізована модель TLS робить такі інциденти особливо небезпечними.
Фундаментальна проблема TLS/SSL пов’язана з централізованою природою довіри. Якщо довіра до CA втрачена, єдиний вихід – видалити цей центр із списку довірених. Але в такому разі тисячі сайтів, які отримали сертифікати від цього CA, миттєво втратять статус «безпечних».
Інші фактори, що ускладнюють вирішення проблеми:
Щоб зменшити ризики, було створено механізм Certificate Transparency. Це публічні журнали, де реєструється кожен випущений сертифікат. Це дозволяє швидше виявляти зловживання та невідповідності.
Однак це не розв’язує проблему докорінно – журнал CT лише дозволяє виявити компрометацію постфактум.
DANE (DNS-based Authentication of Named Entities) дозволяє прив’язувати TLS-сертифікати до доменних імен за допомогою захищеного DNS (DNSSEC). У цьому випадку довіра переноситься від CA до DNS-системи, яка також має свої проблеми безпеки, але значно менш централізована.
Перспективним є використання блокчейн-технологій для створення децентралізованих систем видачі сертифікатів. Децентралізована модель прибирає єдину точку відмови та потенційно зменшує ризики.
Хоча цей підхід і перспективний, він наразі ще недостатньо зрілий для повсюдного застосування.
З практичної точки зору, користувачі та адміністратори можуть:
Фундаментальна проблема TLS/SSL – це проблема довіри до довірених центрів. Центральна система видачі сертифікатів завжди буде вразливою до людських помилок, халатності чи атак. Нинішні заходи, такі як Certificate Transparency, допомагають зменшити ризики, але не усувають причину проблеми повністю.
У майбутньому нам варто розглядати більш децентралізовані й прозорі системи управління сертифікатами, що можуть забезпечити не лише безпеку, а й справжню довіру.
Поки ж довіра – це не гарантія, а лише умова роботи сучасного Інтернету, яку потрібно постійно перевіряти.
CSS — це не просто стилі для тексту та кольорів. Це справжня магія, яка дозволяє створювати неймовірні дизайни та анімації, перетворюючи звичайні веб-сторінки на витвори мистецтва. Проте для новачків (та й навіть для досвідчених верстальників) CSS часто може здатися загадковим та незрозумілим. У цій статті ми розглянемо практичні та незвичайні поради від справжнього CSS-гіка, які допоможуть вам освоїтися в цій магії.
Якщо ви досі не використовуєте CSS Grid, ви багато втрачаєте. Grid дозволяє вам створювати складні макети швидко, легко й красиво. І ось маленький секрет:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-gap: 20px;
}
Цей шматок коду автоматично створює адаптивну сітку, яка ідеально виглядає на будь-яких екранах, без додаткових медіа-запитів.
Використовуйте властивість grid-auto-flow: dense;, щоб сітка автоматично заповнювала порожні місця в макеті.
.container {
display: grid;
grid-auto-flow: dense;
}
Тепер ваші елементи будуть завжди розташовані компактно!
CSS Flexbox — це магічна паличка для вирівнювання та розташування елементів. Забудьте про марудні способи центрування елементів. Тепер це робиться двома рядками коду:
.parent {
display: flex;
justify-content: center; /* горизонтальне вирівнювання */
align-items: center; /* вертикальне вирівнювання */
}
Готово! Контент вирівняно по центру.
Використовуйте flex-wrap: wrap; для автоматичного перенесення елементів на наступний рядок:
.parent {
display: flex;
flex-wrap: wrap;
}
Таким чином ви отримаєте швидкий адаптивний дизайн без зайвих зусиль.
CSS-змінні дозволяють створювати гнучкі та керовані дизайни, які легко змінювати за лічені секунди.
:root {
--primary-color: #3498db;
--padding: 20px;
}
.button {
background-color: var(--primary-color);
padding: var(--padding);
}
Тепер змінюючи одну змінну, ви можете миттєво оновлювати кольорову схему на всьому сайті.
Створіть тему для темного режиму, використовуючи лише зміну змінних:
:root.dark-mode {
--primary-color: #9b59b6;
--background-color: #121212;
}
body {
background-color: var(--background-color);
}
Перемикайте тему сайту одним класом!
Ефект скла, або «glassmorphism», створює ефект прозорого розмитого скла, додаючи сторінкам витонченості.
.card {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
border-radius: 10px;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
Додавайте трохи градієнта для більш виразного ефекту:
.card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), rgba(255,255,255,0.1));
backdrop-filter: blur(10px);
}
CSS дозволяє створювати плавні анімації, які роблять ваш сайт більш живим і привабливим:
.button:hover {
transform: translateY(-5px);
transition: transform 0.3s ease;
}
Використовуйте cubic-bezier для унікального ефекту:
.button:hover {
transform: scale(1.05);
transition: transform 0.5s cubic-bezier(.68,-0.55,.27,1.55);
}
Цей ефект створює особливо цікавий рух при наведенні.
CSS властивість clip-path дозволяє створювати елементи нестандартної форми:
.element {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
Цей код створює елемент у формі ромба!
Використовуйте онлайн-генератори (наприклад, Clippy CSS) для створення складних форм швидко та легко.
Псевдоелементи — це магічні помічники, що дозволяють додавати декоративні елементи без додаткового HTML-коду:
.title::after {
content: '';
display: block;
height: 2px;
width: 50px;
background-color: #3498db;
margin-top: 10px;
}
Цей код додає красиву декоративну лінію під заголовком.
Створіть цікаві ефекти, використовуючи абсолютне позиціонування псевдоелементів:
.button {
position: relative;
overflow: hidden;
}
.button::before {
content: '';
position: absolute;
background: rgba(255,255,255,0.2);
top: 0;
left: -100%;
width: 100%;
height: 100%;
transform: skewX(-45deg);
transition: left 0.3s ease-in-out;
}
.button:hover::before {
left: 200%;
}
Цей код створює динамічний ефект блиску на кнопці при наведенні.
CSS може бути дивним, іноді навіть загадковим, але саме це робить його таким цікавим. За допомогою цих гік-порад ви можете перетворити будь-яку веб-сторінку в унікальний дизайн.
Не бійтеся експериментувати, досліджувати нові можливості CSS та використовувати їх на практиці. Пам’ятайте, що справжня магія CSS відкривається тоді, коли ви готові трохи поекспериментувати! 🚀
Асинхронне програмування у JavaScript дозволяє створювати веб-додатки з швидким і чуйним інтерфейсом, однак управління асинхронними запитами може бути непростим завданням. Що робити, якщо потрібно припинити виконання запиту, коли він вже запущений? Наприклад, користувач переходить на іншу сторінку, а дані попереднього запиту ще не завантажилися. Саме для таких випадків у JavaScript є чудовий інструмент — AbortController.
У цій статті розглянемо, що таке AbortController, як він працює, для чого його використовують, а також розберемо реальні приклади використання.
AbortController — це вбудований браузерний API, що дозволяє скасовувати асинхронні операції, такі як HTTP-запити, таймери або навіть потоки даних. Він був створений, щоб ефективно керувати ресурсами та запобігати непотрібним запитам, які можуть навантажувати браузер або сервер.
AbortController має дві важливі частини:
fetch) і дозволяє їй реагувати на запит про скасування.Для використання AbortController треба зробити кілька простих кроків:
AbortSignal) до функції, яка може бути перервана (наприклад, fetch).abort() для зупинки виконання операції.Ось як це виглядає на практиці:
const controller = new AbortController();
const signal = controller.signal;
fetch('https://api.example.com/data', { signal })
.then(response => response.json())
.then(data => console.log(data))
.catch(err => {
if (err.name === 'AbortError') {
console.log('Запит було скасовано!');
} else {
console.error('Інша помилка:', err);
}
});
// Пізніше, коли треба зупинити запит:
controller.abort();
Уявімо, що користувач відкриває сторінку, що завантажує багато даних, але перед завершенням запиту вирішує перейти на іншу сторінку:
const controller = new AbortController();
const signal = controller.signal;
fetch('/long-request', { signal })
.then(response => response.json())
.then(data => console.log(data))
.catch(err => {
if (err.name === 'AbortError') {
console.log('Користувач перейшов на іншу сторінку.');
}
});
window.addEventListener('beforeunload', () => {
controller.abort();
});
У цьому прикладі ми ефективно економимо ресурси браузера та сервера, скасовуючи непотрібні запити.
Ще один типовий випадок – встановлення таймаута для запиту. Якщо сервер не відповідає протягом певного часу, ми можемо перервати запит:
const controller = new AbortController();
const signal = controller.signal;
const fetchTimeout = setTimeout(() => {
controller.abort();
}, 5000); // 5 секунд таймаут
fetch('/slow-endpoint', { signal })
.then(response => response.json())
.then(data => {
clearTimeout(fetchTimeout);
console.log(data);
})
.catch(err => {
if (err.name === 'AbortError') {
console.log('Запит скасовано через таймаут.');
} else {
console.error(err);
}
});
AbortController можна використовувати не тільки з Fetch API. Багато сучасних API браузерів підтримують його, наприклад:
import axios from 'axios';
const controller = new AbortController();
axios.get('/data', {
signal: controller.signal
})
.then(response => console.log(response.data))
.catch(err => {
if (axios.isCancel(err)) {
console.log('Запит скасовано:', err.message);
} else {
console.error(err);
}
});
// Скасування запиту через 3 секунди:
setTimeout(() => {
controller.abort();
}, 3000);
Хоча AbortController дуже корисний, не варто зловживати його використанням. Не потрібно скасовувати всі запити поспіль, оскільки це може спричинити зайву складність вашого коду. Варто використовувати AbortController, коли це дійсно необхідно, наприклад, для управління таймаутами, скасування великих запитів, або коли користувач активно взаємодіє з інтерфейсом, що змінюється швидко.
AbortController – це сучасний і зручний інструмент для контролю асинхронних запитів у JavaScript. Завдяки його використанню ви можете значно підвищити продуктивність вашого веб-додатку, покращити користувацький досвід, та ефективно керувати ресурсами.
Тепер ви точно знаєте, що робити з тими набридливими запитами, які тривають надто довго або перестають бути актуальними. Просто використовуйте AbortController і будьте певні – ваш код стане чіткішим, а ваші користувачі – щасливішими!
Коли ваш сайт вже готовий і чудово виглядає, залишається лише один важливий крок – зробити його максимально швидким і зручним для користувачів. Сьогодні користувачі дуже вибагливі, і якщо ваш сайт повільно завантажується, ви швидко втратите відвідувачів. Саме тому продуктивність є ключовою характеристикою будь-якого успішного веб-додатку.
В цій статті ми розглянемо кілька популярних інструментів, які допоможуть аналізувати продуктивність вашого сайту та оптимізувати його швидкість.
Продуктивність сайту – це швидкість завантаження, реактивність і загальна ефективність роботи веб-сторінок. Висока продуктивність сайту безпосередньо впливає на:
Отже, які інструменти можуть допомогти у цьому?
Google PageSpeed Insights – один з найбільш популярних інструментів для перевірки швидкості завантаження сторінок. Він оцінює сайт за шкалою від 0 до 100 балів і дає рекомендації, як покращити продуктивність.
Основні функції:
Як використовувати:
Lighthouse – це інструмент для глибокого аналізу швидкості та доступності сайту, який доступний прямо в браузері Google Chrome (DevTools).
Основні переваги:
Як запустити Lighthouse:
GTmetrix – це потужний інструмент для тестування швидкості завантаження сайту з докладними звітами та візуалізацією.
Основні переваги:
Як використовувати:
WebPageTest – один з найдетальніших інструментів для аналізу продуктивності, що дозволяє вибрати різні регіони та браузери для тестів.
Переваги:
Особливо корисний для розробників, яким потрібно зрозуміти, що саме сповільнює сайт.
Pingdom – популярний інструмент, що пропонує простий та зрозумілий інтерфейс для аналізу продуктивності.
Основні переваги:
Підходить як розробникам-початківцям, так і маркетологам, які хочуть швидко перевірити стан сайту.
GTmetrix – універсальний сервіс для оцінки швидкодії, який поєднує дані з Google PageSpeed Insights та YSlow (від Yahoo).
Переваги:
Незалежно від того, який інструмент ви обрали, звертайте особливу увагу на такі метрики:
Після отримання рекомендацій виконайте такі кроки:
Інструменти аналізу продуктивності – важлива частина арсеналу сучасного веб-розробника. Вони дозволяють швидко виявити проблеми та знайти шляхи оптимізації завантаження сторінок, що позитивно вплине на ваші показники SEO, конверсію, та загальний досвід користувача.
Завжди пам’ятайте: швидкий сайт – це не лише приємність для відвідувачів, але й значна перевага перед конкурентами!
Angular 19 – це черговий важливий реліз популярного фреймворку для розробки веб-додатків. Ця версія зосереджена на покращенні продуктивності, спрощенні розробки, розширенні можливостей реактивності та оптимізації серверного рендерингу.
Давайте розглянемо ключові нововведення в Angular 19 та як вони можуть вплинути на ваші проєкти.
Одне з найзначніших оновлень у Angular 19 – використання standalone-компонентів за замовчуванням.
Що це означає?
NgModule.Приклад standalone-компонента:
import { Component } from '@angular/core';
@Component({
selector: 'app-standalone',
template: `<h1>Standalone Component</h1>`,
standalone: true
})
export class StandaloneComponent {}
📌 Що це дає?
✔ Менше шаблонного коду.
✔ Просте підключення нових компонентів.
✔ Краща продуктивність, оскільки не потрібно завантажувати зайві модулі.
Якщо ви працювали з Angular Universal (SSR), то знаєте, що серверний рендеринг дозволяє швидко завантажувати сторінку та покращує SEO.
Angular 19 додає інкрементальну гідратацію – це означає, що додаток може поступово активовувати частини інтерфейсу, не перевантажуючи користувача зайвими обчисленнями.
🔹 Як це працює?
Приклад використання гідратації:
@defer (hydrate on viewport) {
<app-lazy-component></app-lazy-component>
}
📌 Що це дає?
✔ Менше навантаження на клієнт.
✔ Прискорене завантаження сторінки.
✔ Покращена продуктивність SSR-додатків.
Angular продовжує розвивати сигнали (Signals), які були представлені у попередніх версіях.
Нові можливості Angular 19:
linkedSignal – дозволяє автоматично оновлювати змінні при зміні інших залежних значень.ресурс API (resource API) – це новий підхід до обробки асинхронних даних без зайвого коду.Приклад ресурс API:
import { resource } from '@angular/core';
const userResource = resource({
loader: async () => {
const response = await fetch('/api/users');
return await response.json();
},
defaultValue: []
});
📌 Що це дає?
✔ Менше зайвого коду для запитів.
✔ Зручна реактивність.
✔ Легке управління даними в компонентах.
Ще одне оновлення – оптимізація Angular Universal та механізму SSR.
🚀 Що нового?
Приклад маршрутизації SSR у Angular 19:
import { provideRouter } from '@angular/router';
import { Routes } from '@angular/router';
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', component: AboutComponent }
];
bootstrapApplication(AppComponent, {
providers: [provideRouter(routes)]
});
📌 Що це дає?
✔ Швидший рендеринг сторінок.
✔ Покращене SEO.
✔ Оптимізація продуктивності Angular Universal.
Angular 19 також фокусується на швидкодії та підтримці Web Components.
✅ Що нового?
📌 Що це дає?
✔ Оптимізація великих Angular-додатків.
✔ Легша інтеграція Angular із Web Components.
✔ Менше навантаження на браузер.
Angular 19 приносить суттєві покращення як для продуктивності, так і для зручності розробників.
🔹 Основні зміни:
✔ Standalone-компоненти за замовчуванням – менше зайвого коду.
✔ Інкрементальна гідратація – оптимізований рендеринг.
✔ Покращена реактивність – нові linkedSignal та ресурс API.
✔ Поліпшений SSR та Event Replay – краща взаємодія з користувачем.
✔ Оптимізація продуктивності – прискорене завантаження додатків.
Angular продовжує розвиватися у напрямку швидшої, зручнішої та більш ефективної архітектури. Якщо ви ще не оновилися до Angular 19 – це чудовий час, щоб випробувати всі нові можливості! 🚀
Реактивність є основою багатьох сучасних фреймворків, таких як Vue.js, Svelte та навіть внутрішніх механізмів React. Вона дозволяє автоматично оновлювати UI, коли змінюється стан.
Одним з найефективніших способів створення реактивних об’єктів у JavaScript є Proxy API та Reflect API. У цій статті ми розглянемо, як вони працюють, чому вони краще за Object.defineProperty, та як їх можна використати для створення власного простого реактивного механізму.
Об’єкт Proxy дозволяє перехоплювати операції над іншими об’єктами (наприклад, отримання, встановлення, видалення властивостей) та змінювати їхню поведінку.
const obj = { name: "Alice" };
const proxy = new Proxy(obj, {
get(target, property) {
console.log(`Отримання значення ${property}`);
return target[property];
},
set(target, property, value) {
console.log(`Зміна ${property} на ${value}`);
target[property] = value;
return true;
}
});
console.log(proxy.name); // Лог: Отримання значення name
proxy.age = 25; // Лог: Зміна age на 25
Reflect – це набір утиліт, який спрощує роботу з об’єктами, даючи змогу безпечно виконувати операції (get, set, deleteProperty тощо).
const obj = { name: "Alice" };
console.log(Reflect.get(obj, "name")); // Alice
Reflect.set(obj, "age", 25);
console.log(obj.age); // 25
Reflect часто використовується разом із Proxy, щоб делегувати стандартну поведінку, не переписуючи її вручну.
До появи Proxy для реактивності використовували Object.defineProperty, але цей підхід має обмеження:
Object.defineProperty працює тільки з окремими властивостями, а Proxy дозволяє працювати з цілим об’єктом.Object.defineProperty не працює з масивами так само ефективно, як Proxy.Приклад проблеми з Object.defineProperty:
const obj = {};
Object.defineProperty(obj, "name", {
get() {
console.log("Отримання значення");
return "Alice";
},
set(value) {
console.log("Зміна значення");
}
});
obj.name = "Bob"; // Лог: Зміна значення
console.log(obj.name); // Лог: Отримання значення
delete obj.name; // ❌ Не працює – не можна відстежити видалення властивостей
З Proxy ми можемо легко відстежувати всі зміни.
Створимо базовий механізм, який дозволить відстежувати зміни у стані та викликати відповідні функції при оновленні значень.
function reactive(target) {
const subscribers = new Set(); // Зберігаємо функції, які реагують на зміни
const notify = () => {
subscribers.forEach(subscriber => subscriber());
};
return new Proxy(target, {
get(obj, prop) {
console.log(`Отримання значення ${prop}`);
return Reflect.get(obj, prop);
},
set(obj, prop, value) {
console.log(`Зміна ${prop} на ${value}`);
Reflect.set(obj, prop, value);
notify(); // Викликаємо підписників після зміни
return true;
},
deleteProperty(obj, prop) {
console.log(`Видалення ${prop}`);
Reflect.deleteProperty(obj, prop);
notify();
return true;
},
subscribe(fn) {
subscribers.add(fn);
}
});
}
// Використання
const state = reactive({ count: 0 });
const render = () => console.log(`Рендер: count = ${state.count}`);
state.subscribe(render); // Підписуємо рендер-функцію
state.count = 1; // Лог: Зміна count на 1 → Рендер: count = 1
state.count = 2; // Лог: Зміна count на 2 → Рендер: count = 2
delete state.count; // Лог: Видалення count → Рендер: count = undefined
Масиви у JavaScript є об’єктами, тому Proxy може працювати з ними аналогічно.
const reactiveArray = reactive([]);
reactiveArray.subscribe(() => console.log("Масив змінено:", reactiveArray));
reactiveArray.push("React"); // Масив змінено: ["React"]
reactiveArray.push("Vue"); // Масив змінено: ["React", "Vue"]
reactiveArray.pop(); // Масив змінено: ["React"]
length у масивахПри видаленні елемента length масиву змінюється, що теж можна перехопити:
const arrayHandler = {
set(target, prop, value) {
console.log(`Зміна ${prop} на ${value}`);
return Reflect.set(target, prop, value);
}
};
const reactiveNumbers = new Proxy([1, 2, 3], arrayHandler);
reactiveNumbers.push(4); // Лог: Зміна 3 на 4, Зміна length на 4
reactiveNumbers.length = 2; // Лог: Зміна length на 2 (всі зайві елементи видаляться)
console.log(reactiveNumbers); // [1, 2]
Тепер давайте зробимо зв’язок між станом і HTML, щоб створити базову реактивність.
<!DOCTYPE html>
<html lang="uk">
<head>
<title>Реактивний лічильник</title>
</head>
<body>
<p id="counter">Лічильник: 0</p>
<button id="increment">Збільшити</button>
<script>
function reactive(target, render) {
return new Proxy(target, {
set(obj, prop, value) {
obj[prop] = value;
render();
return true;
}
});
}
const state = reactive({ count: 0 }, () => {
document.getElementById("counter").innerText = `Лічильник: ${state.count}`;
});
document.getElementById("increment").addEventListener("click", () => {
state.count++;
});
</script>
</body>
</html>
✅ Що ми зробили?
state.<p id="counter"> змінюється при оновленні count).click, яка змінює стан.🚀 Вийшов міні-VueJS без фреймворків!
Proxy та Reflect дають змогу створювати потужні механізми реактивності без зайвих складнощів.
✔ Proxy дозволяє перехоплювати всі операції з об’єктами.
✔ Reflect допомагає зручно делегувати стандартну поведінку.
✔ Реактивні об’єкти можна використовувати в UI, автоматично оновлюючи DOM.
✔ Масиви також можна зробити реактивними через Proxy.
💡 Proxy – це основа багатьох сучасних фреймворків, і розуміння його механіки допоможе вам глибше зрозуміти Vue, Svelte та навіть внутрішні механізми React. 🚀
Світ веб-технологій динамічно змінюється. Якщо Web1 був ерою статичних сайтів, а Web2 — ерою соціальних мереж, централізованих платформ і динамічного контенту, то Web3 пропонує децентралізовану альтернативу, засновану на блокчейні, смарт-контрактах і криптовалютах.
Але чи реально Web3 замінить Web2 у стандартних завданнях, таких як пошук інформації, платежі, зберігання файлів чи управління ідентифікацією? Чи це просто модний тренд без реальних переваг? Давайте розберемося.
📌 Web2 – це нинішній інтернет, де більшість сервісів контролюється великими компаніями (Google, Facebook, Amazon). Вони керують нашими даними, контролюють платформи та встановлюють правила гри.
📌 Web3 – це концепція децентралізованого інтернету, де користувачі контролюють свої дані та взаємодіють один з одним без посередників. Основні технології Web3:
✔ Блокчейн – децентралізоване зберігання та перевірка транзакцій.
✔ Смарт-контракти – автоматизовані угоди без потреби в довірених третіх особах.
✔ DApps (децентралізовані додатки) – додатки, що працюють на блокчейні.
✔ Децентралізовані ідентифікації (DID) – методи входу без паролів, через криптовалютні гаманці.
🚀 Головна ідея Web3: ніяких посередників, більше свободи для користувачів.
Але чи це працює в реальних завданнях?
У Web2 всі транзакції проходять через банки, PayPal, Visa або Mastercard. Вони контролюють платежі, можуть блокувати рахунки або стягувати високі комісії.
✅ Web3 рішення:
❌ Проблеми:
📢 Вердикт: Web3 поки що не може повністю замінити банківські системи, але криптовалюти можуть бути вигідним доповненням у міжнародних переказах та DeFi-сервісах.
Зараз більшість користувачів зберігають файли у централізованих хмарах (Google Drive, iCloud, Dropbox).
✅ Web3 рішення:
❌ Проблеми:
📢 Вердикт: Web3-зберігання має потенціал, але поки що Web2 рішення швидші, дешевші та зручніші для масового користувача.
Централізовані соцмережі контролюють контент, можуть блокувати користувачів, продають дані рекламодавцям.
✅ Web3 рішення:
❌ Проблеми:
📢 Вердикт: Web3-соцмережі ще не готові замінити Facebook та Twitter, але вони можуть стати нішевими альтернативами.
Зараз люди реєструються на сайтах через Google чи Facebook, віддаючи свої дані компаніям.
✅ Web3 рішення:
❌ Проблеми:
📢 Вердикт: Web3-ідентифікація цікава, але Google/Facebook авторизація залишається зручнішою для більшості користувачів.
🔹 Web3 має переваги у безпеці, конфіденційності та децентралізації, але він ще не готовий повністю замінити Web2.
🔹 Більшість Web3-рішень повільніші, дорожчі та складніші у використанні для масового ринку.
🔹 Проте Web3 додає альтернативу, дозволяючи користувачам обирати між централізованими та децентралізованими сервісами.
💡 Web2 і Web3, ймовірно, співіснуватимуть – Web2 залишиться основою для звичайних користувачів, а Web3 буде активно використовуватись у фінансах, цифровій ідентифікації та зберіганні цінних даних.
🚀 Web3 – це не заміна Web2, а його доповнення.
Можливо, через 10 років ми навіть не помітимо, як Web3 стане стандартом у багатьох сферах, але поки що він проходить стадію активного розвитку.
| Завдання | Web2 рішення | Web3 альтернатива | Чи варто переходити? |
|---|---|---|---|
| Платежі | Банки, PayPal | Криптовалюти, DeFi | ✅ Якщо потрібні миттєві глобальні транзакції |
| Зберігання файлів | Google Drive, Dropbox | IPFS, Arweave, Filecoin | ❌ Поки що Web2 дешевше та швидше |
| Соцмережі | Facebook, Twitter | Lens, Steemit | ❌ Web3-соцмережі ще не готові |
| Ідентифікація | Google Login | ENS, DID | ✅ Якщо потрібно більше приватності |
Web3 – це потужний тренд, але поки що він не готовий повністю замінити Web2.
Проте, як тільки децентралізовані сервіси стануть простішими, швидшими та дешевшими, майбутнє інтернету може змінитися назавжди. 🚀
Криптовалютний ринок відомий своєю високою волатильністю, різкими ціновими коливаннями та нестабільністю. Для ефективного трейдингу тут важливо використовувати чіткі правила входу та виходу з позицій, щоб мінімізувати ризики та отримати максимальний прибуток. Одна з найвідоміших стратегій, яка успішно працювала на традиційних фінансових ринках, – “Стратегія черепах” (Turtle Trading Strategy).
Ця стратегія була розроблена ще у 1980-х роках для ф’ючерсних ринків, але чи працює вона у світі криптовалют? У цій статті ми розглянемо основні принципи стратегії черепах, її адаптацію для цифрових активів, а також конкретні приклади її застосування на Bitcoin, Ethereum та інших криптовалютах.
Стратегія “Черепах” була створена Річардом Деннісом та Вільямом Екхардтом, які хотіли довести, що трейдинг – це навик, якому можна навчитися. Вони відібрали групу людей без досвіду у фінансах, навчили їх певним правилам торгівлі і через рік отримали професійних трейдерів, які успішно заробляли на ринку.
Річард Денніс порівнював трейдерів зі зростанням черепах у фермерському господарстві – якщо забезпечити їм правильні умови, вони будуть рости та приносити прибуток. Тому він навчав трейдерів як “вирощувати” прибуткові угоди.
Криптовалютний ринок суттєво відрізняється від традиційних ринків:
Проте ключові принципи “Черепах” все ще залишаються ефективними, якщо їх правильно адаптувати під реалії криптовалют.
Класична стратегія використовувала 20-денні та 55-денні рівні для входу.
✅ Адаптація для крипторинку:
🔹 Приклад:
Якщо Bitcoin пробиває 50-денний максимум, це сигнал для входу в лонг (купівлю). Якщо пробиває 50-денний мінімум – це сигнал для шорт-позиції (продажу).
import pandas as pd
def turtle_signal(data, period=50):
data['High_Max'] = data['High'].rolling(period).max()
data['Low_Min'] = data['Low'].rolling(period).min()
data['Buy_Signal'] = data['Close'] > data['High_Max'].shift(1)
data['Sell_Signal'] = data['Close'] < data['Low_Min'].shift(1)
return data
✅ ATR (Average True Range) для визначення стоп-лосса
ATR – це індикатор, який вимірює волатильність ринку.
📌 Як встановити стоп-лосс?
Правило: Стоп-лосс = Вхідна ціна – (ATR * 2)
def calculate_stop_loss(entry_price, atr, risk_factor=2):
return entry_price - (atr * risk_factor)
✅ Зменшення розміру позиції на високій волатильності
Якщо ринок “штормить”, краще зменшити обсяг угоди, щоб не отримати величезний збиток.
Якщо тренд продовжується, вигідно використовувати трейлінг-стоп, щоб фіксувати прибуток, не виходячи з ринку завчасно.
📌 Як це працює?
Якщо ціна росте, стоп-лосс “рухається” за нею.
Якщо ціна падає до встановленого рівня – позиція закривається.
✔️ Добре працює у трендових ринках.
✔️ Прозорі правила входу та виходу.
✔️ Дисципліна та відсутність емоційного трейдингу.
❌ Багато фальшивих пробоїв у флеті.
❌ Необхідність жорсткого управління ризиками.
❌ Ринок 24/7 – потрібні автоматизовані алгоритми.
Стратегія “Черепах” може працювати у криптовалютній торгівлі, якщо адаптувати її під високу волатильність та швидкі зміни ринку.
🔹 Якщо ринок трендовий – стратегія приносить прибуток.
🔹 Якщо ринок флетовий – потрібні додаткові фільтри, щоб уникати зайвих входів.
Головне правило – дисципліна. Саме вона зробила “черепах” успішними трейдерами у 1980-х, і саме вона допоможе вам заробляти у криптовалютах сьогодні! 🚀
Відкрийте криптовалютну картку Trustee за кілька хвилин! Оплачуйте ваші покупки миттєво з автоматичною конвертацією