TypeScript *

Сила RxJS. scan + mergeScan = 'Загрузить еще'

Кнопка 'Загрузить еще' (либо автоматическая подгрузка данных при скролле) довольно часто встречается в проектах и обычно решение связано с большим количеством подписок и переменных.

Как всегда, для оптимизации чего либо нам на помощь приходит великий и могучий RxJS, а в данной ситуации конкретно операторы scan & mergeScan.

Код:

  readonly loadTrigger$ = new Subject<void>();
  private readonly batchSize = 5;

  private readonly posts$ = this.loadTrigger$.pipe(
    startWith(void 0),
    scan((offset) => offset + this.batchSize, -this.batchSize),
    mergeScan(
      (accPosts: Post[], offset: number) =>
        getPosts(offset, this.batchSize).pipe(
          map((newPosts) => [...accPosts, ...newPosts]),
        ),
      [] as Post[],
    ),
  );

1. scan – калькулятор + хранитель состояния для offset:

   • Управляет состоянием загрузки (текущее смещение)

   • Начинается с -batchSize, чтобы первая загрузка была с 0

   • Увеличивает смещение на batchSize при каждом срабатывании

2. mergeScan – волшебный оператор для инкрементальной загрузки:

   • Сохраняет массив накопленных постов

   • Объединяет новые данные с существующими

   • Корректно обрабатывает параллельные запросы (в отличие от обычного scan)

Где полезен этот паттерн?

• Постраничные API (пагинация)

• Бесконечная прокрутка

• Порционная загрузка данных

• Любые сценарии накопления асинхронных данных

scan - https://rxjs.dev/api/operators/scan
mergeScan - https://rxjs.dev/api/operators/mergeScan
Больше об Angular - https://t.me/grandgular

afterEveryRender и afterNextRender

В Angular 20 afterRender был переименован в afterEveryRender, и это очень логично, так как теперь он более четко отражает суть (нейминг решает). Сам afterRender (далее afterEveryRender) и его брат afterNextRender появились в версии 17. Рассмотрим, почему эти два мощных инструмента управления рендерингом — не просто альтернативы ngAfterViewInit, а полноценные хуки жизненного цикла с бесшовной поддержкой SSR!

Это хуки?
Да! Это хуки нового типа, которые выполняются после рендеринга компонента:

• Они не заменяют ngAfterViewInit/ngAfterContentInit, а дополняют их

• Включают гранулярные реакции на рендеры, включая обновления

Почему идеально подходит для SSR?
Главное преимущество: обратные вызовы выполняются только на клиенте!
✅ После гидратации (в SSR)
✅ После первоначального рендеринга (в CSR)
✅ Больше никаких ошибок «документ не определен»

Использование:
constructor() {
// 🚫 Не запускается на сервере
// ✅ Запускается только один раз после загрузки браузера!
// 📊 Идеально подходит для однократной инициализации
afterNextRender(() => {
console.log('Next');
});

// 🚫 Не запускается на сервере
// 🔄 Запускается после каждого цикла обнаружения изменений
// ✨ Отлично подходит для обновлений, зависящих от DOM
afterEveryRender(() => {
console.log('Every');
});
}

Когда использовать?

afterNextRender

• Одноразовые операции (инициализация библиотеки, загрузка данных)

• Безопасная замена ngAfterViewInit для SSR

afterEveryRender

• Отслеживание изменений DOM (измерения элементов, позиции)
  
  ⚠️ Внимание: может повлиять на производительность

Основные выводы

• Интегрировано в систему жизненного цикла Angular

• Автоматический пропуск на стороне сервера - больше никаких хаков isPlatformBrowser!

• afterNextRender - "один раз после рендеринга"

• afterEveryRender - "после каждого обновления"

"Я пока не использовал afterEveryRender в своих проектах - есть ли у вас практические примеры использования? Поделитесь в комментариях!"

Больше об 🅰️ngular в моём Telegram-канале

