JavaScript *

Всем привет! Меня зовут Егор Савинцев, я Frontend Platform Engineer в Авито. Сейчас я работаю в команде архитектуры, а до этого в команде Phobos в рамках Платформизации переводил страницу объявления на Beduin — разрабатывал клиентскую архитектуру и переписывал блоки. 

Сразу важное отступление. 

Beduin — это Backend‑Driven UI. Если в нативе в коде клиентского приложения есть компоненты, бэкенд присылает им данные, и всё работает. В Beduin бэкенд присылает и данные, и сами компоненты в специальном виде. На клиенте у нас только рендерер — специальный компонент, который принимает JSON и рендерит то, что мы прислали. 

В этой статье я расскажу, зачем вообще переписывать работающую страницу, как эволюционировала наша архитектура и с какими компромиссами между нативным кодом и BDUI нам пришлось столкнуться.

Статья будет полезна frontend‑ и mobile‑разработчикам, инженерам платформенных команд, архитекторам клиентских приложений и backend‑разработчикам, которые внедряют Backend‑Driven UI. В общем, всем, кто планирует переводить крупные экраны на BDUI и хочет заранее узнать, что может пойти не так. Спойлер: всё.

Затеял ремонт в ванной, дошёл до плитки — и тут понеслось. Санузел у меня Г‑образный, в углу венткороб, раскладку хочу диагональную, а «раздели площадь на плитку» вообще не работает, я это понял когда мои циферки не сошлись с тем что плиточник насчитал — разница набежала непонятно откуда.

Плиточник говорит — берите пятнадцать процентов запаса и всё. Пятнадцать процентов от плитки по 2000 с лишним за метр это уже сумма, я в столбик посчитал и решил что нет, надо по‑другому. Калькуляторы онлайн — площадь на цену умножают, я и сам умею. В CAD полез — там сначала модель строй, а мне не чертежи нужны были.

Написал своё в итоге, дальше расскажу что вышло, скрины ниже, там понятнее чем я объясню.

Несколько лет назад у нас с одногруппником был зачёт по C++, и вместо того чтобы сделать что-то скромное (например, «Калькулятор» или «Генератор паролей»), мы, конечно же, решили замахнуться на какую-то игру, и тогда нам попалась новость о 30-летнем юбилее игры DOOM. План был красивый, т. к. на тот момент командной работы у нас не было, мы решили, что мой одногруппник пишет псевдо-3D-движок в духе классического рейкастинга, а я делаю 2D-платформер, который в итоге должен был запускаться прямо внутри его мира, как игровой автомат, который запускался бы перед игрой, и сколько патронов ты собрал, столько у тебя и будет в игре.

Проблема появилась не в архитектуре и не в гейм-дизайне, а гораздо раньше — на этапе, который мы оба благополучно пропустили: мы не договорились, на чём пишем. Я по рекомендации преподавателя взял SFML — с ним я уже возился на парах, там всё human-readable, спрайты, окна, звук из коробки. Товарищ выбрал SDL, т. к. видел гайд про DOOM на SDL — она даёт прямой доступ к буферу пикселей, что для рейкастинга буквально то, что нужно: рисуешь вертикальные полоски стен вручную, без лишней абстракции между тобой и экраном.

По отдельности оба выбора были правильными, а вместе — нет. Слинковать в одном проекте SDL и SFML можно, но два разных event loop, два разных подхода к окну и таймингу — это уже не работа для автомата по зачёту, а отдельная курсовая работа, на которую у нас оставалось дня два-три. Мы посчитали и сдали как два независимых проекта. Препод посмотрел, оценил — и выдал ровно ту фразу, которую в такой ситуации выдал бы любой человек, который знал о проекте: «Идея классная, жалко, что не объединили», но нам это было неважно на тот момент, как говорится, зачёт получили — и на этом спасибо.

Cлучилось то, что я обычно советую не делать: я не выбрал из существующих 14 форматов, а сделал 15-й.

