Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

265,28
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Feature Based Clean Architecture. Часть 2: Декомпозиция на сервисы: анализ ограниченности подхода

Уровень сложностиСредний
Время на прочтение19 мин
Охват и читатели7.7K

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

Серия из пяти частей: пошаговый разбор траектории на сквозном Twitter-подобном бэкенде, расчёт ROI типичной деградации в долларах и человеко-часах ($30–60k в год для команды из двух мидлов, $6–15M в год для big tech — с полным расчётом в части 3), и формальное доказательство на языке теории графов, при каких структурных условиях деградация невозможна.

Часть 2 — что произойдёт, когда команда честно сделает напрашивающийся после части 1 рефакторинг. Без художественности: реальный код после декомпозиции, демонстрация того, что на верхнем уровне всё действительно стало лучше, и параллельный запуск ровно того же сценария деградации уровнем ниже. Точка, в которой видно: декомпозиция не убирает проблему.

Читать далее

Почему custom URI schemes в Telegram Mini Apps ведут себя по-разному на Android, iOS и Desktop

Уровень сложностиСредний
Время на прочтение4 мин
Охват и читатели7K

Разбираю проблемы cross-platform onboarding между Telegram Mini Apps и native apps. Почему Android, iOS, Windows и Linux по-разному ведут себя при deeplink handoff внутри Telegram WebView.

Читать далее

Как «спят» вкладки в браузере

Уровень сложностиСредний
Время на прочтение18 мин
Охват и читатели15K

Привет! Меня зовут Костя, я разработчик интерфейсов в ЮMoney. В этой статье разбираю, почему вкладка после возврата из фона начинает вести себя странно: интерфейс подвисает, таймеры съезжают, события приходят пачкой.

Материал особенно пригодится тем, кто делает сложные SPA с realtime‑обновлениями, WebSocket и насыщенным UI — CRM, дашборды, платёжные сценарии.

В статье разберём:

— как устроены Page Visibility API и Page Lifecycle API,
— зачем браузеры ограничивают фоновые процессы,
— что происходит при заморозке вкладок, системном сне и возврате страницы из BFCache,
— чем отличаются Chrome, Safari и Firefox,
— какие API уже устарели,
— а какие подходы помогают делать интерфейсы стабильнее в реальных пользовательских сценариях.

Читать далее

Feature Based Clean Architecture. Часть 1: Эволюция NestJS-приложения в неподдерживаемое состояние

Уровень сложностиСредний
Время на прочтение13 мин
Охват и читатели8K

Если ваш NestJS-проект собран по рекомендованной документацией feature-based-структуре — через год активной разработки у вас будет god-сервис. Не «возможно», не «при стечении обстоятельств» — структурно неизбежно. У этой структуры нет встроенного барьера от деградации.

Серия из пяти частей: пошаговый разбор траектории на сквозном Twitter-подобном бэкенде, расчёт ROI типичной деградации в долларах и человеко-часах ($30–60k в год для команды из двух мидлов, $6–15M в год для big tech — с полным расчётом в части 3), и формальное доказательство на языке теории графов, при каких структурных условиях деградация невозможна.

Часть 1 — старт траектории: AuthService с двумя ручками, который через год становится god-функцией на 200 строк с шестью параметрами и четырьмя независимыми доменами бизнеса. Без художественности — только реальные продуктовые требования (анти-фрод, реферальная программа, маркетинг, партнёрская программа) и их кумулятивный эффект.

Читать далее

Чтобы не выглядело как пет-проект»: как я в одиночку сделал премиальный интерфейс кино-сервиса (с кодом)

Время на прочтение8 мин
Охват и читатели11K

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

Сразу дисклеймер: я не дизайнер. Всё нажито методом «смотрю на референсы (Letterboxd, Mubi, KinoPoisk HD) и пытаюсь повторить ощущение». Оказалось, премиальность — это не про дорогие шрифты, а про несколько повторяющихся приёмов. Разберём пять.

1. Акцентный цвет из постера фильма — фича, которая дороже всего «продаёт»

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

Делается без всяких ML, прямо в браузере через canvas: рисуем постер в крошечный буфер 32×48, усредняем цвета (выкидывая чёрные рамки и серость), переводим в HSL и принудительно «насыщаем», потому что постеры часто тусклые. Результат кладём в CSS-переменную — и весь интерфейс подхватывает её.

