🏗️ Plugin Architecture во фронтенде

Обычно приложения растут вширь — и рано или поздно перестают помещаться в одну кодовую базу.

Плагинная архитектура решает эту проблему иначе: ядро остаётся стабильным, всё остальное — расширения.

⏬ Как это работает:

Есть core — минимальная часть с бизнес-правилами, безопасностью, логированием и общими утилитами.

А вокруг — плагины, которые подключаются через публичный API или события. Ядро не знает о них ничего — только о контракте.

⏬ Зачем это нужно:

— модульность и независимые релизы
— возможность кастомизации под клиента или регион
— развитие без трогания основного кода

🔆 VS Code, Figma, Obsidian, Grafana — все построены на этой идее.

⏯ Когда не подойдёт:

— если нет строгого API
— если плагины тесно зависят от общей логики
— если команда одна и продукт небольшой

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

#blueprint

🧠 React больше не библиотека

Когда-то он был “про view”. Теперь — серверные компоненты, Suspense, компилятор, серверные экшены. Это уже не инструмент, а целая среда. React стал фреймворком.

Только делает вид, что нет.

💬 А вы всё ещё называете его библиотекой?

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

#code_battle

🔑 Ключ, который ломал всё

Иногда одна мелочь рушит весь интерфейс. Компонент внезапно сбрасывает состояние и анимации — а виноват всего один key. Раньше использовался Math.random(), и React каждый раз считал, что элементы новые.

В итоге он пересоздавал их с нуля — с потерей состояния и лагами.

Как решить проблему:

➖ Дать каждому элементу стабильный и уникальный ключ — например, item.id. Теперь React спокойно обновляет только то, что реально изменилось.

💡 Меньше перерендеров, плавнее UI и спокойная жизнь фронтендера.

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

#hotfix #react

💳 Плавный ввод данных карты на Vue.js

Изящная форма с мягкими микровзаимодействиями и реалистичной анимацией переворота при вводе CVV.

♾ Автоматически форматирует номер, определяет тип карты (Visa, Mastercard, Amex) и проверяет корректность данных.

🎨 Отличный пример того, как детали делают UX «живым».

🔗 Ссылка на CodePen

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

#readme #css

А премия за это еще будет? 👀

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

#pixel_pause

🌪 Как отменить merge, не потеряв изменения

Иногда после git merge всё идёт не по плану — конфликты, сломанные файлы, а иногда и случайный merge не в ту ветку.
Но откатывать всё не хочется — ведь изменения нужны.

Решение:

git merge --abort

Если merge уже закоммичен:

git reset --merge ORIG_HEAD

➕ Что произойдёт:

— merge откатится,
— изменения в файлах сохранятся,
— можно спокойно поправить конфликты и попробовать снова.

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

#readme #git

😳 Главные новости недели

🔛 React Foundation объявлена

7 октября Linux Foundation запустила React Foundation — в неё вошли React, React Native и связанные проекты. Цель — независимое управление, стабильность и долгосрочная поддержка экосистемы.

🔛 View Transitions API

Chrome v139 добавил baseline-поддержку и улучшенный DevTools-инспектор для ::view-transition-*. Поддержка в React Canary и скоро — в Firefox 144.

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

#release_digest