Latest posts
amorgunov
25 May, 06:55
На прошлой неделе ездил на HolyJS.Про конференции в целом напишу отдельно - есть несколько мыслей про формат, цену билетов VS качество докладов и то, зачем вообще сейчас нужен офлайн (не просто так же FrontendConf закрыли в этом году). А сейчас расскажу про интересные наблюдения именно с текущей HolyJS.TL;DR: фронтенд переезжает в мир агентной разработки (как и для разработчиков, так и в движении в сторону agent-ready интерфейсов).1️⃣ В программе было очень много про AI. Часть докладов была полностью про ИИ-агентов и базовую обвязку вокруг них (промпты, MCP, skills и т.п.), но пока довольно мало глубоких кейсов (типа статистики по ускорению time to market, реального опыта Spec-Driven Development подхода на больших кодовых базах или каких-нибудь низкоуровневых штук про устройство агентов).Из интересного - послушал про стандарт WebMCP (Web Model Context Protocol) и протокол A2UIamorgunov
18 May, 07:35
Друзья, всем привет! Давно ничего не писал, в очередной раз попробую оживить канал. Обещать стабильный график не буду: один-два раза в неделю небольшие разборы технологий, диванные мнения, вопросы для обсуждения в чате и истории про героически решенные проблемы (или до сих пор не решенные), с которыми я сталкиваюсь на своих проектах.Для тех, кто давно не заходил или уже забыл, кто я и чем занимаюсь: я всё так же работаю техлидом в ~Самокате~ ecom.tech, всё так же пишу сервисы на Next.js, иногда выступаю на конференциях и митапах. В прошлом году начал записывать видеоуроки по Feature-Sliced Design на YouTube (и эту историю тоже планирую возобновлять).Писать, как и раньше, буду в основном про фронтенд и всё техническое, с чем сталкиваюсь в рабочих задачах: Next.js, инфраструктуру, Node.js, SSR, масштабирование, проектирование, архитектуру, FSD, React, стейт-менеджеры, Web API,amorgunov
23 Jun 2025, 08:03
Interface merging в TypeScriptВ TypeScript есть возможность автоматически мержить интерфейсы с одинаковыми именами в один (в доке это называется более общим понятием «declaration merging»).Эта возможность, кстати, одна из причин, почему я долгое время в своих проектах предпочитал использование тайп алиасов (type) в качестве основы для описания типов, а не интерфейсов. Чтобы случайно неявно не объединить два интерфейса вместе.Но есть несколько кейсов, когда расширение интерфейсов является довольно полезной фичей (с типами, объявленными через type это сделать не получится).Первый кейс – расширение интерфейса внешних библиотек или глобальных переменных без прямого редактирования оригинального кода. Например, подключаем к jest кастомный матчер со своим API (мы уже мигрировали на vitest, но пример с матчерами для jest-тестов первым пришел на ум):declare global { namespace jest { intamorgunov
12 Jun 2025, 11:00
stringbool в zodПару дней назад закрыли старый ишьюс от 2022 года в библиотеке zod, в котором предложили добавить более строгую проверку (через дополнительный аргумент) на приведение строки к булаен типу (z.coerce.boolean()), чтобы при передаче "false" в виде строкового значения возвращался false.Эта история расширилась тем, что помимо "false", так же хотелось бы обрабатывать "0", "off" и подобные falsy-значения. Это можно было решить через кастомную схему и метод transform (рассказывал в видео про валидацию переменных окружения), но в четвертой версии zod появился тип stringbool, который решает эту проблему. Что он делает? Преобразует "булевы" значения в строковом виде (список можно переопределять) в простые булевы значения:const strbool = z.stringbool();strbool.parse("true") // true strbool.parse("1") //true strbool.parse("on") // truestrbool.parse("false") // false strbool.pamorgunov
6 Jun 2025, 08:11
Мнение – SolidJSЗа последний год удалось несколько раз пописать код в рамках пет-проектов на SolidJS (+ разбирали проект с менти), еще одном вечно перспективном фреймворке. Поделюсь своим мнением.У солида хорошая документация и онбординг-туториал, которые знакомят с основами фреймворка. А примерно год назад вышел мета-фреймворк SolidStart, который берёт на себя сборку (на базе vinxi), роутер и работу с SSR (серверные экшены, дедупликация запросов, прелоадеры и т.д.).Про солид часто говорят, что это реакт без костылей. Они и правда очень похожи, и если вы пишете на реакте, то легко поймёте код, написанный на солиде: тот же компонентный подход, JSX, похожие lifecycle-методы компонентов, контекст и инфраструктура сигналов, схожая с useState для работы с состоянием внутри компонентов.Но конечно есть и большие отличия. Во-первых, у солида высокая производительность благодаряamorgunov
29 May 2025, 06:48
Лечу на CodeFestДрузья, на этих выходных буду на самой большой конференции в Сибири – CodeFest. Буду рассказать (снова) про Feature-Sliced Design, а точнее как можно в проект с модульной архитектурой внедрить FSD почти без изменений в самой архитектуре.Из интересного, собрал демо-проект (исходники доступны на гитхабе), где для каждой версии проекта построил граф зависимостей модулей (слайсов) через dependecy-cruiser. На первом изображении схема проекта без FSD, код которого почти полностью написал cursor. На втором – тот же проект, но адаптированный согласно методологии.Визуально по графу можно увидеть преимущества FSD, которые мы получаем из коробки – направление зависимостей по слоям, отсутствие кросс-импортов (поддержка низкой связанности), высокое зацепление модулей, публичное API, а так же линтер, который за всем этим будет следить.Конечно, все это можно получить и без FSD,
amorgunov
24 May 2025, 09:00
Новая статья в блог - про кросс-импорты модулей.Решил разобрать свои черновики для статей, которые накопились за последние пару лет, но до публикации так и не дошли.Первый на очереди пост про кросс-импорты модулей: что это такое, как их решать и нужно ли их вообще запрещать.Если рассказать про кросс-импорты в четырех тезисах:1️⃣ Этот термин обозначает использование одного модуля другими в рамках одного архитектурного слоя; 2️⃣ Чем больше кросс-импортов, тем выше связанность (англ. coupling), а нужно стремиться к низкой связанности (поэтому, например, в FSD кросс-импорты вообще запрещены); 3️⃣ Решаются кросс-импорты двумя способами: инверсией зависимостей и выносом общего кода в отдельный модуль; 4️⃣ Полный запрет кросс-импортов (нулевая связанность между модулями) не бесплатен и требует ввода дополнительных абстракций, что со временем может сильно усложнить когнитивную сложностьБлог о веб-разработкеКак решать проблемы кросс-импортов, и проблема ли это вообщеРассмотрим, что такое кросс-импорты, способы их решения и ответим на вопрос, необходимо ли их запрещать или нетamorgunov
16 May 2025, 08:30
Всем привет! Запускаю серию уроков по Feature-Sliced Design! В рамках серии будем разбираться с базовыми концептами, рисуя схемы взаимодействия модулей и закрепляя практикой с лайвкодингом.Давно хотел поснимать видео контент по FSD, чтобы поделиться своим опытом, рассказать как решать самые популярные проблемы, поделать код ревью опенсорс проектов и просто собрать (и оживить) сообщество вокруг методологии.Уроки будут не совсем для начинающих (как минимум нужно знать термины из методологии, прочитать документацию и поразбирать примеры). По формату это будут 20-30 минутные ролики, больше похожие на уроки как из кого-нибудь онлайн курса.Сейчас уже подготовлено 6 уроков (про лайауты страниц, тему сайта, фич флаги, менеджер модалок и инфраструктурные сущности), в планах записать еще с десяток (про работу с API, пользовательскую сессию, кросс импорты, работу с redux, фрактальныеamorgunov
4 Apr 2025, 08:41
Уязвимости в NextJSЯ думаю уже почти все слышали про уязвимость в NextJS, которая позволяет при запросах обходить миддлевары, и например, пропускать обработку авторизационных токенов и прочие серверные проверки. Уязвимость очень проста в эксплуатации, достаточно прокинуть http-заголовок x-middleware-subrequest, которая пропускает указанные миддлевары. Подробнее почитать можно в блоге Рашида Алама.Наш проект это не затронуло, так как мы не смогли в свое время завести в нашей инфре стабильную работу миддлевар. Но пару месяцев назад мы столкнулись с другой уязвимостью на основе «cache poisoning», которая не получила столь бурную реакцию в интернете, но в нашем случае тоже могла бы привести к довольно критичным последствиям.Cache poisoning (дословно, отравление кэша) - это атака, при которой обычным пользователям отображается вредоносный ответ на основе манипуляций с веб-сервером иamorgunov
24 Nov 2024, 13:49
На HolyJS был еще один доклад про FSD от Евгения Паромова, в котором Женя разобрал 3 недостатка на основе рабочего опыта работы с методологией на разных проектах, и как их можно решать путем переосмысления слоев.Было бы конечно круто нам прямо на конференции провести дебаты, но я после своего доклада был настолько выжат, что сил ни на что практически не осталось. Но в будущем возможно что-нибудь подобное и организуем.Доклад был довольно крутым и по контенту, и по подаче. Когда его выгрузят на ютуб, всем, кто использует FSD, рекомендую посмотреть (пока доступна только преза). Но указанные проблемы мне все же хочется разобрать.1️⃣ Огромное количество сущностей и фичей в проекте. Это можно встретить на многих проектах, построенных на FSD, так как большое количество слоев «заставляет» декомпозировать все на отдельные сущности и фичи, и даже группировка по связанной функциональности неamorgunov
18 Nov 2024, 11:28
Друзья, всем привет! На прошлой неделе выступил на конференции HolyJS, рассказывал опять про FSD. В прошлый раз я получил много комментариев, что FSD плох, но за эти пол года методология претерпела изменения, а за день до выступления вышла минорная версия 2.1. Идея доклада была рассказать о новых вещах в FSD через проблемы, но к сожалению все опять подумали, что в FSD ничего не меняется, одни проблемы 😁 Я считаю что у каждого инструмента есть недостатки, и рассказывать о том, как работать с инструментом через решение проблем намного интереснее.О чем рассказывал?1️⃣ Разбирал запрет кросс-импортов и как с ними работать через инверсию зависимостей и фичу @x, которая так и называется, публичное API для кросс-импортов (появилась в 2.1).2️⃣ Про размазывание кода, когда мы сразу пытаемся все раскидать по всем слоям. Тут решение достаточно тривиальное - использовать local-first стратегиюamorgunov
26 Jun 2024, 08:30
Что нового во фронтендеПризнаюсь. Периодами я совсем перестаю следить за тем, что происходит во фронтенде, а сотни новых библиотек каждую наносекунду никто не отменял. Сейчас восполняю пробелы и попробую собрать самые значимые на мой взгляд изменения за последнее время.1️⃣ Серверные компоненты/экшеныВ настоящее время идет довольно сильный мейнстрим на перенос части логики приложений на сервер (лучшие метрики типа TTFB/TTI за счет того, что часть JS-кода можно вообще не загружать на клиенте или загружать лениво). В React - это серверные компоненты, которые выполняются только на сервере и не попадают в клиентский бандл.Сюда же отношу серверные экшены, которые реализуют RPC (remote procedure call) и позволяют исполнить код на сервере прямыми вызовами из клиентских компонентов. Раньше думал это чисто история в рамках NextJS, но как оказалось они уже много где реализованы.Я до сихamorgunov
18 Jun 2024, 08:41
Неделю назад прошла конференция «Я 💛 Фронтенд 2024», на которой я в качестве спикера рассказывал про архитектурную методологию Feature-Sliced Design.На отдельные ролики еще не нарезали, но есть запись трансляции всей конференции с разбитыми таймингами по докладам. Как выложат отдельное видео, скину его сюда.Уже давно хочу поделиться некоторыми мыслями насчет конференций (за последний год был на нескольких митапах, FrontendConf и CodeFest), что движение идет куда-то не в ту сторону. Часть с докладами уходит на второй план и уступает стендам партнерских компаний и охотой за мерчем. В ближайшее время соберу все вместе и закину свои рассуждения на этот счет.Что касается моего выступления. Рассказал что из себя представляет методология FSD (= архитектурные паттерны + правила по неймингу структуры проекта), основные сложности при использовании (= нужно знать архитектурные принципы,amorgunov
7 Jun 2024, 17:52
Завтра буду выступать на конференции «Я люблю фронтенд» от Яндекса и рассказывать про архитектурную методологию Feature-Sliced Design. Сделаю общий экскурс, разберу основные понятия, подробно остановлюсь на нескольких слоях (сущности, фичи и виджеты). Разберу проблемы, с которыми столкнулся на рабочем проекте: взаимодействие модулей на разных уровнях, кросс-импорты и нехватка слоев. Для каждой проблемы конечно же расскажу о возможных вариантах решения.Если вы тесно работаете с методологией, то я вряд ли открою для вас что-то новое. Но если вы только планируете использовать FSD или просто тема интересна для вас, то присоединяйтесь к трансляции на ютубе. Сама конференция будет с 11:00 до 18:00, я начну вещать с 13:15 по МСК (запись тоже будет доступна).P.S. На фото репетиция выхода на сцену (все серьезно) и финальный домашний прогон. Пока уложиться в 30 минут, отведенные
amorgunov
3 Jun 2024, 16:01
В марте выступал на MoscowJS и рассказывал про NextJS, о чем стоит знать, если вы хотите использовать его в своем проекте. Доклад всего на 20 минут, но краткую выжимку сделаю ниже.Что важно знать про NextJS? У него сейчас доступны две архитектуры для разработки: Page Router (архитектура, реализующая стандартный SSR подход, которая считается устаревшей, но формально поддерживаемая разработчиками, на самом деле нет) и пришедшая на замену - App Router (доступна с 13 версии, вносит кучу новых фич, типа Streaming render, RSC, selective hydration, partial prerendering, все то, что было недоступно ранее). Эти архитектуры разделяют NextJS на два разных фреймворка (даже вся документация разбита на два независимых раздела).Далее рассказывал про темные стороны (проблемы):1️⃣ Серверная составляющая. Довольно важная тема, которую редко обсуждают - конфигурируемость и гибкость сервера, чемYouTubeMoscowJS 58 — Темная сторона NextJS — Александр МоргуновCейчас почти на каждой фронтенд конференции есть доклад про самый популярный фреймворк, за которым будущее фронтенд разработки - NextJS. Рассказывают про новые фичи: серверные компоненты, серверные экшены, частичный пререндеринг с быстрой отдачей статического…amorgunov
24 May 2024, 12:20
Друзья, всем привет! Почти год ничего не писал, и за это время накопилось большое количество тем, которые хочется с вами обсудить. Пора оживлять канал, поэтому в ближайшее время ждите посты про NextJS (RSC и React конечно же), про Feature-Sliced Design, про фронтенд платформу, про обзоры технических книг, которые я прочитал за последнее время и про многое другое, что каким-то образом связано с разработкой.Для новеньких буквально пару слов о себе (а таких за год появилось довольно много, за что отдельное спасибо Виталию @web_platform, который собрал папку с фронтенд группами и добавил этот канал, вас стало чуть ли не в два раза больше). Меня зовут Александр, живу в Питере, работаю над клиентским веб приложением Самоката в роли техлида. До этого работал в Яндексе и аутсорсе. Иногда выступаю с докладами, периодически занимаюсь менторингом (много лет назад в Яндексе даже офлайн курс поamorgunov
29 May 2023, 17:13
Всем привет! На выходных дописал пост в блог про архитектуру проектов на основе вертикальных слайсов: https://amorgunov.com/posts/2023-05-28-vertical-sliced-architecture-in-frontend/Получилось немного сумбурно, но по итогу удалось сформировать универсальную структуру фронтенд проекта. Сейчас нет смысла собирать структуру с нуля (можно использовать тот же Feature Sliced), однако понимать архитектурные подходы, которые используются внутри, нужно. Особенно, если вы запускаете новые проекты или занимаетесь рефакторингом текущих (или планируете это делать в будущем). Вертикальные слайсы - один из таких подходов.Блог о веб-разработкеАрхитектура фронтенда на основе вертикальных слайсовОбсудим подход вертикальных слайсов через технические слои во фронтендеamorgunov
20 May 2023, 14:04
Валидация переменных окруженияВалидацией форм или параметров запроса никого не удивить, а вот на переменные окружения часто забивают и используют их напрямую. В чем проблема такого подход? Все переменные окружения в нашем коде будут типа string или undefined, даже если переменная описывает какой-нибудь булеан флаг или число. Поэтому часто в коде можно встретить конструкции типа process.env.IS_ENABLED === 'true' (здесь true - это строка) или parseInt(process.env.DELAY_MS, 10). И в каждом месте использования нужно не забыть сделать такую проверку.А еще, частая ситуация, что кто-то добавляет required переменную и у всех остальных проект начинает падать в рантайме в момент использования этой переменной. Ну или проект не падает, но спустя пол года файл .env сильно устаревает. Как решить эти проблемы?1. Все переменные можно считывать в одном месте (например, в каком-нибудь src/env.tsamorgunov
17 May 2023, 07:03
ts-resetВы знали, что в TypeScript-е методы JSON.parse и response.json() внутри fetch по умолчанию неявно возвращают тип any? Мы и правда не можем знать, какая структура данных находится в строке или придет с бекенда в рантайме. Но вместо того, что вернуть unknown и явно сказать, что тип неизвестен, TypeScript для поддержки обратной совместимости возвращает any.И таких небольших моментов довольно много: filter(Boolean) не сузит тип, Array.isArray или Array.from так же вернут any[], многие методы массива (includes, indexOf) будут некорректно работать с const assertions.Мэтт Покок (на ютубе ведет канал про TypeScript) собрал такие кейсы в виде небольшой библиотеки ts-reset, которую можно подключить на свой проект в виде деклараций типов (d.ts файл). Все, что делает библиотека, переопределяет встроенные в TS интерфейсы (declaration merging). В issues можно посмотреть еще на рядamorgunov
13 May 2023, 10:02
Всем привет! С того момента, как я опубликовал предыдущий пост, количество звездочек у репозитория на гитхабе выросло на 140%, почти догнав все официальные примеры по Feature Sliced методологии. Спасибо за поддержку ❤️Ниже хочу поделиться некоторыми техническими моментами, которые открыл для себя, делая этот пет проект:- Насколько же приятно работать с бандлером Vite. У меня есть ассоциации с Vue (на котором я очень давно не писал, но это был очень приятный опыт с точки зрения разработки). Так вот так же и Vite, очень быстрый запуск, горячая перезагрузка, CLI стартер под нужный стек. Я ничего не могу сказать про большие проекты, на сколько в них Vite стабилен, но для небольших - работает отлично. Интересно в будущем попробовать SSR плагин в связке с React-ом.- С помощью плагина eslint-plugin-boundaries можно (делать настоящую магию) задавать кастомные правила линтера для импортов
Related Channels
Other channels in the same section of the catalogue.