Читать далее

Креативное программирование: визуализация звука

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели9K

Привет, я Игорь Аникин, Frontend разработчик RUTUBE TECH. Медиадизайнер, специализируюсь на компьютерной графике. Увлекаюсь программированием более 15 лет.

Это небольшой мастер-класс, как визуализировать звук двумя способами. Текст подойдёт любому читателю, которому интересна выразительная часть цифрового мира.

Читать далее

12 паттернов, которые приведут твой код в порядок

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели15K

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

Читать далее

Kwayk: как я сделал Quake на Qt Quick3D и прикрутил физику из Death Stranding 2

Время на прочтение10 мин
Охват и читатели17K

Получится ли сделать полноценную 3D-игру на Qt Quick3D?

Именно такой вопрос у меня возник, когда я начал изучать Quick3D. Казалось бы, рендер и партиклы есть, базовая физика в лице Quick3D Physics тоже присутствует. Пример CharacterController из Qt указывал на то, что проблем быть не должно.

Но хотелось проверить это самому на чём-то реальном.

Поскольку моделлер и художник из меня никакой, да и в геймдеве опыта у меня меньше нуля, я решил переписать Quake — любимую игру своего детства. В ней я провёл сотни (тысячи?) часов, играя в мультиплеер на бесплатных серверах МТУ-Информ через модем US Robotics 33600.

В итоге получился проект Kwayk — попытка переписать Quake на Quick3D.

Читать далее

SSR и CSR в одном месте: как мы разделили рендеринг для людей и поисковых ботов

Время на прочтение5 мин
Охват и читатели8.8K

В современной веб-разработке SEO и производительность часто вступают в противоречие. SSR дает хорошую индексацию, но усложняет архитектуру. CSR быстрее в разработке и меньше нагружает сервер, но поисковые боты могут не понять страницу.

Мы разрабатываем продуктовый сайт на Angular 17 с микрофронтендовой архитектурой на Module Federation. Нам нужно было и хорошее SEO, и привычный CSR для пользователей. В итоге мы выбрали гибридный подход: для людей — клиентский рендеринг, для поисковых ботов — пререндеринг через доработанный сервис MTS botview.

В статье рассказываем, почему чистый SSR не подошел, как мы разделили рендеринг, что доработали в открытом решении и как отличаем ботов от людей без ошибок.

Читать далее

Как я собрал кубик Рубика в браузере на чистом Canvas

Уровень сложностиСредний
Время на прочтение12 мин
Охват и читатели17K

Недавно я увидел видео, где маленький мальчик собирает кубик Рубика за 2,76 секунды (вот оно), и мне тоже захотелось научиться его собирать. Конечно, не за такое время, но главное — суметь сложить хотя бы за 10 минут. Главная проблема в том, что кубика у меня нет; можно купить, но это как-то скучно, на троечку. Поэтому я подумал: а почему бы не написать за выходные простой код, чтобы побыстрее посмотреть и покрутить кубик, а потом уже можно и купить. Заодно и разберусь, где что находится у кубика.

Читать далее

Navigation API теперь доступен в Baseline

Уровень сложностиПростой
Время на прочтение13 мин
Охват и читатели9.9K

Navigation API предоставляет возможность инициировать (программно запускать), перехватывать и управлять навигацией в браузере. Он также позволяет исследовать (traverse) сущности истории (history entries) приложения. Это улучшенный вариант предыдущих возможностей веб-платформы, связанных с навигацией, таких как History API и window.location, который решает их проблемы и специально предназначен для одностраничных приложений (single-page applications, SPA).

Читать далее

Альтернативы Centrifugo для Laravel: Reverb, Pusher, Ably, Socket.IO, SSE и polling

Уровень сложностиПростой
Время на прочтение11 мин
Охват и читатели5.7K

Заключительная часть серии статей про Laravel + Centrifugo и как его готовить.

Сравниваем альтернативы Centrifugo для Laravel: Reverb, Pusher, Ably, Socket.IO, SSE и polling. Разбираем плюсы, минусы и сценарии выбора real-time решения.

Читать далее

5 распространенных ошибок новичка в E2E-тестах

Уровень сложностиПростой
Время на прочтение6 мин
Охват и читатели11K