AI-кодинг в 2025: Напарник, Фабрика или Облачная Песочница? Сравниваем Cursor, Replit, v0.dev и Harvi

Привет, Хабр!

Экосистема AI-инструментов для разработки разрастается с невероятной скоростью. Уже недостаточно просто иметь автодополнение кода; на сцену выходят полноценные среды разработки, способные понимать контекст, генерировать интерфейсы и даже самостоятельно проектировать архитектуру.

Я решил разобраться в четырех популярных, но идеологически разных подходах, чтобы понять, какой инструмент для каких задач подходит лучше всего. В нашем обзоре: Cursor (AI-напарник в IDE), Replit (облачная песочница), v0.dev (генератор UI-компонентов) и первая в России вайбкодинг студия Harvi.pro (AI-фабрика приложений).

1. AI как Напарник в вашей IDE (Cursor)

Cursor – это "VS Code на стероидах". Он не меняет ваш привычный воркфлоу, а глубоко интегрирует AI для помощи в написании и рефакторинге кода, отладке и поиске информации.

• Идеально для: работы с существующей кодовой базой, написания сложной бизнес-логики, точечных правок.

• Минус: Не проектирует приложение с нуля. Всю архитектуру и структуру вы держите в голове.

2. AI как Облачная Песочница (Replit)

Replit предлагает полноценную среду разработки прямо в браузере. Его главная фишка – возможность мгновенно запустить любой проект без локальных настроек. AI здесь выступает как мощное дополнение к этой облачной среде.

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

• Минус: Для больших и сложных локальных проектов может быть не так удобен. Мощность AI-ассистента, хоть и велика, но все же является частью общей платформы.

3. AI как Генератор UI-компонентов (v0.dev от Vercel)

v0 – это узкоспециализированный инструмент, который делает одну вещь, но делает ее отлично. Вы описываете интерфейс, а он генерирует готовые React-компоненты с использованием Tailwind CSS.

• Идеально для: фронтенд-разработчиков и дизайнеров, которым нужно быстро создавать красивые, адаптивные UI-компоненты.

• Минус: Это не полноценная среда разработки. Он не занимается логикой, бэкендом или структурой всего приложения.

4. AI как "Фабрика Приложений" (Harvi.pro)

Российский проект Харви предлагает иной подход, который можно назвать "вайбкодингом". Это веб-студия, где вы описываете общую концепцию, а AI генерирует всю структуру проекта – от фронтенда на Nuxt/Next.js до бэкенда на Node.js. Также интересно то, что это первопроходец, созданный нашими Русскими ребятами в России

• Идеально для: молниеносного создания MVP с нуля, проверки бизнес-гипотез, быстрого старта для фулстек-приложений.

• Минус: Как и любой генератор, AI может ошибаться, и сгенерированный код требует итеративной доработки в веб-редакторе, что может быть непривычно.

Выводы: нет "лучшего", есть "подходящий"

Как видим, идеального инструмента на все случаи жизни не существует. Выбор зависит от конкретной задачи:

• Нужно доработать сложный проект? Ваш выбор – Cursor.

• Хотите быстро проверить скрипт или поработать над проектом в команде? Replit к вашим услугам.

• Нужно быстро нарисовать красивый фронтенд? v0.dev сэкономит кучу времени.

• Нужно с нуля "родить" скелет целого фулстек-приложения для MVP? Harvi.pro может оказаться самым быстрым решением.

withComponentInputBinding()
Упрощение работы с параметрами маршрутизатора в Angular.

Как было раньше?

1. Создаем переменную/свойство (Signal, BehaivorSubject, Observable, неважно)

2. Инжектим и подписываемся на ActivatedRoute

3. Получаем параметры маршрута

4. Записываем в BS/Signal

😵‍💫😵‍💫😵‍💫

Манипуляций довольно много, но мы все к этому привыкли и это кажется нормальным.

Но с withComponentInputBinding() все стало намного проще:
1. Создаем сигнальный инпут... и...
Вот и все!

