Привет, фронтендеры! 👋
Мы подготовили подборку полезных статей от команды VK для разработчиков, которые хотят прокачивать архитектуру, подходы и технический бэк-офис фронтенда.

✨ Создание интерактивной доски, или Почему ресёрч важнее кода
Как команда проектировала интерактивную доску: от выбора CRDT и сравнения Yjs/Blocksuite до решения, когда использовать Canvas или SVG. В статье показываем, как ранний ресёрч экономит месяцы разработки и позволяет заранее продумать архитектуру, офлайн-режим, синхронность и масштабируемость.

✨ Внедрение зависимостей (DI) через библиотеку Tsyringe
Разбор подхода DI во фронтенде: зачем он нужен, как помогает разгружать архитектуру, улучшать тестирование и избегать жёстких связей. На примерах показываем, как внедрять Tsyringe в реальный проект, как структурировать зависимости и почему это ускоряет развитие продукта.

✨ Быстрый старт: пишем фреймворк для фронтенда
Пошаговое создание минимального фронтенд-фреймворка: виртуальное дерево, жизненные циклы, компоненты, обновления. Статья для понимания того, как работают популярные фреймворки «под капотом» и почему знание внутренних механизмов делает разработчика сильнее.

✨ О миграции с Angular на React в деталях
Практический кейс масштабной миграции: почему решили уйти с Angular, как разбивали проект на модули, какие подходы к интеграции использовали и какие подводные камни встретили. Материал для тех, кто готовится к большим рефакторингам и хочет избежать типичных ошибок при переходе на новую технологию.

#frontendvk #статьи

🔹 HTML внутри Canvas
Ранняя экспериментальная возможность рендерить HTML-элементы внутри <canvas>. Фича на стадии прототипа, но перспективна для интерактивных UI и визуализаций.

🔹 View Transitions Feature Explorer
Интерактивный инструмент от Брамуса, позволяющий изучить поддержку и протестировать все части View Transitions API. Удобно для проверки кросс-браузерной совместимости.

🔹 field-sizing: content
Новое свойство field-sizing делает формы адаптивными — поля автоматически подстраиваются под введённый текст. Сейчас поддерживается только в Chromium-браузерах.

🔹 Когда «идеальный код» ломается в проде (Next.js)
Разбор инцидента, где функция isOwner() в Next.js неожиданно вернула true из-за авто-преобразования в async. Подробно объясняется влияние Promise в условиях и подходы к тестированию server functions.

🔹 Почему <button> лучше <div>
Подробное сравнение семантики элементов: встроенные возможности <button> (управление фокусом, клавиатурная навигация, доступность) против ручной реализации на <div>.

📌 Новая статья от инженеров VK на Хабр:
Как мы улучшили качество сервиса VK Видео на SmartTV

#дайджест #frontendvk

Всем привет. Сегодня мы познакомимся с Павлом Франковым, который отвечает за фронтенд vk.com. Обсудим, как формировать сильную команду: от правильного подбора людей до умения вовремя помочь и не доводить до выгорания.

➡️ C чего начиналась твоя карьера?

Всё началось с того, что я получил первый заказ на вёрстку сайта. А уже спустя много лет понял, что подсел — и теперь должен всё время этим заниматься.

Из того, что можно назвать крутым: я делал промо-сайты для компании Brother (это те ребята, которые производят МФУ). Эти проекты выставлялись на разных конкурсах и получали топовые награды. Конечно, большая заслуга дизайнера, но без аккуратной вёрстки ничего бы не получилось.

Потом я поработал с заказчиками из Кремниевой долины, прокачал английский с зарубежными командами. И там я понял одну важную вещь: никакая экспертиза не перевешивает несовместимость с командой. Сейчас первое, на что я смотрю, — это вайб-чек: насколько человек подходит конкретной команде.

➡️ Какие критерии?

Это именно «вайб» — совпадение взглядов, ценностей, отношения к делу. Например, мы в команде не воспринимаем работу как просто «работу» и ищем людей, которым действительно интересна наша область.

У нас в команде люди с подходящим майндсетом, и им не нужны короткие победы. Мы инфраструктурная команда, и у нас большинство задач долгие, результаты появляются не сразу. Им нормально, если большая победа придёт в конце. Мы стараемся отлавливать таких ребят ещё на собеседованиях — задаём вопросы, моделируем ситуации.

Например: мы ускоряем открытие ВКонтакте. Но на старте исследований невозможно предсказать, насколько быстрее он станет. Мы можем полгода копать в одном направлении, а в конце понять, что улучшений нет, а стало даже хуже. И результат выбрасывается. Поэтому нам нужны люди, готовые к долгому пути.