Начинаете писать E2E-тесты? Думаете, нужно просто открыть страницу, нажать кнопку и написать expect?

Разберем на примере Playwright, почему отчёт может быть зелёным, но бесполезным.

Разобрать ошибки

Ближайшие события

От legacy-монолита к микрофронтендам: архитектура современного SPA

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели11K

Меня зовут Иван Некипелов, я технический руководитель команды фронтенд инфраструктуры в Wildberries & Russ. Последнии несколько лет мы с командой развиваем архитектуру и инфраструктуру большого frontend-продукта.


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

Читать далее

Вы неправильно тестируете асинхронный код: тест проходит раньше, чем выполняется проверка

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели8.7K

В статье разберём, как именно раннер решает, что тест прошёл, почему .then без return выполняется уже после теста, почему try/catch в async‑тесте — частый источник ложного зелёного, что не так с forEach и setTimeout внутри тестов и какие инструменты не дают тесту соврать. Примеры на Jest, но контракт у Mocha, vitest и прочих тот же.

Читать далее

Centrifugo JS client в Laravel: frontend и production

Уровень сложностиПростой
Время на прочтение9 мин
Охват и читатели8.1K

Разбираем frontend и эксплуатацию real-time системы на Laravel и Centrifugo: JS client, reconnect, token refresh, HTTP recovery, Nginx, логи и мониторинг.

Читать далее

Публикация событий из Laravel в Centrifugo: Events, listeners, queue jobs и безопасный real-time payload

Уровень сложностиПростой
Время на прочтение12 мин
Охват и читатели6.9K

В этой статье разберём, как правильно организовать публикацию real-time событий в Laravel: почему не стоит отправлять сообщения напрямую из контроллеров, как использовать Laravel Events и listeners, зачем нужны queue jobs, почему afterCommit() критичен для корректности данных и каким должен быть безопасный payload без полной Eloquent-модели.

Читать далее

Telegraf.js умер. Как мы оживили фреймворк, переписали ядро на Native Fetch и затащили Bot API 9.6

Уровень сложностиСредний
Время на прочтение3 мин
Охват и читатели7.7K

Каждый, кто пишет Telegram‑ботов на Node.js / TypeScript, знает про библиотеку Telegraf.js. Это был стандарт индустрии. Ключевое слово — «был». Оригинальный репозиторий фактически заброшен майнтейнерами, пулл‑реквесты годами висят без ответа, а сам фреймворк застрял в прошлом.

Пока Telegram один за другим выкатывает масштабные апдейты (Звёзды, Подарки, Бизнес‑аккаунты, Улучшенные медиа), официальный Telegraf не поддерживает ничего из этого.

Мне надоело смотреть на падающие в продакшене боты и городить костыли, поэтому я создал форк — telegraf‑hardened. На прошлой неделе мы выпустили мажорный релиз v6.0.0. Рассказываю, как под капотом устроена обновленная либа.

Читать далее

Push-уведомления в мессенджере: production-грабли которых нет в туториалах

Уровень сложностиСложный
Время на прочтение9 мин
Охват и читатели13K

Это девятая статья про инженерные решения в ONEMIX. Тема узкая, push-уведомления. Но я её давно хотел разобрать, потому что туториалов в интернете много, а production-граблей в них почти нет.

Если коротко, туториал по push выглядит так. Регистрируешь токен через Notifications.getExpoPushTokenAsync(). Отправляешь на бэкенд. Когда приходит пуш — addNotificationResponseReceivedListener ловит тап, навигируешь в нужный экран. Всё.

В реальном мессенджере таких туториалов недостаточно. Появляется десяток узких проблем. Пуш приходит когда юзер уже в этом чате. Пуш приходит когда приложение убито системой. Navigation после открытия из пуша добавляет дублирующийся экран в стек. На iOS звонки идут через отдельный канал VoIP который требует совершенно другой инфраструктуры. Эти грабли я и разберу.

Читать далее

Фишинг с подменой URI: или как один хитрый редирект может угнать ваши пароли

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели8.8K

Всем привет! Хочу поделиться, возможно, не новым, но, на мой взгляд, довольно изощренным видом фишинга. Кто-то уже наверняка сталкивался с таким методом, а для кого-то он окажется в новинку.

Читать далее