Никаких дополнительных манипуляций, и значение «у вас в кармане». Все, что вам нужно, чтобы это работало, — это передать withComponentInputBinding() в качестве аргумента в provideRouter().

Функция не новая (кажется, появилась в Angular 16), но я редко ее видел в проектах.

Немного технической информации из документации:

🔍Маршрутизатор передает данные в input() из:

1. Параметров запроса (?page=1&sort=asc)

2. Параметров пути и матрицы (/users/123;details=true)

3. Статических данных маршрута (data: { role: 'admin' })

4. Результатов резолвера (resolve: { user: userResolver })

🔍 Приоритеты:
Если есть дублирующиеся ключи, данные переопределяются в порядке выше — резолверы имеют наивысший приоритет и перезапишут остальные.

🚩 Важный нюанс
Если в маршруте нет данных для input(), он получит undefined (например, если параметр запроса удален из URL).

ℹ️ Как задать значения по умолчанию?

✔ Через resolver (чтобы данные всегда были в маршруте)
✔ Через transform в input() (если нужно обрабатывать undefined)

Спасибо разработчикам Angular за эту функциональность 🙏.

Больше об 🅰️ngular в моём Telegram-канале

🦥 RxJS defer — ленивая инициализация Observable

defer — это фабрика, которая создает Observable только при подписке, а не во время объявления. Идеально подходит для:

• HTTP-запросов (чтобы избежать преждевременного выполнения)

• динамических данных (которые должны быть свежими при каждой подписке)

• условных потоков (когда Observable зависит от состояния времени выполнения)

📌 Основные варианты использования

1. Свежие данные при каждой подписке

   const freshData$ = defer(() => of(Date.now()));

   // Новая временная метка при каждой подписке()

2. Работа с изменяемым состоянием

   const token$ = defer(() => of(localStorage.getItem('token')));

   // Всегда получает текущий токен, даже если обновлен

3. Условные наблюдаемые

   const api$ = defer(() => isLoggedIn ? http.get('/user') : http.get('/guest') );

4. Генерация случайного значения

   const random$ = defer(() => of(Math.random()));

   // Новое случайное число на подписку

🚫 Ограничения defer

• нет кэширования → используйте shareReplay, если вам нужно повторно использовать результаты.

• нет отмены запроса → объедините с switchMap/takeUntil для управления отменой

⚡Когда следует выбирать defer вместо обычных наблюдаемых?

• данные должны быть свежими при каждом subscribe()

• cоздание наблюдаемого стоит дорого и должно быть отложено

• поток зависит от изменяемых условий (флаги функций, статус аутентификации и т. д.)

Больше об 🅰️ngular в моём Telegram-канале

Angular Hack: Цикл без данных (в тэмплейте)

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

Вот мой способ (по крайней мере, я нигде такого не видел):

@for (_ of [].constructor(10); track $index) {
<div class="item"></div>
}

Используется Array.constructor, чтобы создать пустую массив фиксированной длины, который @for может перебрать по индексам.

Плюсы ✅

• Чудо-код (удивит коллег)

• Минимум кода (не нужно объявлять массив в компоненте)

Минусы ⚠️

• Чудо-код (может ненадолго ввести в ступор чающего код человека)

Конечно, можно просто использовать Array.from({length: 10})... но так все делают, не интересно)

Норм тема? Как считаете?

Приглашаем вас на бесплатный вебинар «TypeScript за час: основы, плюсы и практика». Познакомим вас с TypeScript. Расскажем, зачем он появился, в чём его преимущества и как он помогает писать понятный и надёжный код. Подойдёт и новичкам, и практикам.

⁉️ На вебинаре вы сможете задать вопросы спикеру.

📅 Дата: 13.05.2025

⏰ Время: 17:00-18:00 (Мск)

На вебинаре:

✔️ История возникновения TypeScript

✔️ Преимущества использования TypeScript

✔️ Пример написания кода на TypeScript

👨‍🎓 Спикер: Кучин Евгений — разработчик на Java и JavaScript.