Это как с залом: если ты пришёл в качалку, нелогично ждать результата через две тренировки. Это история на год вперёд.

➡️ Что делать, когда желание есть, но сил на работу осталось совсем мало?

У меня в телеграм-канале есть пост на эту тему, который я постоянно кидаю всем друзьям: «Терпеть не надо». Если тебе приходится терпеть — это сигнал. И если что-то не нравится, надо обсуждать, решать, менять. У нас с ребятами есть договорённость: что бы ни происходило, они приходят и говорят. И мы попробуем перестроить планы, чтобы дать человеку выдохнуть.

У нас есть примеры, когда мы ребят специально ротировали, потому что видели, что им тяжело. Человек, который находится в состоянии «всё бесполезно», страдает сам и может повлиять на рабочие процессы во всей команде. Это не потому, что он плохой — просто он не на своём месте. Наша задача — найти этому человеку подходящее место. Это как пазл: неправильных людей нет, есть неправильно подобранные позиции. А если ни ротация, ни другие варианты не работают — то нужно уходить.

➡️ Как ты сам восстанавливаешься после работы?

Тут без сюрпризов: сон, прогулки, лёгкая физическая нагрузка. Лучше — регулярная и активная, чтобы пульс поднимался. Если беспокоит ментальное состояние — медитация. Headspace отлично подходит, там учат с нуля.

У меня много увлечений, и если я за что-то берусь, я прям ухожу в глубину. Сейчас я провожу ежедневные стримы, где «вайб-кожу» свой open source. У меня несколько проектов, суммарно на тысячу звёзд GitHub. Расскажу о паре из них.

Один — плагин для Obsidian (это как Notion, только локально). Там не было ИИ-инструментов — и я их сделал. Считаю, что на данный момент это самый лучший плагин.

Второй — инструмент-суммаризатор звонков под macOS. Неважно, Zoom, Telegram, VK, Google Meet — жмёшь «Записать», получаешь транскрипт и суммаризацию с выделенными экшен-айтемами.

Хороший отдых — это не обязательно резкая смена деятельности. Удивительным образом для меня отличным отдыхом может быть и программирование, просто в другом формате. И это всё равно помогает переключиться и потом оставаться продуктивным на работе.

#frontendvk #команда

📱 Большие SPA‑приложения живут долго на странице, и со временем могут начать потреблять всё больше памяти. Одна из скрытых причин — утечки памяти, связанные с DOM.

Классический кейс: вы удалили узел из DOM, но где‑то осталась ссылка на него в JS. В результате элемент становится «detached», но не сборяется сборщиком мусора, потому что на него по‑прежнему есть живая ссылка. Например:

let div = document.createElement('div');  
document.body.appendChild(div);  
document.body.removeChild(div);  
// Элемент удалён из DOM, но div всё ещё в памяти,  
// так как переменная div ссылается на него 

Если открыть Chrome DevTools и сделать Heap Snapshot памяти, подобные утечки видно как объекты «Detached HTMLDivElement». Они занимают память и могут накапливаться, если вы, скажем, кэшируете DOM‑элементы в структурах данных и не очищаете, или подписались на событие и забыли отписаться — элемент уже удалён из документа, а колбэк всё ещё ссылается на него. Еще часто ловят утечки из‑за неудалённых обработчиков событий, навесили listener на элемент, удалили элемент, а обработчик забыли снять. Он сохраняет в замыкании кучу данных, и всё это продолжает висеть в памяти.

Как бороться

Во‑первых, следите за обработчиками — используйте { once: true } где нужно одноразово, или вручную removeEventListener при очистке UI.

Во‑вторых, избегайте глобальных переменных, хранящих DOM‑элементы или большие объекты — ограничьте их область жизни. Для кэшей используйте WeakMap/WeakRef, тогда сборщик мусора сможет прибирать за вами неиспользуемые объекты.

В‑третьих, периодически профилируйте память приложения. DevTools умеет показывать ретейнеры — кто держит ссылку на утёкший объект. Так вы выясните, откуда «торчат» лишние ссылки. Иногда помогает паттерн: после удаления DOM‑узла занулить все ссылки на него (например, присвоить переменной div = null). Это подскажет GC, что объект больше не нужен.

В React, Vue и так далее утечки тоже возможны, например, если вручную манипулировать DOM вне их контроля или хранить состояние вне реактивности. В целом, профилактика утечек — часть культуры грамотной разработки.

#frontendvk #javanoscript #domузлы