Только что отсмотрел драфт подкаста и для первого раза получилось вполне убедительно, хотя в паре мест я бы перезаписал ответы, видимо не смог побороть волнение и затупил😬
В любом случае опыт крайне интересный, ждемс выпуск!

Вот и дождались! Вышел подкаст на канале Cloud ru Tech, где я в роли гостя целый час нахваливаю Angular👋 Приятного просмотра!

Youtube | VK Видео

Где учить этот 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

Неожиданный скриншот от @ngxSamurai. Ловим привет от Manfred Steyer!🕺

Где учить этот 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

letify - звучит как заклинание, работает как по волшебству ✨

Обновлял зависимости одного из проектов и заметил, что библиотека для интернационализации @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) выполняются дважды. Это может привести к багам и некорректной работе приложения.

🧐 Что делать в таких случаях?

*️⃣использовать директиву *ngIf или control flow синтаксис @if, чтобы подписка происходила один раз;

@if (observable$ | async) {
  ...
}
// или
<ng-container *ngIf="observable$ | async">...</ng-container>

*️⃣ использовать новый синтаксис объявления переменных в шаблоне @let (v18.1 - dev preview, v19 - stable);
*️⃣ если данные используются в разных частях шаблона и их нельзя объединить в одном блоке, поможет оператор shareReplay, который «разделит» поток между всеми подписчиками и вся логика будет выполнена один раз.

observable$ = this.appService.makeSomeAction()
.pipe(
  tap(() => console.log('Side effect logic')),
  shareReplay({ bufferSize: 1, refCount: true })
);

Но чем больше приложение и сложнее шаблоны, тем труднее вручную искать такие случаи. И вот здесь приходит на помощь @letify.

▶️ У инструмента два режима работы:
*️⃣analyze — показывает потенциальные проблемы в шаблонах;
*️⃣fix — автоматически добавляет @let и убирает лишние подписки. По завершении выводится сообщение с напоминанием вручную проверить внесенные изменения.

▶️ Форматы отчетов:
*️⃣html — подробный отчет с UI, переключателями и разбивкой по файлам;
*️⃣json — пригоден для интеграций;
*️⃣list — простой список для отображения в терминале.

Какие сценарии использования я вижу, если используем локально для lint-staged, то самый быстрый вариант это вывести list-отчет. Если же встраиваем в CI/CD, то генерируем html и прикладываем его к артефактам пайплайна.

✖️ Минусы:
*️⃣fix-режим работает только с Angular 18+;
*️⃣шаблон должен быть в отдельном файле (запускал для inline шаблонов, ошибок не нашел);
*️⃣закомментированный код пропускается при проверке;
*️⃣конструкции вида data[prop] | async и myMethod(value, ...) | async пока не поддерживаются.

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

P.S. Собрал простую демку для теста - stackblitz

@summon_the_coder

#angular #library