RxJS без боли: интерактивные ресурсы для изучения потоков и операторов
RxJS — библиотека, которая разделяет жизнь фронтендера на "до" и "после". Когда в голове укладывается реактивная парадигма программирования, обратного пути уже нет. Логика приложения превращается в реактивные потоки, ты жонглируешь операторами и создаешь код, который кажется почти магией.
RxJS открывает перед разработчиком невероятные возможности, но требует времени на освоение. Новая ментальная модель и разнообразие операторов могут сначала показаться сложными. Но стоит приложить усилия, как ты начнёшь писать действительно крутой декларативный код — и результат того стоит!
Занимаясь менторингом и обучая реактивному программированию, я заметил, что самый эффективный подход — это не просто объяснять, но и показывать наглядно. Поэтому я собрал для вас подборку сайтов, которые визуализируют потоки.
🔗 RxMarbles / RxMarbles(updated)
🔍 Что это?
Визуальная энциклопедия операторов RxJS.
📚 Что даёт?
Наглядно показывает, как операторы преобразуют потоки. Например, как работает mergeMap или concat.
🎯 Почему полезно?
Если ты не понимаешь, как работает конкретный оператор, просто посмотри, как он обрабатывает "шарики" данных.
🔗 RxViz
🔍 Что это?
Интерактивный playground для написания и визуализации RxJS-кода.
📚 Что даёт?
Позволяет создавать цепочки операторов и тут же видеть, как они преобразуют данные.
🎯 Почему полезно?
Прямо в браузере ты можешь протестировать идею и быстро отладить цепочку операторов.
🔗 ThinkRx
🔍 Что это?
Ещё один интерактивный playground для изучения и визуализации RxJS-кода.
📚 Что даёт?
Позволяет экспериментировать с реактивным кодом, создавать марбл-диаграммы и сохранять их как изображения.
🎯 Почему полезно?
Включает множество примеров реактивного кода и визуальных сравнений похожих операторов, таких как switchMap, mergeMap и concatMap.
🔗 Higher-Order Observables Operators Playground
🔍 Что это?
Обзор higher-order observables операторов с визуальными примерами.
📚 Что даёт?
Позволяет выбрать оператор, посмотреть код и графики потоков, а также ставить потоки на паузу для изучения текущего состояния.
🎯 Почему полезно?
Это идеальный ресурс для тех, кто хочет углубиться в работу операторов вроде switchMap или exhaustMap.
🔗 SoftwareMill RxJS Playground
🔍 Что это?
Интерактивный набор 3D демо-проектов для изучения концепций RxJS. Потоки изображены в виде конвейеров, а данные — в виде двигающихся фигур.
📚 Что даёт?
Содержит готовые примеры с объяснениями. Можно создавать свои конвейеры и добавлять к ним различные операторы.
🎯 Почему полезно?
Максимально визуализирует движение данных в реактивных потоках, делая абстрактные концепции более понятными.
Эти ресурсы помогут не просто выучить RxJS, но и понять его философию. Переходи по ссылкам и практикуйся!
@summon_the_coder
#RxJS #Angular #ReactiveProgramming
RxJS — библиотека, которая разделяет жизнь фронтендера на "до" и "после". Когда в голове укладывается реактивная парадигма программирования, обратного пути уже нет. Логика приложения превращается в реактивные потоки, ты жонглируешь операторами и создаешь код, который кажется почти магией.
RxJS открывает перед разработчиком невероятные возможности, но требует времени на освоение. Новая ментальная модель и разнообразие операторов могут сначала показаться сложными. Но стоит приложить усилия, как ты начнёшь писать действительно крутой декларативный код — и результат того стоит!
Занимаясь менторингом и обучая реактивному программированию, я заметил, что самый эффективный подход — это не просто объяснять, но и показывать наглядно. Поэтому я собрал для вас подборку сайтов, которые визуализируют потоки.
🔗 RxMarbles / RxMarbles(updated)
🔍 Что это?
Визуальная энциклопедия операторов RxJS.
📚 Что даёт?
Наглядно показывает, как операторы преобразуют потоки. Например, как работает mergeMap или concat.
🎯 Почему полезно?
Если ты не понимаешь, как работает конкретный оператор, просто посмотри, как он обрабатывает "шарики" данных.
🔗 RxViz
🔍 Что это?
Интерактивный playground для написания и визуализации RxJS-кода.
📚 Что даёт?
Позволяет создавать цепочки операторов и тут же видеть, как они преобразуют данные.
🎯 Почему полезно?
Прямо в браузере ты можешь протестировать идею и быстро отладить цепочку операторов.
🔗 ThinkRx
🔍 Что это?
Ещё один интерактивный playground для изучения и визуализации RxJS-кода.
📚 Что даёт?
Позволяет экспериментировать с реактивным кодом, создавать марбл-диаграммы и сохранять их как изображения.
🎯 Почему полезно?
Включает множество примеров реактивного кода и визуальных сравнений похожих операторов, таких как switchMap, mergeMap и concatMap.
🔗 Higher-Order Observables Operators Playground
🔍 Что это?
Обзор higher-order observables операторов с визуальными примерами.
📚 Что даёт?
Позволяет выбрать оператор, посмотреть код и графики потоков, а также ставить потоки на паузу для изучения текущего состояния.
🎯 Почему полезно?
Это идеальный ресурс для тех, кто хочет углубиться в работу операторов вроде switchMap или exhaustMap.
🔗 SoftwareMill RxJS Playground
🔍 Что это?
Интерактивный набор 3D демо-проектов для изучения концепций RxJS. Потоки изображены в виде конвейеров, а данные — в виде двигающихся фигур.
📚 Что даёт?
Содержит готовые примеры с объяснениями. Можно создавать свои конвейеры и добавлять к ним различные операторы.
🎯 Почему полезно?
Максимально визуализирует движение данных в реактивных потоках, делая абстрактные концепции более понятными.
Эти ресурсы помогут не просто выучить RxJS, но и понять его философию. Переходи по ссылкам и практикуйся!
@summon_the_coder
#RxJS #Angular #ReactiveProgramming
1🔥14👍8🍌5❤4❤🔥2
Музыкальный RxJS или как обрабатывать события правильно
Higher-order observables — тема безумно интересная и глубокая, но в то же время вызывающая наибольшее непонимание у разработчиков, которые только изучают RxJS. Существует множество способов объяснить, как работают операторы
Представьте, что у вас есть приложение с «реактивным» музыкальным плеером, и по клику на кнопки можно переключать музыку. Каждая кнопка — это отдельный higher-order observable оператор. Как же будет происходить переключение музыки при клике на эти кнопки?
🎶
Если поступает новый клик, текущий трек немедленно останавливается, и начинается новый. Этот оператор повторяет поведение настоящего музыкального плеера, где треки сменяются сразу по нажатию кнопки.
Реальные примеры:
- Когда пользователь вводит текст в строку поиска, приложение отправляет запрос на сервер. Если пользователь продолжает вводить текст, предыдущие запросы отменяются, чтобы не загружать неактуальные данные.
- На странице каталога товаров пользователь может изменять фильтры, и данные обновляются на основе новых параметров.
🎶
Каждый клик запускает новый трек независимо от других, не дожидаясь завершения предыдущего. В итоге все треки играют одновременно, создавая хаотичное наложение.
Реальные примеры:
- Получение уведомлений одновременно из нескольких источников (например, чата и системы оповещений).
- Загрузка данных пользователя и связанных с ним заказов одновременно, чтобы быстрее отобразить информацию.
🎶
Этот оператор идеален для терпеливых слушателей. При новом клике он дождется, пока текущая песня доиграет до конца, и только потом включит следующую.
Реальные примеры:
- Отправка формы, а затем запуск загрузки данных, связанных с результатом её обработки.
- Обработка очереди задач (например, отправка файлов) и показ уведомлений о завершении каждой задачи.
🎶
Оператор идеально подходит для строгого контроля воспроизведения. Если трек уже играет, любые новые клики полностью игнорируются до тех пор, пока текущий трек не закончится. Это как если бы плеер говорил: «Подожди, я занят. Дождись окончания трека, и только потом я приму новую команду».
Реальные примеры:
- Когда пользователь отправляет форму, и нужно игнорировать повторные нажатия кнопки, пока форма не будет отправлена.
- Пользователь вводит одноразовый код, и пока сервер его проверяет, новые попытки игнорируются.
Итак, какой оператор выбрать?
@summon_the_coder
#RxJS #Angular #ReactiveProgramming
Higher-order observables — тема безумно интересная и глубокая, но в то же время вызывающая наибольшее непонимание у разработчиков, которые только изучают RxJS. Существует множество способов объяснить, как работают операторы
switchMap, concatMap, mergeMap и exhaustMap: можно сравнивать их с потоками воды, конвейерами, очередями заказов и многими другими вещами. Но, на мой взгляд, лучшая аналогия была приведена в телеграм группе по RxJS. Я немного доработал её и вот как она звучит.Представьте, что у вас есть приложение с «реактивным» музыкальным плеером, и по клику на кнопки можно переключать музыку. Каждая кнопка — это отдельный higher-order observable оператор. Как же будет происходить переключение музыки при клике на эти кнопки?
🎶
switchMapЕсли поступает новый клик, текущий трек немедленно останавливается, и начинается новый. Этот оператор повторяет поведение настоящего музыкального плеера, где треки сменяются сразу по нажатию кнопки.
Реальные примеры:
- Когда пользователь вводит текст в строку поиска, приложение отправляет запрос на сервер. Если пользователь продолжает вводить текст, предыдущие запросы отменяются, чтобы не загружать неактуальные данные.
- На странице каталога товаров пользователь может изменять фильтры, и данные обновляются на основе новых параметров.
🎶
mergeMapКаждый клик запускает новый трек независимо от других, не дожидаясь завершения предыдущего. В итоге все треки играют одновременно, создавая хаотичное наложение.
Реальные примеры:
- Получение уведомлений одновременно из нескольких источников (например, чата и системы оповещений).
- Загрузка данных пользователя и связанных с ним заказов одновременно, чтобы быстрее отобразить информацию.
🎶
concatMapЭтот оператор идеален для терпеливых слушателей. При новом клике он дождется, пока текущая песня доиграет до конца, и только потом включит следующую.
Реальные примеры:
- Отправка формы, а затем запуск загрузки данных, связанных с результатом её обработки.
- Обработка очереди задач (например, отправка файлов) и показ уведомлений о завершении каждой задачи.
🎶
exhaustMapОператор идеально подходит для строгого контроля воспроизведения. Если трек уже играет, любые новые клики полностью игнорируются до тех пор, пока текущий трек не закончится. Это как если бы плеер говорил: «Подожди, я занят. Дождись окончания трека, и только потом я приму новую команду».
Реальные примеры:
- Когда пользователь отправляет форму, и нужно игнорировать повторные нажатия кнопки, пока форма не будет отправлена.
- Пользователь вводит одноразовый код, и пока сервер его проверяет, новые попытки игнорируются.
Итак, какой оператор выбрать?
mergeMap - если операции могут выполняться одновременно.switchMap - для отмены предыдущих действий при новом событии.concatMap - когда нужно выполнять операции строго по порядку.exhaustMap - для защиты от лишних запусков во время выполнения.@summon_the_coder
#RxJS #Angular #ReactiveProgramming
1👍24🔥9😱3👨💻1🤝1
RxJS: Отписки? А точно надо?
Кажется, тема отписок от потоков уже давно закрыта, но снова и снова встречаю обсуждения нужности отписки от потоков, поэтому решил собрать информацию в одном месте и разложить все по своим местам. Давайте сначала разберемся с терминами.
Unsubscribe - отписка от потока. Сообщаем источнику значений, что текущий подписчик больше не хочет получать новые значения. Если у потока остались другие подписчики, то они продолжат получать новые значения.
Complete - завершение потока. Завершенный поток перестает уведомлять всех подписчиков о новых значениях.
Finalization - освобождение ресурсов, занятых потоком. Данный процесс происходит всегда при ошибке, завершении потока, отписке.
Для чего мы отписываемся или завершаем потоки:
- Избежание сайд-эффектов. При активной подписке могут выполнятся колбэк или цепочка операторов, которые необходимо запускать только если компонент инициализирован.
- Освобождение ресурсов памяти и борьба с неконтролируемыми утечками памяти.
А теперь самое интересное, ситуации, когда отписка не требуется (если поток простой и содержит только одну из описанных ниже сущностей):
- Потоки, которые в конечном итоге завершаются (of, from, timer(1000), first итд).
- Использование сервиса ActivatedRoute. Данный сервис и его потоки изолированы от Router сервиса. Router уничтожает маршрутизируемый компонент, когда он больше не нужен вместе со всеми зависимостями.
- Использование сервиса HttpClient (создает потоки, которые в конечном итоге завершаются).
В этом месте я хочу задать вопросы. Готовы ли вы анализировать каждый поток с ручной подпиской и тратить на это свое время (поток может трансформироваться, добавится таймер или какой-то хитрый внутренний поток)? А как же консистентность кодовой базы: где-то есть подписка, где-то нет? Вы точно уверены, что все члены команды знают тонкости отписок и не допустят утечек?
Не слишком ли много вопросов для проблемы, которая решается одной строчкой кода? Не проще ли всегда отписываться, чем пытаться учесть все нюансы?
Подготовил список из проверенных практик для управления подписками:
- Используйте линтер: добавьте eslint-plugin-rxjs и eslint-plugin-rxjs-angular для автоматической проверки отписок или полного запрета ручных подписок.
- Избегайте ручных подписок: комбинируйте потоки через merge, zip или combineLatest, чтобы привязать их к шаблону с автоотпиской.
- Async pipe: используйте в шаблонах, чтобы автоматически управлять подписками.
- Операторы takeUntil или takeUntilDestroyed: используйте эти операторы последними в цепочке операторов для автоматического завершения подписки при уничтожении компонента.
- toSignal (доступно с Angular 16 в статусе dev preview): конвертируйте потоки в сигналы с автоматическим управлением подписками.
- Higher-order observables: избавляйтесь от "подписок внутри подписок", чтобы избежать утечек памяти.
- Библиотеки: если вы используете Angular ниже 16 версии, попробуйте @ngneat/until-destroy или напишите кастомное решение.
Отписка — это не лишняя работа, а гарантия стабильности и удобства сопровождения вашего кода. И ответ на вопрос из заголовка - отписывайтесь всегда.
Ну и напоследок я собрал всевозможные актуальные способы отписок в одном Stackblitz. Получился своеобразный справочник по отпискам — каждый способ сопровожден комментариями с пояснениями. Делитесь этим проектом с начинающими разработчиками и теми, кто только открывает для себя красоту реактивного программирования!
@summon_the_coder
#RxJS #Angular #ReactiveProgramming
Кажется, тема отписок от потоков уже давно закрыта, но снова и снова встречаю обсуждения нужности отписки от потоков, поэтому решил собрать информацию в одном месте и разложить все по своим местам. Давайте сначала разберемся с терминами.
Unsubscribe - отписка от потока. Сообщаем источнику значений, что текущий подписчик больше не хочет получать новые значения. Если у потока остались другие подписчики, то они продолжат получать новые значения.
Complete - завершение потока. Завершенный поток перестает уведомлять всех подписчиков о новых значениях.
Finalization - освобождение ресурсов, занятых потоком. Данный процесс происходит всегда при ошибке, завершении потока, отписке.
Для чего мы отписываемся или завершаем потоки:
- Избежание сайд-эффектов. При активной подписке могут выполнятся колбэк или цепочка операторов, которые необходимо запускать только если компонент инициализирован.
- Освобождение ресурсов памяти и борьба с неконтролируемыми утечками памяти.
А теперь самое интересное, ситуации, когда отписка не требуется (если поток простой и содержит только одну из описанных ниже сущностей):
- Потоки, которые в конечном итоге завершаются (of, from, timer(1000), first итд).
- Использование сервиса ActivatedRoute. Данный сервис и его потоки изолированы от Router сервиса. Router уничтожает маршрутизируемый компонент, когда он больше не нужен вместе со всеми зависимостями.
- Использование сервиса HttpClient (создает потоки, которые в конечном итоге завершаются).
В этом месте я хочу задать вопросы. Готовы ли вы анализировать каждый поток с ручной подпиской и тратить на это свое время (поток может трансформироваться, добавится таймер или какой-то хитрый внутренний поток)? А как же консистентность кодовой базы: где-то есть подписка, где-то нет? Вы точно уверены, что все члены команды знают тонкости отписок и не допустят утечек?
Не слишком ли много вопросов для проблемы, которая решается одной строчкой кода? Не проще ли всегда отписываться, чем пытаться учесть все нюансы?
Подготовил список из проверенных практик для управления подписками:
- Используйте линтер: добавьте eslint-plugin-rxjs и eslint-plugin-rxjs-angular для автоматической проверки отписок или полного запрета ручных подписок.
- Избегайте ручных подписок: комбинируйте потоки через merge, zip или combineLatest, чтобы привязать их к шаблону с автоотпиской.
- Async pipe: используйте в шаблонах, чтобы автоматически управлять подписками.
- Операторы takeUntil или takeUntilDestroyed: используйте эти операторы последними в цепочке операторов для автоматического завершения подписки при уничтожении компонента.
- toSignal (доступно с Angular 16 в статусе dev preview): конвертируйте потоки в сигналы с автоматическим управлением подписками.
- Higher-order observables: избавляйтесь от "подписок внутри подписок", чтобы избежать утечек памяти.
- Библиотеки: если вы используете Angular ниже 16 версии, попробуйте @ngneat/until-destroy или напишите кастомное решение.
Отписка — это не лишняя работа, а гарантия стабильности и удобства сопровождения вашего кода. И ответ на вопрос из заголовка - отписывайтесь всегда.
Ну и напоследок я собрал всевозможные актуальные способы отписок в одном Stackblitz. Получился своеобразный справочник по отпискам — каждый способ сопровожден комментариями с пояснениями. Делитесь этим проектом с начинающими разработчиками и теми, кто только открывает для себя красоту реактивного программирования!
@summon_the_coder
#RxJS #Angular #ReactiveProgramming
1🔥19❤3👍2
Angular: Полезная инфографика
Разбирал тут на праздниках свои избранные сообщения в Telegram и наткнулся на блог chriskohler.dev. Контента в нем оказалось не так много, но потом я вспомнил почему приберёг этот сайт. Автор проделал титаническую работу по созданию инфографики для ключевых концепций Angular. Не могу не поделиться этим золотом.
Dependency Injection
Первая инфографика посвящена Dependency Injection. Причём она адаптирована под две версии Angular:
- До 14-й версии: DI через модули.
- Начиная с 14-й версии: DI со Standalone API.
Чтобы освежить знания или разобраться в механике DI, рекомендую заглянуть в официальную документацию. В новой версии раздел наполнен всей нужной информацией и отлично покрывает все нюансы.
Но если вы ищете что-то более лёгкое и быстрое:
- Статья: Dependency Injection in Angular – Everything You Need to Know. Коротко, по делу и наглядно.
- Плейлист: Dependency Injection in Angular от Dmytro Mezhenskyi.
Change Detection
Вторая инфографика погружает нас в тонкости механизма Change Detection, который способен озадачить даже опытных разработчиков. В ней собрана информация, актуальная для Ivy Compiler, но пока нет разделов про локальные изменения на сигналах (v17+) и zoneless (v18+). Ждём, что автор добавит это в будущих обновлениях.
Инфографика по Change Detection
Что можно изучить уже сейчас:
- Статья: The Latest in Angular Change Detection – All You Need to Know. Отличный старт.
- Видео: Angular Change Detection Explained! от Nivek. Классный формат для знакомства с zoneless и локальным change detection.
- Плейлист: Change Detection in Angular от Dmytro Mezhenskyi для глубокого погружения.
- И вишенка на торте: кто хочет заглянуть немного в будущее, где change detection превращается в synchronization, есть доклад от Alex Rickabaugh, в котором рассказывается в каком направлении двигается команда фреймворка.
Совет от Chris Kohler
Напоследок автор рекомендует: распечатайте инфографику и повесьте её в неожиданном месте — например, рядом с кофемашиной или в зоне отдыха. Через пару недель вы удивитесь, насколько глубоко усвоите материал, даже не замечая этого!
@summon_the_coder
#angular #dependencyinjection #changedetection
Разбирал тут на праздниках свои избранные сообщения в Telegram и наткнулся на блог chriskohler.dev. Контента в нем оказалось не так много, но потом я вспомнил почему приберёг этот сайт. Автор проделал титаническую работу по созданию инфографики для ключевых концепций Angular. Не могу не поделиться этим золотом.
Dependency Injection
Первая инфографика посвящена Dependency Injection. Причём она адаптирована под две версии Angular:
- До 14-й версии: DI через модули.
- Начиная с 14-й версии: DI со Standalone API.
Чтобы освежить знания или разобраться в механике DI, рекомендую заглянуть в официальную документацию. В новой версии раздел наполнен всей нужной информацией и отлично покрывает все нюансы.
Но если вы ищете что-то более лёгкое и быстрое:
- Статья: Dependency Injection in Angular – Everything You Need to Know. Коротко, по делу и наглядно.
- Плейлист: Dependency Injection in Angular от Dmytro Mezhenskyi.
Change Detection
Вторая инфографика погружает нас в тонкости механизма Change Detection, который способен озадачить даже опытных разработчиков. В ней собрана информация, актуальная для Ivy Compiler, но пока нет разделов про локальные изменения на сигналах (v17+) и zoneless (v18+). Ждём, что автор добавит это в будущих обновлениях.
Инфографика по Change Detection
Что можно изучить уже сейчас:
- Статья: The Latest in Angular Change Detection – All You Need to Know. Отличный старт.
- Видео: Angular Change Detection Explained! от Nivek. Классный формат для знакомства с zoneless и локальным change detection.
- Плейлист: Change Detection in Angular от Dmytro Mezhenskyi для глубокого погружения.
- И вишенка на торте: кто хочет заглянуть немного в будущее, где change detection превращается в synchronization, есть доклад от Alex Rickabaugh, в котором рассказывается в каком направлении двигается команда фреймворка.
Совет от Chris Kohler
Напоследок автор рекомендует: распечатайте инфографику и повесьте её в неожиданном месте — например, рядом с кофемашиной или в зоне отдыха. Через пару недель вы удивитесь, насколько глубоко усвоите материал, даже не замечая этого!
@summon_the_coder
#angular #dependencyinjection #changedetection
3❤11🔥10👍3💯1
Angular Can I Use – как не запутаться в нововведениях?
За последние два года Angular сделал мощный рывок вперед – новые фичи появляются регулярно, и хочется использовать их уже сейчас. Поэтому я постепенно обновляю рабочие проекты до актуальных версий.
Но тут возникает проблема: не всегда можно обновиться до последней мажорной версии. Где-то конфликтуют peer-зависимости, где-то еще не обновились библиотеки, и т. д. В итоге в одном проекте уже версия 19, а где-то застряли на версии 17 или 16. И вот тогда в голове начинается путаница: какие фичи уже можно безопасно использовать, а какие все еще в Dev Preview?
Как с этим разобраться? Меня сильно выручает Angular Can I Use – удобный инструмент от angular.courses, который помогает легко отслеживать статус фич и быть в курсе последних изменений.
🔎 Что там есть?
✅ Feature List – список всех нововведений, начиная с Angular 14, с удобным поиском и сортировкой.
✅ Version Insights – наглядно показывает ключевые изменения в выбранной версии Angular. Здесь можно быстро понять, какие фичи уже стабильны и готовы к использованию, а какие еще находятся в стадии разработки.
Этот сервис экономит кучу времени и позволяет точно понимать, можно ли использовать ту или иную функциональность в продакшене. Если работаете с разными версиями Angular – обязательно попробуйте! 🚀
@summon_the_coder
#angular
За последние два года Angular сделал мощный рывок вперед – новые фичи появляются регулярно, и хочется использовать их уже сейчас. Поэтому я постепенно обновляю рабочие проекты до актуальных версий.
Но тут возникает проблема: не всегда можно обновиться до последней мажорной версии. Где-то конфликтуют peer-зависимости, где-то еще не обновились библиотеки, и т. д. В итоге в одном проекте уже версия 19, а где-то застряли на версии 17 или 16. И вот тогда в голове начинается путаница: какие фичи уже можно безопасно использовать, а какие все еще в Dev Preview?
Как с этим разобраться? Меня сильно выручает Angular Can I Use – удобный инструмент от angular.courses, который помогает легко отслеживать статус фич и быть в курсе последних изменений.
🔎 Что там есть?
✅ Feature List – список всех нововведений, начиная с Angular 14, с удобным поиском и сортировкой.
✅ Version Insights – наглядно показывает ключевые изменения в выбранной версии Angular. Здесь можно быстро понять, какие фичи уже стабильны и готовы к использованию, а какие еще находятся в стадии разработки.
Этот сервис экономит кучу времени и позволяет точно понимать, можно ли использовать ту или иную функциональность в продакшене. Если работаете с разными версиями Angular – обязательно попробуйте! 🚀
@summon_the_coder
#angular
👍8🔥3❤1
Где учить этот Angular? #1 👩💻
Этот вопрос я слышу постоянно — особенно после того, как на одном дыхании рассказываю, какой новый Angular классный. Поэтому решил пробежаться по своим бесконечным закладкам и заметкам, вспомнить, с чего сам начинал, и сделать серию постов о том, как же все-таки учить этот фреймворк. Будут курсы, статьи, YouTube-каналы — все, что может быть полезно как новичкам, так и опытным разработчикам. Разумеется, это будут только проверенные источники, которыми я сам пользовался (и продолжаю пользоваться). Начнем с курсов.
*️⃣ База базовая, учитель всех учителей. Иногда кажется, что Udemy был создан исключительно для этого великолепного преподавателя — Максими́лиана Шварцмюллера. Курс, который я купил в самом начале пути, до сих пор актуален: автор каждый год бесплатно обновляет программу. Очень рекомендую — фреймворк разобран полностью, затронуты все важные темы для быстрого и уверенного старта.
🔗 The Complete Guide to Angular
*️⃣ Мастодонты в мире курсов по Angular — Angular University. Здесь есть курсы по современному Angular с сигналами, TypeScript, RxJS и многому другому. Можно купить пожизненный доступ ко всем материалам за очень приятную цену. Но начать стоит с бесплатного курса для новичков.
🔗 Angular For Beginners
🔗 Все курсы Angular University
*️⃣ Для фанатов текстового формата — курс от Josh Morony, Angular GDE и активного блогера. Материал полностью состоит из текстовых модулей с пошаговыми инструкциями. Есть открытые (бесплатные) главы, так что можно попробовать и понять, подходит ли такая форма подачи.
🔗 Angular Start
🧪 Рубрика "Эксперименты"
Для разработчиков, которые уже владеют каким-то фреймворком и хотят расширить границы или сменить стек, есть интересный бесплатный проект Playful Programming от Corbin Crutchley. Он позволяет изучать сразу три фреймворка параллельно: Angular, React и Vue. Каждый сниппет кода снабжен тремя вкладками, так что можно сразу переключаться и смотреть: "А как это сделано там?" В начале года вышла первая часть курса (основы), а вскоре ожидаются модули про экосистемы и внутреннюю работу инструментов.
🔗 Playful Programming - The Framework Field Guide
В дополнение к формату выше подходит сайт Component Party, который позволяет сравнивать реализацию концепций в разных фреймворках. Помимо Angular, React и Vue, тут есть Svelte, Solid, Lit, Alpine и другие.
🔗 Component Party
🇬🇧 English? Не проблема
Все предложенные курсы платные, но на специальных сайтах можно найти их для ознакомительного прохождения.
Что касается языка: английский в курсах довольно простой, у авторов хорошая дикция и темп речи. Но если английский вызывает трудности, есть лайфхак:
🟢 берем курс для ознакомления и загружаем его в облако (список поддерживаемых сервисов)
🟢 скачиваем Tampermonkey для своего браузера
🟢 устанавливаем скрипт, который добавляет нейроперевод Яндекс.Браузера в нужный браузер (отдельное спасибо автору расширения)
🟢 запускаем видео для ознакомления в облаке и включаем нейроперевод
🟢 вы великолепны!
Данный способ я попробовал на облаках Mail и Яндекс, все работает отлично.
Если проходили и знаете хорошие курсы, пишите об этом в комментариях!
@summon_the_coder
#angular #course
Этот вопрос я слышу постоянно — особенно после того, как на одном дыхании рассказываю, какой новый Angular классный. Поэтому решил пробежаться по своим бесконечным закладкам и заметкам, вспомнить, с чего сам начинал, и сделать серию постов о том, как же все-таки учить этот фреймворк. Будут курсы, статьи, YouTube-каналы — все, что может быть полезно как новичкам, так и опытным разработчикам. Разумеется, это будут только проверенные источники, которыми я сам пользовался (и продолжаю пользоваться). Начнем с курсов.
🔗 The Complete Guide to Angular
🔗 Angular For Beginners
🔗 Все курсы Angular University
🔗 Angular Start
🧪 Рубрика "Эксперименты"
Для разработчиков, которые уже владеют каким-то фреймворком и хотят расширить границы или сменить стек, есть интересный бесплатный проект Playful Programming от Corbin Crutchley. Он позволяет изучать сразу три фреймворка параллельно: Angular, React и Vue. Каждый сниппет кода снабжен тремя вкладками, так что можно сразу переключаться и смотреть: "А как это сделано там?" В начале года вышла первая часть курса (основы), а вскоре ожидаются модули про экосистемы и внутреннюю работу инструментов.
🔗 Playful Programming - The Framework Field Guide
В дополнение к формату выше подходит сайт Component Party, который позволяет сравнивать реализацию концепций в разных фреймворках. Помимо Angular, React и Vue, тут есть Svelte, Solid, Lit, Alpine и другие.
🔗 Component Party
🇬🇧 English? Не проблема
Все предложенные курсы платные, но на специальных сайтах можно найти их для ознакомительного прохождения.
Что касается языка: английский в курсах довольно простой, у авторов хорошая дикция и темп речи. Но если английский вызывает трудности, есть лайфхак:
Данный способ я попробовал на облаках Mail и Яндекс, все работает отлично.
Если проходили и знаете хорошие курсы, пишите об этом в комментариях!
@summon_the_coder
#angular #course
Please open Telegram to view this post
VIEW IN TELEGRAM
1❤17👍12❤🔥3
Где учить этот Angular? #2 👩💻
Часть 1
Продолжаю серию постов по обучению фреймворку — сегодня поговорим о книгах. Обычно книги по конкретному фреймворку — вещь спорная. Они быстро устаревают, часто повторяют официальную документацию, только в более растянутой форме. Но эта подборка — особенная. Все книги в списке регулярно обновляются и остаются актуальными даже с выходом новых версий фреймворка. А еще мы знаем, что по Angular и так немного хороших ресурсов, так что собираем в охапку все, что может быть полезным.
📘 Become a Ninja with Angular
Название уже продает книгу — ну кто не хочет стать ниндзя, особенно в Angular? Книга сначала проводит через основы JavaScript и TypeScript, затем постепенно переходит к концепциям самого фреймворка и разбирает все ключевые модули, подходы и API. Абсолютный мастхэв для обучения. На текущий момент книга актуальна для версии 19.2.4 (включая resource, httpResource и прочие новинки).
📘 The Ultimate Guide To Angular Evolution
Работа команд House of Angular и Angular.love. По сути — чейнджлог и роадмап Angular в формате книги. От версии 14 до последней 19: что добавили, зачем добавили и какую проблему решали. Книга содержит много ретроспективы, сравнений и объяснений.
Финальная глава — это вообще взгляд в будущее: сигнальные формы, zoneless, selectorless-компоненты, streamed SSR.
А если вы давно гребете в лодке с названием Angular, будет приятно осознать, какой огромный путь проделал любимый инструмент.
📘 Серия книг от ANGULARarchitects
Manfred Steyer — легенда в Angular-сообществе. В его книгах доступно изложен практический и архитектурный опыт.
🔗 Modern Angular
Книга полностью про современный Angular: как работать со Standalone API, мигрировать существующие приложения, использовать signals, control flow, defer и другие фичи.
🔗 Enterprise Angular: Micro Frontends and Moduliths with Angular
Более хардкорная книга — архитектура в больших приложениях. Среди тем: Domain-Driven Design, Nx, Sheriff для разграничения модулей, Module Federation, монорепозитории и микрофронты. Данную книгу можно рекомендовать на вырост, потому что с начальными знаниями и без опыта написания реальных приложений совершенно не понятно, а какую такую проблему пытается решить автор столь монструозными, на первый взгляд, решениями.
📘 Modern Angular от GDE Армена Варданяна
Да да, снова modern, и снова Angular :D. Книга будет полезна тем, кто хочет разобраться, как правильно мигрировать на новые фичи Angular. Формат следующий: сначала показывается старый подход, потом — новый, плюс рекомендации по миграции. Отличный вариант, если у вас "завис" проект на старом Angular, и вы не знаете, с чего начать обновление. Из особенностей, нужен как минимум средний уровень знаний, новичкам будет тяжеловато.
📘 Reactive Patterns with RxJS and Angular Signals
Фокус книги — реактивная парадигма: работа со стримами в RxJS, обработка ошибок, трансформации и комбинирование потоков. Показаны подходы с использованием сигналов, как интегрировать сигналы и стримы с помощью интеропа. Отдельно отмечу, что есть главы по не самым простым темам - мультикастинг и перформанс. Подходит как для освоения основ реактивного программирования, так и для расширения уже имеющихся знаний.
Если кто-то уже читал или читает в данный момент какую-то из книг, то жду отзывы в комментариях🤓
@summon_the_coder
#angular #books #learning
Часть 1
Продолжаю серию постов по обучению фреймворку — сегодня поговорим о книгах. Обычно книги по конкретному фреймворку — вещь спорная. Они быстро устаревают, часто повторяют официальную документацию, только в более растянутой форме. Но эта подборка — особенная. Все книги в списке регулярно обновляются и остаются актуальными даже с выходом новых версий фреймворка. А еще мы знаем, что по Angular и так немного хороших ресурсов, так что собираем в охапку все, что может быть полезным.
📘 Become a Ninja with Angular
Название уже продает книгу — ну кто не хочет стать ниндзя, особенно в Angular? Книга сначала проводит через основы JavaScript и TypeScript, затем постепенно переходит к концепциям самого фреймворка и разбирает все ключевые модули, подходы и API. Абсолютный мастхэв для обучения. На текущий момент книга актуальна для версии 19.2.4 (включая resource, httpResource и прочие новинки).
📘 The Ultimate Guide To Angular Evolution
Работа команд House of Angular и Angular.love. По сути — чейнджлог и роадмап Angular в формате книги. От версии 14 до последней 19: что добавили, зачем добавили и какую проблему решали. Книга содержит много ретроспективы, сравнений и объяснений.
Финальная глава — это вообще взгляд в будущее: сигнальные формы, zoneless, selectorless-компоненты, streamed SSR.
А если вы давно гребете в лодке с названием Angular, будет приятно осознать, какой огромный путь проделал любимый инструмент.
📘 Серия книг от ANGULARarchitects
Manfred Steyer — легенда в Angular-сообществе. В его книгах доступно изложен практический и архитектурный опыт.
🔗 Modern Angular
Книга полностью про современный Angular: как работать со Standalone API, мигрировать существующие приложения, использовать signals, control flow, defer и другие фичи.
🔗 Enterprise Angular: Micro Frontends and Moduliths with Angular
Более хардкорная книга — архитектура в больших приложениях. Среди тем: Domain-Driven Design, Nx, Sheriff для разграничения модулей, Module Federation, монорепозитории и микрофронты. Данную книгу можно рекомендовать на вырост, потому что с начальными знаниями и без опыта написания реальных приложений совершенно не понятно, а какую такую проблему пытается решить автор столь монструозными, на первый взгляд, решениями.
📘 Modern Angular от GDE Армена Варданяна
Да да, снова modern, и снова Angular :D. Книга будет полезна тем, кто хочет разобраться, как правильно мигрировать на новые фичи Angular. Формат следующий: сначала показывается старый подход, потом — новый, плюс рекомендации по миграции. Отличный вариант, если у вас "завис" проект на старом Angular, и вы не знаете, с чего начать обновление. Из особенностей, нужен как минимум средний уровень знаний, новичкам будет тяжеловато.
📘 Reactive Patterns with RxJS and Angular Signals
Фокус книги — реактивная парадигма: работа со стримами в RxJS, обработка ошибок, трансформации и комбинирование потоков. Показаны подходы с использованием сигналов, как интегрировать сигналы и стримы с помощью интеропа. Отдельно отмечу, что есть главы по не самым простым темам - мультикастинг и перформанс. Подходит как для освоения основ реактивного программирования, так и для расширения уже имеющихся знаний.
Если кто-то уже читал или читает в данный момент какую-то из книг, то жду отзывы в комментариях🤓
@summon_the_coder
#angular #books #learning
Please open Telegram to view this post
VIEW IN TELEGRAM
1❤22🔥10👍2🏆1
Angular + AI = ❤️
У команды Angular Courses Lab вышел новый инструмент — Angular Docs AI, он же Angie (про другие инструменты можно почитать здесь). Angie — это AI-ассистент для работы с Angular-документацией.
Ассистент создан для упрощения изучения и использования Angular: он отвечает на вопросы о функционале, API и лучших практиках фреймворка. Спрашивать можно как на русском, так и на английском.
Angie не ограничивается только официальной документацией — он умеет гуглить: ходит по внешним источникам и собирает информацию оттуда тоже. Вопросы типа «сравни observables vs promises vs signals» или «дай best practice, как сделать функционал X» для него не проблема.
После каждого ответа отображается список источников, откуда бралась информация. Удобно, можно сразу перейти в нужный раздел документации и покопаться подробнее.
Почему я не написал про ассистента сразу после релиза? Решил сначала попользоваться и составить собственное мнение. И вот — спустя примерно неделю использования могу уверенно сказать, что это супер удобный инструмент для повседневной разработки. Он серьезно ускоряет работу с документацией и, думаю, будет особенно полезен тем, кто только начинает работать с Angular.
Лично у меня постоянно путаются разделы Templates и Components, но с Angie об этом вообще забываешь. Всем рекомендую попробовать!
Angular Docs AI
@summon_the_coder
#angular #ai #docs
У команды Angular Courses Lab вышел новый инструмент — Angular Docs AI, он же Angie (про другие инструменты можно почитать здесь). Angie — это AI-ассистент для работы с Angular-документацией.
Ассистент создан для упрощения изучения и использования Angular: он отвечает на вопросы о функционале, API и лучших практиках фреймворка. Спрашивать можно как на русском, так и на английском.
Angie не ограничивается только официальной документацией — он умеет гуглить: ходит по внешним источникам и собирает информацию оттуда тоже. Вопросы типа «сравни observables vs promises vs signals» или «дай best practice, как сделать функционал X» для него не проблема.
После каждого ответа отображается список источников, откуда бралась информация. Удобно, можно сразу перейти в нужный раздел документации и покопаться подробнее.
Почему я не написал про ассистента сразу после релиза? Решил сначала попользоваться и составить собственное мнение. И вот — спустя примерно неделю использования могу уверенно сказать, что это супер удобный инструмент для повседневной разработки. Он серьезно ускоряет работу с документацией и, думаю, будет особенно полезен тем, кто только начинает работать с Angular.
Лично у меня постоянно путаются разделы Templates и Components, но с Angie об этом вообще забываешь. Всем рекомендую попробовать!
Angular Docs AI
@summon_the_coder
#angular #ai #docs
2🔥22❤7👍6
Aaww yes, вышла двадцатка! Из интересного: стабилизировали api по сигналам, ssr фичи переехали в dev preview, zoneless теперь можно включать при создании приложения, добавили много удобства при создании динамических компонентов (можно привязывать inputs, outputs, two-way binding, директивы). Также команда представила тесную интеграцию с Chrome Dev Tools, и во вкладке performance для Angular приложений появился отдельный трек для профилирования. Go go!🔥
В ближайшие дни планирую все это посмотреть и обсудить на стриме!
#angular #release
В ближайшие дни планирую все это посмотреть и обсудить на стриме!
#angular #release
1🔥20❤4❤🔥2
Forwarded from Grandgular [Angular]
🎉🎉🎉 Angular v20 is here! 🎉🎉🎉
As of May 29, 2025, the stable release of Angular 20 is officially out!
🆕 Highlights (from the article):
- Promoting reactivity features to stable
- New, experimental APIs
- Promoting Zoneless to developer preview
- Solidifying Angular on the server
- and many more...
Useful Links:
🔗 Angular v20 Release on GitHub
https://github.com/angular/angular/releases/tag/20.0.0
📝 Official Release Blog
https://blog.angular.dev/announcing-angular-v20-b5c9c06cf301
📆 Release & Support Schedule
https://angular.dev/reference/releases
📦 Angular CLI v20 Release Notes
https://www.gitclear.com/open_repos/angular/angular-cli/release/20.0.0-next.0
I’ll follow up with a detailed article soon — with code examples, use cases, and migration tips. Stay tuned!
#angular #angular20 #webdev #frontend #JavaScript #TypeScript
As of May 29, 2025, the stable release of Angular 20 is officially out!
🆕 Highlights (from the article):
- Promoting reactivity features to stable
- New, experimental APIs
- Promoting Zoneless to developer preview
- Solidifying Angular on the server
- and many more...
Useful Links:
🔗 Angular v20 Release on GitHub
https://github.com/angular/angular/releases/tag/20.0.0
📝 Official Release Blog
https://blog.angular.dev/announcing-angular-v20-b5c9c06cf301
📆 Release & Support Schedule
https://angular.dev/reference/releases
📦 Angular CLI v20 Release Notes
https://www.gitclear.com/open_repos/angular/angular-cli/release/20.0.0-next.0
I’ll follow up with a detailed article soon — with code examples, use cases, and migration tips. Stay tuned!
#angular #angular20 #webdev #frontend #JavaScript #TypeScript
1🔥9❤🔥3❤2🎉1
letify - звучит как заклинание, работает как по волшебству ✨
Обновлял зависимости одного из проектов и заметил, что библиотека для интернационализации @ngneat/transloco переехала в новый скоуп @jsverse/transloco. После успешного обновления решил заглянуть на GitHub @jsverse и поискать, что еще у них есть интересного. Так я и наткнулся на героя этого поста — @letify.
Letify CLI помогает оптимизировать шаблоны в Angular приложениях, сканируя файлы и обнаруживая несколько асинхронных подписок на один и тот же поток.
Пример:
В этом сниппете на поток observable$ создаются две подписки, и побочные эффекты (tap) выполняются дважды. Это может привести к багам и некорректной работе приложения.
🧐 Что делать в таких случаях?
*️⃣ использовать директиву *ngIf или control flow синтаксис @if, чтобы подписка происходила один раз;
*️⃣ использовать новый синтаксис объявления переменных в шаблоне @let (v18.1 - dev preview, v19 - stable);
*️⃣ если данные используются в разных частях шаблона и их нельзя объединить в одном блоке, поможет оператор shareReplay, который «разделит» поток между всеми подписчиками и вся логика будет выполнена один раз.
Но чем больше приложение и сложнее шаблоны, тем труднее вручную искать такие случаи. И вот здесь приходит на помощь @letify.
▶️ У инструмента два режима работы:
*️⃣ analyze — показывает потенциальные проблемы в шаблонах;
*️⃣ fix — автоматически добавляет @let и убирает лишние подписки. По завершении выводится сообщение с напоминанием вручную проверить внесенные изменения.
▶️ Форматы отчетов:
*️⃣ html — подробный отчет с UI, переключателями и разбивкой по файлам;
*️⃣ json — пригоден для интеграций;
*️⃣ list — простой список для отображения в терминале.
Какие сценарии использования я вижу, если используем локально для lint-staged, то самый быстрый вариант это вывести list-отчет. Если же встраиваем в CI/CD, то генерируем html и прикладываем его к артефактам пайплайна.
✖️ Минусы:
*️⃣ fix-режим работает только с Angular 18+;
*️⃣ шаблон должен быть в отдельном файле (запускал для inline шаблонов, ошибок не нашел);
*️⃣ закомментированный код пропускается при проверке;
*️⃣ конструкции вида
В новых приложениях чаще используют сигналы и там подобных проблем уже нет. Но остается огромное количество проектов на RxJS, где этот инструмент может помочь.
P.S. Собрал простую демку для теста - stackblitz
@summon_the_coder
#angular #library
Обновлял зависимости одного из проектов и заметил, что библиотека для интернационализации @ngneat/transloco переехала в новый скоуп @jsverse/transloco. После успешного обновления решил заглянуть на GitHub @jsverse и поискать, что еще у них есть интересного. Так я и наткнулся на героя этого поста — @letify.
Letify CLI помогает оптимизировать шаблоны в Angular приложениях, сканируя файлы и обнаруживая несколько асинхронных подписок на один и тот же поток.
Пример:
<div>{{ observable$ | async }}</div>
<div>{{ observable$ | async }}</div>observable$ = this.appService.makeSomeAction()
.pipe(
tap(() => console.log('Side effect logic'))
);
В этом сниппете на поток observable$ создаются две подписки, и побочные эффекты (tap) выполняются дважды. Это может привести к багам и некорректной работе приложения.
@if (observable$ | async) {
...
}
// или
<ng-container *ngIf="observable$ | async">...</ng-container>observable$ = this.appService.makeSomeAction()
.pipe(
tap(() => console.log('Side effect logic')),
shareReplay({ bufferSize: 1, refCount: true })
);
Но чем больше приложение и сложнее шаблоны, тем труднее вручную искать такие случаи. И вот здесь приходит на помощь @letify.
Какие сценарии использования я вижу, если используем локально для lint-staged, то самый быстрый вариант это вывести list-отчет. Если же встраиваем в CI/CD, то генерируем html и прикладываем его к артефактам пайплайна.
data[prop] | async и myMethod(value, ...) | async пока не поддерживаются.В новых приложениях чаще используют сигналы и там подобных проблем уже нет. Но остается огромное количество проектов на RxJS, где этот инструмент может помочь.
P.S. Собрал простую демку для теста - stackblitz
@summon_the_coder
#angular #library
Please open Telegram to view this post
VIEW IN TELEGRAM
1❤🔥12👍9⚡3❤2🔥1
LLM промпты для Angular
В документации Angular совсем недавно появился многообещающий раздел про AI. Внутри гайд по разработке AI-powered приложений с использованием Genkit, Firebase AI Logic и Gemini API, как подружить эти инструменты и ворваться в современный мир вайб разработки.🔫
А буквально вчера добавили еще один раздел с промптами для LLM, предназначенными для более точной генерации кода (в наличии инструкции для Firebase Studio, Cursor, JetBrains IDE).
⠀
Я ознакомился с базовым промптом и, кажется, это еще и отличный шортлист для мясных разработчиков — в нем собраны актуальные best practices для современных Angular приложений. Пользуемся! И по всей видимости ждем схематик😂
@summon_the_coder
#angular #ai #llm
В документации Angular совсем недавно появился многообещающий раздел про AI. Внутри гайд по разработке AI-powered приложений с использованием Genkit, Firebase AI Logic и Gemini API, как подружить эти инструменты и ворваться в современный мир вайб разработки.
А буквально вчера добавили еще один раздел с промптами для LLM, предназначенными для более точной генерации кода (в наличии инструкции для Firebase Studio, Cursor, JetBrains IDE).
⠀
Я ознакомился с базовым промптом и, кажется, это еще и отличный шортлист для мясных разработчиков — в нем собраны актуальные best practices для современных Angular приложений. Пользуемся! И по всей видимости ждем схематик
ng generate ai-awesome-component. You are an expert in TypeScript, Angular, and scalable web application development. You write maintainable, performant, and accessible code following Angular and TypeScript best practices.
## TypeScript Best Practices
- Use strict type checking
- Prefer type inference when the type is obvious
- Avoid the `any` type; use `unknown` when type is uncertain
## Angular Best Practices
- Always use standalone components over NgModules
- Don't use explicit `standalone: true` (it is implied by default)
- Use signals for state management
- Implement lazy loading for feature routes
- Use `NgOptimizedImage` for all static images
## Components
- Keep components small and focused on a single responsibility
- Use `input()` and `output()` functions instead of decorators
- Use `computed()` for derived state
- Set `changeDetection: ChangeDetectionStrategy.OnPush` in `@Component` decorator
- Prefer inline templates for small components
- Prefer Reactive forms instead of Template-driven ones
- Do NOT use `ngClass`, use `class` bindings instead
- DO NOT use `ngStyle`, use `style` bindings instead
## State Management
- Use signals for local component state
- Use `computed()` for derived state
- Keep state transformations pure and predictable
## Templates
- Keep templates simple and avoid complex logic
- Use native control flow (`@if`, `@for`, `@switch`) instead of `*ngIf`, `*ngFor`, `*ngSwitch`
- Use the async pipe to handle observables
## Services
- Design services around a single responsibility
- Use the `providedIn: 'root'` option for singleton services
- Use the `inject()` function instead of constructor injection
@summon_the_coder
#angular #ai #llm
Please open Telegram to view this post
VIEW IN TELEGRAM
1🔥20⚡3👍2🍓2❤🔥1❤1
Angular Wiki
Как правильно писать на Angular? Как сделать функционал Х 'in angular way'? Какие best practices есть во фреймворке? Это только маленькая часть вопросов, которые возникают у разработчиков во время изучения и работы с фреймворком. Ответить на все сразу сложно, слишком объемным и сложным получится ответ. Нужно умудриться рассказать про typescript, реактивность (RxJS и сигналы), DI, работу с DOM, формы и много еще о чем. Я даже подумывал выпускать небольшие заметки на канале, чтобы покрыть эти вопросы. Но интернет это бездна, в которой есть вообще все и проведя исследование, я обнаружил целую вики для Angular!
🔗 Angular Tips
Эта вики посвящена новым версиям фреймворка (пока можно переключаться между 19 и 20) и описывает не только хорошие, но и плохие практики, что на мой взгляд тоже крайне важно. У каждой практики есть 3 индикатора:
🟢 do - крайняя степень рекомендации, желательно следовать (но разумеется финальный выбор всегда за разработчиком и все мы понимаем, что из-за разных факторов код может иметь отклонения даже от самых строгих практик);
🟡 consider- стоит обратить внимание, было бы неплохо так делать;
🟣 avoid - так не делаем, руки прочь от клавиатуры.
Кроме того, у каждой рекомендации есть дополнительные блоки: «Why» и «Tip». Первый объясняет, почему стоит делать так или иначе, а второй содержит небольшие подсказки и дает контекст для применения.
И что приятно — все это красиво визуализировано: присутствуют понятные иконки (Good/Bad), примеры кода и поясняющие комментарии. Многие разделы (например, типизация, структура проекта, работа с библиотеками, HTTP-клиент и др.) по сути являются фреймворк-агностичными и применимы и в других технологиях.
Так что минус десять очков Гриффиндору! Ой, то есть порогу входа в Angular. Все-таки с такими ресурсами изучать фреймворк становится куда проще.
🔗 Angular Tips
@summon_the_coder | chat$.subscribe()
#angular #learning #tips
Как правильно писать на Angular? Как сделать функционал Х 'in angular way'? Какие best practices есть во фреймворке? Это только маленькая часть вопросов, которые возникают у разработчиков во время изучения и работы с фреймворком. Ответить на все сразу сложно, слишком объемным и сложным получится ответ. Нужно умудриться рассказать про typescript, реактивность (RxJS и сигналы), DI, работу с DOM, формы и много еще о чем. Я даже подумывал выпускать небольшие заметки на канале, чтобы покрыть эти вопросы. Но интернет это бездна, в которой есть вообще все и проведя исследование, я обнаружил целую вики для Angular!
🔗 Angular Tips
Эта вики посвящена новым версиям фреймворка (пока можно переключаться между 19 и 20) и описывает не только хорошие, но и плохие практики, что на мой взгляд тоже крайне важно. У каждой практики есть 3 индикатора:
Кроме того, у каждой рекомендации есть дополнительные блоки: «Why» и «Tip». Первый объясняет, почему стоит делать так или иначе, а второй содержит небольшие подсказки и дает контекст для применения.
И что приятно — все это красиво визуализировано: присутствуют понятные иконки (Good/Bad), примеры кода и поясняющие комментарии. Многие разделы (например, типизация, структура проекта, работа с библиотеками, HTTP-клиент и др.) по сути являются фреймворк-агностичными и применимы и в других технологиях.
Так что минус десять очков Гриффиндору! Ой, то есть порогу входа в Angular. Все-таки с такими ресурсами изучать фреймворк становится куда проще.
🔗 Angular Tips
@summon_the_coder | chat$.subscribe()
#angular #learning #tips
Please open Telegram to view this post
VIEW IN TELEGRAM
3🔥29❤4💘2
Angular ESLint больше не страшно
Как же я люблю статические анализаторы кода и результат их работы: порядок в коде, форматирование, отсортированные импорты, единообразие в порядке ключей объектов (да, и такое люблю!) и много чего еще.
Но как же я не люблю все это настраивать. Да, конфиги более-менее повторяются, но все равно приходится что-то допиливать руками.
А с новым flat-конфигом ESLint я до сих пор не подружился — использовал настройку по наитию, и пока все работает. Меня очень спасает ESLint Config Inspector, но умеет работать только с flat-конфигами. В общем, настройка проекта для меня — это всегда маленькая паника.😳
Для страдающих, хороший стартовый ESLint шаблон: NG Best Practices: Prettier & ESLint
Для Angular есть отдельный пакет
В Nx уже есть базовая преднастройка☔️
Господи, мои молитвы были услышаны — ребята из Angular Courses выпустили новый инструмент: GUI для настройки ESLint под Angular.
Правила разбиты на группы: общие, компоненты, Typescript, RxJS и т.д. Можно выбрать нужные чекбоксы или просто нажать кнопку «Сделать все по красоте» aka «Выбрать все».
Для каждого правила есть сниппеты кода, показывающие, как оно работает. А еще — значок, указывающий, что правило рекомендовано официальным style guide’ом.
На выходе можно экспортировать конфиг в виде markdown-файла с примерами кода (например, чтобы вставить в вики проекта) или сразу как готовый
Все, вот так просто!🕺
Конфигуратор пока еще в альфа версии, будем следить за обновлениями. Пожалуй, мой самый любимый инструмент среди разрастающегося тулинга Angular. Хотелось бы все настраивать таким образом, но пока это мечты.
🌟 Настроить Angular ESLint
@summon_the_coder | chat$.subscribe()
#angular #eslint #bestpractice
Как же я люблю статические анализаторы кода и результат их работы: порядок в коде, форматирование, отсортированные импорты, единообразие в порядке ключей объектов (да, и такое люблю!) и много чего еще.
Но как же я не люблю все это настраивать. Да, конфиги более-менее повторяются, но все равно приходится что-то допиливать руками.
А с новым flat-конфигом ESLint я до сих пор не подружился — использовал настройку по наитию, и пока все работает. Меня очень спасает ESLint Config Inspector, но умеет работать только с flat-конфигами. В общем, настройка проекта для меня — это всегда маленькая паника.
Для страдающих, хороший стартовый ESLint шаблон: NG Best Practices: Prettier & ESLint
Для Angular есть отдельный пакет
angular-eslint, который предоставляет специфичные для фреймворка правила — отдельно для шаблонов и для TypeScript-компонентов.В Nx уже есть базовая преднастройка
angular-eslint с рекомендованными правилами. Но и здесь иногда нужно, или даже приходится, подкрутить гайки: добавить или убрать какое-то правило. И тогда приходится лезть в репозиторий angular-eslint и внимательно читать, что за что отвечает и какие настройки есть. Максимально фрустрирующе! Господи, мои молитвы были услышаны — ребята из Angular Courses выпустили новый инструмент: GUI для настройки ESLint под Angular.
Правила разбиты на группы: общие, компоненты, Typescript, RxJS и т.д. Можно выбрать нужные чекбоксы или просто нажать кнопку «Сделать все по красоте» aka «Выбрать все».
Для каждого правила есть сниппеты кода, показывающие, как оно работает. А еще — значок, указывающий, что правило рекомендовано официальным style guide’ом.
На выходе можно экспортировать конфиг в виде markdown-файла с примерами кода (например, чтобы вставить в вики проекта) или сразу как готовый
.eslint.config.js.Все, вот так просто!
Конфигуратор пока еще в альфа версии, будем следить за обновлениями. Пожалуй, мой самый любимый инструмент среди разрастающегося тулинга Angular. Хотелось бы все настраивать таким образом, но пока это мечты.
🌟 Настроить Angular ESLint
@summon_the_coder | chat$.subscribe()
#angular #eslint #bestpractice
Please open Telegram to view this post
VIEW IN TELEGRAM
1👍19🔥11❤4
Angular 21 - Http клиент поселился в root
Мы молились и прочитали все молитвы дважды, попутно стерев все колени, и наконец-то в 21 версии Angular не нужно будет из коробки провайдить HttpClient в настройках приложения. Клиент будет использовать root-инжектор по умолчанию и попадать в бандл, когда нам это нужно: при inject(HttpClient) или использовании httpResource. Ручное добавление провайдера останется для случаев, когда нужно что-то настроить: переключить на fetch, докинуть интерцептор и т.д.
Никогда не понимал этой особенности с ручным провайдером для клиента, иными словами где вы видели фронтенд без запросов к серверу?
🔘 Подсмотрел новость здесь.
🔘 Закрытый pull request с фичей.
🔘 Полюбоваться кодом клиента с root-инжектором.
@summon_the_coder | chat$.subscribe()
#angular #httpclient
Мы молились и прочитали все молитвы дважды, попутно стерев все колени, и наконец-то в 21 версии Angular не нужно будет из коробки провайдить HttpClient в настройках приложения. Клиент будет использовать root-инжектор по умолчанию и попадать в бандл, когда нам это нужно: при inject(HttpClient) или использовании httpResource. Ручное добавление провайдера останется для случаев, когда нужно что-то настроить: переключить на fetch, докинуть интерцептор и т.д.
Никогда не понимал этой особенности с ручным провайдером для клиента, иными словами где вы видели фронтенд без запросов к серверу?
@summon_the_coder | chat$.subscribe()
#angular #httpclient
Please open Telegram to view this post
VIEW IN TELEGRAM
2❤21🔥17❤🔥4👍2💯1🍓1
Бумеры на месте?
В конце 2024 года команда Angular открыла RFC для обсуждения обновленного стайлгайда. Один из пунктов предлагает отказаться от суффиксов в названиях файлов и классов. То есть вместо привычных
Предложение ожидаемо вызвало недоумение у разработчиков, которые много лет работают с Angular и привыкли к устоявшимся соглашениям.
Я сам недавно вплотную столкнулся с новым неймингом: стартовал пару боевых проектов и сделал несколько учебных демок на Angular 20. Первые впечатления - даже немного радостно: имена короче, standalone-компоненты можно создавать без участия CLI, сделал
Однако как только в проектах начала разрастаться бизнес-логика, а сервисы и директивы множиться, пришли первые сомнения. Над именами уже приходилось думать и «напрягать макушку». В голове возникло два рабочих и очевидных варианта:
1️⃣ внутри модуля/фичи выделять слайсы (читай директории) и тонко работать с импортами, чтобы избегать коллизий имен (прощай flat структура)
2️⃣ вносить в имя файла роль/назначение сущности, чтобы оно было по-настоящему осмысленным (прямо по заветам RFC)
С первым пунктом вопросов нет, это обычный рабочий флоу во многих современных проектах. Со вторым же пунктом пришлось повозиться и заглушить привычки, чтобы начать писать именно нормальный нейминг, а не скатываться в привычные
Для тех, кто пока не готов отходить от наработанных паттернов, есть путь попроще. Можно настроить схематики, чтобы новые сущности создавались по старому шаблону, с привычными суффиксами и именованием классов.
Ну а для совсем ленивых, ну то есть для всех разработчиков (хе-хе), есть пакет с забавным названием ngx-boomer, который добавляет настройки для схематиков автоматически. Запускаем без установки через npx и сидим кряхтим, что раньше было лучше! Ведь было же!?
🌟 вернуть все как было
@summon_the_coder | chat$.subscribe()
#angular #styleguide #schematics
В конце 2024 года команда Angular открыла RFC для обсуждения обновленного стайлгайда. Один из пунктов предлагает отказаться от суффиксов в названиях файлов и классов. То есть вместо привычных
.component, .service, .pipe, .directive рекомендовано использовать осмысленные имена файлов. А в классах убрать «Component/Service/Directive» и писать просто App, Home и т. п. Идея команды - сконцентрироваться на «говорящих» именах, условный user.service.ts действительно не дает полного понимания того, что именно делает класс (и да, отчасти это правда).Предложение ожидаемо вызвало недоумение у разработчиков, которые много лет работают с Angular и привыкли к устоявшимся соглашениям.
Я сам недавно вплотную столкнулся с новым неймингом: стартовал пару боевых проектов и сделал несколько учебных демок на Angular 20. Первые впечатления - даже немного радостно: имена короче, standalone-компоненты можно создавать без участия CLI, сделал
button.ts, и готово. Раньше, конечно, тоже можно было, но «соглашение — есть соглашение».Однако как только в проектах начала разрастаться бизнес-логика, а сервисы и директивы множиться, пришли первые сомнения. Над именами уже приходилось думать и «напрягать макушку». В голове возникло два рабочих и очевидных варианта:
С первым пунктом вопросов нет, это обычный рабочий флоу во многих современных проектах. Со вторым же пунктом пришлось повозиться и заглушить привычки, чтобы начать писать именно нормальный нейминг, а не скатываться в привычные
*.service.ts файлы.Для тех, кто пока не готов отходить от наработанных паттернов, есть путь попроще. Можно настроить схематики, чтобы новые сущности создавались по старому шаблону, с привычными суффиксами и именованием классов.
{
"@schematics/angular:component": { "type": "component" },
"@schematics/angular:directive": { "type": "directive" },
"@schematics/angular:service": { "type": "service" },
"@schematics/angular:guard": { "typeSeparator": "." },
"@schematics/angular:interceptor": { "typeSeparator": "." },
"@schematics/angular:module": { "typeSeparator": "." },
"@schematics/angular:pipe": { "typeSeparator": "." },
"@schematics/angular:resolver": { "typeSeparator": "." }
}Ну а для совсем ленивых, ну то есть для всех разработчиков (хе-хе), есть пакет с забавным названием ngx-boomer, который добавляет настройки для схематиков автоматически. Запускаем без установки через npx и сидим кряхтим, что раньше было лучше! Ведь было же!?
@summon_the_coder | chat$.subscribe()
#angular #styleguide #schematics
Please open Telegram to view this post
VIEW IN TELEGRAM
1❤🔥11👀9🔥6😁6❤1👍1🥰1
Находчивое напряжение или Остроумный саспенс (перевод by AI)
На gitnation.com вышел доклад Minko Gechev, техлида в Google, где он сравнивает подходы к отложенной загрузке, префетчингу и гидрации компонентов в Angular (Deferrable Views) и React (Suspense).
Главная мысль — не существует «хороших» или «плохих» технологий — есть те, что быстрее, удобнее и дешевле решают именно вашу задачу, нужно найти подходящий компромисс. Поэтому не стоит строго «играть» за одну команду, пробуйте больше инструментов и подходов, чтобы находить лучшее решение под конкретный контекст. Особенно актуальна эта мысль в эру ИИ, когда технологии можно щупать без каких либо проблем.
Ну а где код получился декларативнее и понятнее, спойлерить не буду.👋
▶️ смотреть доклад "Resourceful Suspense"
@summon_the_coder | chat$.subscribe()
#angular #react #deferrableviews
На gitnation.com вышел доклад Minko Gechev, техлида в Google, где он сравнивает подходы к отложенной загрузке, префетчингу и гидрации компонентов в Angular (Deferrable Views) и React (Suspense).
Главная мысль — не существует «хороших» или «плохих» технологий — есть те, что быстрее, удобнее и дешевле решают именно вашу задачу, нужно найти подходящий компромисс. Поэтому не стоит строго «играть» за одну команду, пробуйте больше инструментов и подходов, чтобы находить лучшее решение под конкретный контекст. Особенно актуальна эта мысль в эру ИИ, когда технологии можно щупать без каких либо проблем.
Ну а где код получился декларативнее и понятнее, спойлерить не буду.
@summon_the_coder | chat$.subscribe()
#angular #react #deferrableviews
Please open Telegram to view this post
VIEW IN TELEGRAM
2❤8👍1🔥1