В первой части мы заставили кнопку на веб-странице запустить локальный exe-файл через расширение Chrome и Native Messaging Host. Теперь усложним задачу: операция длится десять секунд, сообщает прогресс и поддерживает отмену. Для этого заменим sendNativeMessage() постоянным соединением connectNative(), перепишем хост на Java 21, разберём протокол, восстановление соединения и жизненный цикл процесса, а затем соберём exe с помощью GraalVM Native Image и проверим всё в настоящем Chrome.

Инструмент: C4 QuietGridLabs. Можно открыть демо без авторизации: проект будет храниться локально в браузере.

Иногда архитектура «есть» — но пользоваться ею невозможно.

На доске лежит схема сервисов. В Confluence живёт описание. Где-то рядом — sequence-диаграмма, которую никто не открывал с прошлого года. ER-модель хранится в другом инструменте. А когда на ревью возникает простой вопрос «какой endpoint обслуживает этот путь?», команда начинает собирать ответ из памяти, догадок, выдумок, ссылок и исходников.

Я больше 15 лет работаю в ИТ, из них около десяти занимаюсь проектированием и системным дизайном. За это время перепробовал немало: Sparx, ArchiMate, Structurizr, Confluence, whiteboard-сервисы. Я не считаю их плохими — у каждого есть свой сценарий и своя аудитория. Но лично у меня постоянно оставалось ощущение разрыва: диаграмма была отдельно, документация отдельно, а живой контекст системы — в голове у людей.

В какой-то момент моими рабочими спасателями стали whiteboard и VS Code, а позже Cursor. В них можно быстро собрать мысль, оставить немного полезного творческого беспорядка и двигаться дальше. Но они не решали главную проблему: хотелось, чтобы система, её связи, сценарии и документация были одной навигационной моделью.

Так появился C4 QuietGridLabs. Это мой экспериментальный редактор, где C4-модель — это каркас проекта. К элементам можно прикреплять документацию, sequence-диаграммы, ER-диаграммы и описание API, а по связям — переходить от общего ландшафта к конкретным участникам взаимодействия.

Держите открытыми две вкладки. В одной — интернет-банк, куда вы залогинены и где на экране висит ваш баланс. В другой — какой-то сайт, на который вы забрели по ссылке из выдачи, ничего особенного. Теперь вопрос, который на первый взгляд кажется надуманным, а на деле упирается в фундамент всей веб-безопасности: что мешает скрипту со второго сайта взять и прочитать ваш баланс из первого?

Vue снова меняет способ обновления интерфейса: теперь на горизонте Vapor и рендеринг без Virtual DOM. Зачем очередная архитектурная перестройка и что не устраивает команду Vue в нынешнем подходе?

Чтобы ответить, проследим путь Vue от Object.defineProperty до Proxy  и зачем теперь понадобился Vapor. Это поможет лучше понимать поведение ref, reactive и computed, вникнуть в причины архитектурных изменений Vue и подготовиться к дальнейшим изменениям.

CSS «слушает» нас. Нет, не в буквальном смысле. Суть в том, что в CSS появляется все больше псевдоклассов, которые позволяют реагировать на события JS без необходимости писать сам JS. Формально псевдоклассы отслеживают состояния, а не события, но порой они настолько похожи на обработчики событий, что разница становится почти незаметной (хотя в контексте CSS это не так уж важно).

Привет, Хабр! (И тебе, 1С-ник, который открыл статью только чтобы убедиться, что пока точно не надо изучать новый продукт. И тебе, питонист, который сейчас будет морщиться. И тебе, мобильный разработчик, который уверен, что без Kotlin/Swift нормальное приложение не родится - держи кружку крепче.)

Эта статья будет посвящена технологии, на которой можно написать своё мобильное приложение за пару дней. И я вам на примере реализованного мною полноценного проекта логистического приложения покажу, что сейчас из себя представляет эта технология на нашей родной КИРИЛЛИЦЕ, и что на ней можно сделать прямо сейчас. И самое главное, как…

👾 ИИ Агент для скоринга торговых рекомендаций

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