✍️Записаться на вебинар

Возможно, вам будет интересен курс «Язык программирования TypeScript». Вы освоите TypeScript, изучив типизацию, интерфейсы и классы. Узнаете, как использовать статическую типизацию, интегрировать TypeScript с существующим JavaScript и настраивать окружение разработки. Это поможет сделать ваш код более безопасным и структурированным.

Старт: 19 мая

Цена: 14 900 8 940 ₽ (-40%)

✍️ Записаться на курс

Приглашаем на новый бесплатный вебинар «Pattern matching в TypeScript: делаем код предсказуемым».

Разработчики часто сталкиваются с ситуациями, когда необходимость учёта множества сценариев делает код запутанным и трудным для восприятия. Проверки на null/undefined и конструкции if превращают его в нечитабельный и сложный для тестирования.

На вебинаре мы обсудим, как избежать этих ошибок, используя подходы из Domain-Driven Design (DDD) и функционального программирования (FP). Вы узнаете, как отделить бизнес-логику от реализационных деталей, создать качественные доменные модели и эффективно применять discriminated unions и паттерн-матчинг в Typescript.

⁉️ На вебинаре вы сможете задать вопросы спикеру.

📅 Дата: 24.04.2025

⏰ Время: 18:00-19:30 (мск)

На вебинаре:

✔️ Discriminated Unions

✔️ DDD

✔️ Business Logic as Data

✔️ FP

✔️ Declarative Programming

👨‍🎓 Спикер: Борисов Никита — эксперт в области фронтенд-разработки.

👉Записаться👈

Как я выбил 350к в месяц, не написав ни одной строчки кода сам

Залетел тут недавно на Хабр почитать про очередные страдания тимлидов, и решил поделиться, как последние полгода зарабатываю на жизнь без этого всего геморроя.

Короче, я открыл для себя вайбкодинг. Не, серьезно, вся эта тема с генерацией кода по описанию — это как будто я нанял себе джуна на полный день бесплатно.

Инструменты

Harvi.pro — мой основной инструмент. Норм генерит фронт по текстовому описанию, меньше заморочек с оплатой для наших:

• 999₽ — 10М токенов

• 2499₽ — 25М + 5М бонусом

• 4999₽ — 50М + 10М бонусом

Под капотом Claude 3.7 Sonnet. Беру средний тариф, хватает на 3-4 недели активной работы.

V0.dev от Vercel — тоже неплохой, но дороговат для меня:

• Free — 20 генераций

• Pro — $20 в месяц

• Team — $30 в месяц

Под капотом тоже Claude 3.7 Sonnet. Качество вроде чуть лучше бывает, но с оплатой сами знаете что.

Replit — тут я собираю всё в кучу, тестирую и деплою. Удобно, что можно быстро показать клиенту результат.

Как это на самом деле работает

Не буду врать, что просто нажимаю кнопку и получаю готовый продукт. Это все еще работа:

1. Собираю с клиента максимум инфы и референсов

2. Генерю компоненты по частям (целые страницы редко получаются с первого раза)

3. Много времени уходит на склеивание и фиксы

4. Приходится знать хотя бы основы, чтобы понимать, что пошло не так

Но при этом скорость выросла раза в 3-4. Раньше лендинг делал неделю, сейчас — день-два. Простое приложение с формами — было 2 недели, стало 3-4 дня.

Беру в среднем 80-100к за проект, делаю 3-4 в месяц. Вот и выходит около 350к.

Да, чувствую, что теряю навыки в некоторых областях. Зато прокачался в составлении промптов — это теперь как отдельная специальность.

Ручной кодинг... скоро только в музее)))

Регулярно на Хабре выходят статьи с рекомендацией использовать moment.js. В комментариях обязательно начинают советовать какой-нибудь dayjs или js-joda, но не потому, что они чем-то сильно лучше, а потому, что первый задепрекейчен авторами.. в пользу luxon.

