Реактивность в JavaScript: от Object.defineProperty до Proxy и Computed

🔥 Добро пожаловать в глубокое погружение в реактивное программирование на JavaScript. В этом видео мы разбираемся, как работают реактивные переменные — основа всех современных фреймворков: React, Vue, Svelte, MobX, RxJS и других. Вы узнаете: • Что такое реактивность и зачем она нужна • Как создать собственную реактивную переменную с нуля • Чем отличаются подходы через геттеры/сеттеры, Proxy API и Observer-паттерн • Как работает класс Reactive и вычисляемые свойства (computed) • Как MutationObserver реализует реактивность на уровне DOM • И как всё это объединить в мини-Todo-приложении 📘 Это не просто теория — вы увидите, как устроена магия, которая делает интерфейсы “живыми”. Исходные коды проекта здесь: https://github.com/easy-linux/VanillaJS/tree/master/examples/ReactiveProps ⏱ Таймкоды: 00:00 — Введение 00:35 — Что такое реактивные переменные 02:51 — Реактивность через Object.defineProperty 05:46 — Proxy API и современный подход 09:06 — Класс Reactive и история изменений 12:43 — Computed свойства и каскады зависимостей 17:38 — MutationObserver в действии 21:53 — Полноценное Todo приложение на реактивности 25:37 — Сравнение рассмотренных подходов 26:54 — Выводы и заключение. 💡 Подходит для: фронтенд-разработчиков, студентов и всех, кто хочет понять, как под капотом работают React, Vue и Svelte. 🔔 Подписывайтесь на канал, чтобы не пропустить новые видео 💎 Сериал "Создание SPA приложения на чистом JS": https://www.youtube.com/watch?v=eqAefmCqA6M&list=PLCh6bwt6jth_fkFrU15eyY6Hv18NuWcwa 💎 Полезные видео для лучшего понимания JS: Стрелочные функции 1 - https://youtu.be/21wNsy72BKg Стрелочные функции 2 - https://youtu.be/DlQYk3ZvERo Макро и микро задачи - https://youtu.be/cVzwEowLe08 Web worker - https://youtu.be/ZqjDBxt8DYo Service worker - https://youtu.be/kV9Gq6FrABg Debouncing/throttling - https://youtu.be/P09SxTfQkVY 💎 Видео по работе с vite.js: https://youtu.be/t98Q9hliZZo 💎 Полезные видео по настройке webpack: Минимальная конфигурация - https://youtu.be/unEl3Hezwpw Настройка горячей перезагрузки - https://youtu.be/oOpzkF2nU0s Настройка сборки проекта с подгрузкой файлов css/scss/изображений - https://youtu.be/3B-NGZmMe-Y Настройка сборки мультистраничного сайта - https://youtu.be/aMzCDR_MHF0 💎 Самый простой способ установить nodejs на Linux и Mac: https://youtu.be/gP4OPx2vBoc #easyit #javascript #js #vanillajs @EasyITChannel