В итоге оценивается не красивая лента и не заявленный win rate, а статистически проверяемое качество решений автора.

Всем добрый день. Как и в предыдущие месяцы, по итогам июля мы решили рассказать про то, как изменилась GigaIDE за прошедший месяц. Ниже — краткий обзор обновлений Pro-функциональности GigaIDE, который можно найти на нашем маркетплейсе.

Омаж на статью https://habr.com/ru/articles/1066668/ от @BorisXQ

Я тоже написал "мессенджер" на любимом $mol ( благодаря которому я могу добавить этот мессенджер в любое своё $mol приложение за 1 строчку кода ) и GiperBaza, без слежки, логина, пароля, и вообще без сбора каких либо данных

И даже почти без сервера)

P.S Только для домашнего использования

Можно создать диалог с тем, чей айди тебе известен, либо создать беседу и пригласить туда людей, либо создать реестр, что бы все кто хотел туда бы добавились. Например реестр всех айтишников)

Вступайте в очередной реестр всех айтишников!) https://b-on-g.github.io/gram/#!users=xa77SU2P_FSMnTiSP

Или написать мне напрямую https://b-on-g.github.io/gram/#!invite=J2kVT1UX_fmQm09dd

Поговорим про микро-оптимизацию. Про, казалось бы, самую безобидную вещь: обычный {}.

[object Object] выглядит почти бесплатной абстракцией. Создал объект, напихал полей в любом порядке, удалил ненужное, передал дальше и забыл. Но, внезапно, одинаковые для тебя объекты могут оказаться разными для V8, порядок присваиваний влияет на машинный код, а “безобидный” delete оставляет после себя совсем не пустое место.

Для 99% систем это не имеет значения. А вот если у тебя hot path, через который проходят десятки тысяч объектов в секунду, или ты пишешь библиотечный код, стоит знать, что V8 на самом деле делает с твоими объектами.

Привет, на связи Рома Миронов из Авито. Я бывший — хотя бывших не бывает — фронтендер, а сейчас тим- и техлид. Ковыряю AI и больше ничем не занимаюсь — кроме команды, конечно :) В этой статье расскажу, почему фронтенд пока не умер, какие задачи уже можно отдавать агентам, где они красиво ошибаются и почему сначала от AI становится больнее, а не легче.

Данная статья - это продолжение повествования о том, как я делаю AAA-движок для запуска старых игр, а именно GTA San Andreas и её модов, в браузере. В ней речь пойдет о том, как я уперся в производительность Three.js и перевел движок на свой фреймверк под WebGPU.

Поучаствовал в хакатоне от работы. Интересно было испытать себя и проверить свой тулсет для разработки игр. Смогу ли я один сделать игру под ключ - код, арт, звуки?

Штош, игру сделал! Правда лег спать около шести утра 😖 Но это было интересно!

Внутри ссылка на игру и немного технических подробностей как генерил арт, код и собирал игру

У нас тормозило всё: сборка, дев-сервер, svelte-check, LSP. Я пошёл писать свой компилятор Svelte на Rust. Пять с половиной месяцев ковырял руками и бросил. Через год вернулся с ИИ-агентом и доделал за 106 вечеров и $700.

В одном из наших проектов бот записывает видеовстречи из Яндекс Телемоста, сохраняет их в WebM и передаёт на backend. После обработки запись становится доступна пользователю и воспроизводится через Video.js.

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

Сначала мы исправили MIME-тип. Затем изменили настройки плеера. Потом ограничили ответы бека чанками по 50 МБ. Ничего из этого не помогло.

Настоящая причина находилась не на фронте и не на беке, а в самом WebM.

Всем привет. На днях моя техническая статья с open source кодом про написание нейросети с нуля на Node.js вышла из песочницы Хабра благодаря НЛО, набрала 8K+ просмотров и получила крутой фидбек. Но за 2 дня до этого я решил провести эксперимент и выложить этот же материал на VC.ru. Итог — моментальный пожизненный бан без объяснения причин в первые 15 минут…