Что за мания такая у JS-еров использовать раздутые тормозные библиотеки? Есть же быстрый и миниатюрный $mol_time с гораздо более удобным и функциональным API, почти полностью поддерживающим ISO8601, в отличие от всех остальных библиотек.

Что мотивирует людей довольствоваться не самым лучшим решением в индустрии? Я, наверно, странный, но я не могу этого понять.

Энтузиасты запустили Doom с помощью типов TypeScript.

Проект запуска Doom исключительно в системе ввода TypeScript занял 12 дней по 18 часов в сутки. Разработчики провели проверку 3,5 триллиона строк текста, создали виртуальную машину WebAssembly на основе TypeScript и 177 ТБ типов TypeScript.

Немного о резолверах в Angular 19 (теперь в них есть редиректы).

В логике использования гвардов применяется подход:

проверить что-то, если все ок то вернуть true или кинуть редирект на другую страницу

Выглядит достаточно удобно. Но если мне не изменяет память в резолверах такого нет, вместо этого приходилось натягивать Router и рулить navigate или navigateByUrl и т.д.

В 19 же версии нам немного упростили жизнь и резолвер научили в RedirectCommand.

Пример с angular.dev

export const heroResolver: ResolveFn<Hero>= async (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot,
) => {
  const router = inject(Router);
  const heroService = inject(HeroService);
  
  try {
    return await heroService.getHero(route.paramMap.get('id')!);
  } catch {
    return new RedirectCommand(router.parseUrl('/404'));
  }
  
};

Ну просто сказка какая-то, а не только сигналы =)

Fusor для React резработчиков за 5 минут

Репозиторий: https://github.com/fusorjs/dom

Для тех, кто рассматривает TypeScript как инструмент (язык) для борьбы с ошибками: склонность к ошибкам и время их исправления в TypeScript оказались не значительно ниже, чем в JavaScript. Среднее отношение коммитов с исправлениями ошибок в проектах на TypeScript было более чем на 60% выше (0.126 против 0.206), и в среднем проектам на TypeScript требовалось более чем на один день больше для исправления ошибок (31,86 против 33,04 дней).

Полезные ресурсы для начинающего TypeScript-разработчика

Начнём с базы: Что такое TypeScript и чем он отличается от JavaScript

Бесплатные курсы

Learn TypeScript — курс для начинающих, который поможет освоить основы. Состоит из коротких уроков, общее время просмотра меньше 5 часов.

TypeScript Tutorial — учебник для освоения языка с практическими заданиями.

Egghead Typescript — курсы и статьи с разделением по уровням: будет полезно и джунам, и сеньорам.

Фулстек-разработчик — курс с бесплатной частью, в которой можно изучить основы HTML, CSS и JavaScript.

YouTube

Элементы TypeScript — двухчасовая лекция для продвинутых от разработчика Владимира Минина.

Frontend Channel — записи с конференций по разным направлениям и инструментам для создания веб-проектов.

Yandex for Frontend — лекции от экспертов Яндекса. Есть видео про инструменты программиста и IT-карьеру.

Плейлист по TypeScript — уроки из курса ItGid на канале «WebDev с нуля».

13 уроков TypeScript — основы и возможности TypeScript, курс видеолекций на канале WebDev.

Книги

«TypeScript быстро» — синтаксис, инструменты и связь с JavaScript. Теория с примерами: в книге разбирают реальные задачи разработчиков.

«Эффективный TypeScript: 62 способа улучшить код» — для разработчиков, которые знают JavaScript. Научит использовать TypeScript для повышения качества и уровня безопасности кода.

«Профессиональный TypeScript» — поможет в разработке масштабируемых JavaScript-приложений. Лучше совмещать чтение с практическими заданиями или курсами.

Привет друзья! Сделал максимально простые аналоговые часы на SVG. Можно ли их еще упростить или уменьшить? Или добавить немного улучшений без переусложнения? Буду рад вашим идеям!

Вот CodeSandbox

