Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
21.6K subscribers
2.95K photos
213 videos
49 files
5.23K links
Все самое полезное для фронтенда в одном канале.

По рекламе: @proglib_adv

Учиться у нас: https://proglib.io/w/77178ed4

Для обратной связи: @proglibrary_feeedback_bot

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
💡 Как работает реактивность в Vue 3

Vue 3 использует Proxy, чтобы отслеживать изменения данных и обновлять только те части интерфейса, которые зависят от изменённых свойств.

➡️ В карточках — сжатое объяснение ключевых принципов: что именно перехватывает Proxy, как работает трекинг зависимостей и почему несколько десятков строк кода уже передают суть всей системы.

🐸 Библиотека фронтендера

#under_hood
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
11👍2
💡 Как работают Signals — новая волна реактивности

Фреймворки переходят к fine-grained reactivity. Вместо пересборки компонента или Virtual DOM обновляется только тот узел интерфейса, который связан с изменившимся значением.

➡️ В карточках:

— как сигнал отслеживает подписчиков
— почему механика быстрее Virtual DOM на порядки
— примеры в SolidJS, Preact и Angular
— реализация принципа за ~25 строк

Кратко разберём концепцию, которая меняет архитектуру фронтенда в 2025.

🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

🐸 Библиотека фронтендера

#under_hood
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
9🥰2
💡 Как работает CSS Anchor Positioning

Забудьте про Popper.js — браузер теперь умеет привязывать элементы сам. Тултипы, дропдауны, попаверы без единой строки JavaScript.

➡️ В карточках:

— как anchor() вычисляет координаты относительно якоря
— механизм автоматического fallback при overflow
— почему это в 10× быстрее JS-библиотек
— живые примеры с кодом

🔗 Альтернатива для остальных браузеров

🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

🐸 Библиотека фронтендера

#under_hood
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥74👍2🥰1
Speculation Rules API: нативные мгновенные переходы

Стандартный браузерный механизм, который позволяет заранее рендерить страницы и активировать их почти без задержек. Без JS-библиотек, без клиентского роутинга и без серверных настроек.

В карточках: как работает API, чем он отличается от prefetch, как браузер предсказывает клики и почему нативный prerender даёт реальный прирост скорости.

🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

🐸 Библиотека фронтендера

#under_hood
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
6🔥3🥰2
👨‍💻 React 19.2 меняет фундамент работы с асинхронностью

В статье по ссылке разбирается, как новые примитивы — use(), <Suspense>, useTransition() и View Transitions — полностью заменяют старую связку useEffect + fetch и убирают большую часть ручной логики загрузки.

Выше — краткие карточки с ключевыми изменениями и примерами кода. Полный разбор и детали — в статье 📎📎

🐸 Библиотека фронтендера

#under_hood
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9❤‍🔥3😁2
🔍 Почему код во фронтенде становится непредсказуемым

Часто проблема не в логике и не во фреймворке, а в side-effects.
Функция выглядит безопасной, но меняет объект — и состояние «едет».

Причина — как данные передаются в функции и что происходит с объектами в памяти.

➡️ В карточках:
— откуда берутся side-effects
— почему мутация ломает код
— как писать предсказуемый код без скрытых изменений

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#under_hood
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
5🥰2
🧃 Microsoft предложила API для диагностики задержек в сложных веб-приложениях

Если в приложении много iframe, воркеров или окон с postMessage() — это для вас.

Проблема:

Сообщения между контекстами могут тормозить, приложение подвисает. Задержка видна, но без понятной причины: main thread, очередь сообщений или сериализация.

🔤 Решение — Delayed Message Timing API:

Новый PerformanceObserver показывает:

— сколько сообщение провело в очереди (`blockedDuration`)

— какие задачи его блокировали

— время сериализации

— полный тайминг от отправки до обработки


🔴 Что делать с данными:

Высокий blockedDuration + длинная задача → разбить на чанки  

Высокий taskCount → батчить сообщения, debounce

Медленная сериализация → Transferable, меньше payload


Статус:

📌 Intent to Prototype в Chromium
📌 Другие браузеры молчат
📌 Microsoft собирает фидбек

💬 Что от вас хотят:

Если сталкиваетесь с тормозами в cross-context коммуникации — расскажите о своих кейсах в GitHub Issues. Это поможет сделать API полезнее.

🔗 Полный explainer
🔗 Статья в блоге Microsoft Edge

🐸 Библиотека фронтендера

#under_hood
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰42👍1