Сделано с помощью библиотеки Fusor

Кнопка со счётчиком: React vs Fusor

Fusor это новый способ разработки вэб приложений https://github.com/fusorjs/dom

В кодовую базу Node.js принято изменение, добавляющее возможность выполнения файлов с кодом на TypeScript.

Поддержка TypeScript включается при помощи опции "--experimental-strip-types" и сводится к очистке специфичных для данного языка определений типов, то есть преобразованию перед выполнением исходного кода в JavaScript.

Не связанные с описанием типов возможности TypeScript пространства имён, декораторы, свойства параметров и перечисляемые типы (enum) пока не поддерживаются. Протестировать новую опцию можно в ночных сборках Node.js 23.

Для трансляции задействован компилятор SWC (Speedy Web Compiler), написанный на языке Rust. Чтобы не добавлять дополнительные зависимости к Node.js, задействовано представление компилятора swc/wasm-typescript в промежуточном коде WebAssembly и уже применяемое для тех же целей в платформе Deno.

Это изменение добавлено в ответ на просьбы пользователей реализовать возможность запуска кода на TypeScript без установки внешних загрузчиков и дополнительных зависимостей. В проектах Deno и Bun поддержка TypeScript реализована изначально.

Ключевым отличием TypeScript от JavaScript является явное определение типов. Статическая типизация позволяет избежать многих ошибок в процессе разработки, даёт возможность задействовать дополнительные техники оптимизации и упрощает отладку.

В добавленной в Node.js реализации данные возможности TypeScript теряются, в процессе трансляции исходных текстов в JavaScript проверка типов не осуществляется.

Источник: OpenNET.

Состоялся релиз инструментария ProteWine 1.0, предназначенного для упрощения запуска Windows-приложений в окружениях на базе Linux, SteamDeck и других портативных консолей под управлением Linux.

Проект ProteWine представляет наглядный конфигуратор, позволяющий создавать порты Windows‑игр для запуска в Linux с использованием пакетов Wine и Proton.

Инструментарий привязан к клиенту Steam, но использует из него только Steam Runtime 3 Sniper в качестве окружения для выполнения сторонних сборок Wine и Proton.

Исходный код проекта написан на TypeScript и распространяется под лицензией MIT.

Основные возможности, реализованные на текущий момент в ProteWine 1.0:

• интегрирован Winetricks;

• на выбор доступно 6 сторонних репозиториев с готовыми сборками Wine и Proton;

• автоматическая установка библиотек DXVK, VKD3D, Proton и mfc42 (исправление ошибки isskin);

• возможность установки игр напрямую из образов в форматах ISO и MDF;

• автоматическое определение ярлыка установленной игры;

• автоматическое обнаружение доступных постеров и иконок, найденных по имени игры;

• доступно создание обособленных ярлыков, как в системе, так и внутри Steam;

• подсчёт проведённого в игре времени;

• интеграция с экранной клавиатурой SteamDeck.

Источник: OpenNET.

Шаблон декомпозиции Model-View-Presenter

Модели и отображения пассивны, и не знают друг о друге - они управляются презентером, который выступает и в качестве посредника между ними.

// Presenter
class User_preview {
	user: User
	card = new Card({
		image: ()=> this.user.avatar,
		message: ()=> this.user.nickname,
		color: ()=> this.user.skin.color,
		click: ()=> this.skin_change(),
	})
	skin_change() {
		this.user.skin = Skin.random()
	}
}

// View
<div class="Card" onclick={click} style={{ background: color }}>
	<img src={ image } />
	<p>{ message }</p>
</div>

// Model
class User extends Model {
	avatar: string
	nickname: string
	skin: Skin
}

✅ Легко добавлять новые отображения, не меняя модели. И наоборот.
✅ Изменение интерфесов модели или отображения требует изменения только лишь презентеров.
❌ Трёх слоёв слишком мало на больших масштабах.
❌ Для использования состояния одного презентера из другого необходимо искусственное вынесение его в модели.