🦊 Angular Fox 🚀 — русскогорящие новости сообщества

✨ Новая возможность Angular v17: отложенная загрузка В предыдущих версиях Angular мы могли лениво загружать часть приложения с помощью Router или использовать динамический импорт и ngComponentOutlet. В Angular 17 команда Angular выводит ленивую загрузку на новый уровень. Появился управляющий блок @defer, позволяющий лениво загружать содержимое блока. 👉 https://dev.to/this-is-angular/new-angular-v17-feature-deferred-loading-41mi

✨ Микрофронтенды с современным Angular Новая интеграция esbuild, которая будет включена по умолчанию начиная с версии 17, позволяет значительно повысить производительность сборки по сравнению с традиционным процессом на основе webpack. Однако Module Federation привязан к webpack. Для того чтобы избавиться от привязки к webpack, был создан проект Native Federation. Он предлагает те же возможности, но работает со всеми инструментами сборки. 👉 https://www.angulararchitects.io/en/blog/micro-frontends-with-modern-angular-part-1-standalone-and-esbuild/

✨ Создание реактивной библиотеки Реактивность кажется волшебной, поскольку она использует декларативный подход, а реализация не имеет значения до тех пор, пока соблюдается контракт. В статье показывается, как создать реактивную библиотеку самостоятельно. 👉 https://dev.to/ryansolid/building-a-reactive-library-from-scratch-1i0p

📺 Минко Гечев о будущем Angular В эту пятницу мы погрузимся в будущее Angular — а именно, чего ожидать от Angular 18 и последующих версий. Не пропустите эксклюзивную информацию. 👉 https://www.youtube.com/watch?v=2M17gRQbgfI

✨ Паттерны реактивности Зачастую реактивность ассоциируется с фреймворками, но вы можете многому научиться, реализуя ее на чистом JavaScript. Существует множество способов реализовать реактивность. Мы можем комбинировать их, чтобы наши приложения могли реактивно рендерить, логировать, анимировать, обрабатывать пользовательские события и т.д. 👉 https://frontendmasters.com/blog/vanilla-javascript-reactivity/

✨ Feature Flags в Angular 16 Feature Flags — это отличный способ включить или отключить функции во время выполнения. Это может быть полезно для A/B-тестирования, или для включения или отключения функций для конкретных пользователей. В этой статье показывается, как реализовать подобный функционал. 👉 https://ng-journal.com/blog/2023-09-29-feature-flags-in-angular-16/

✨ Чтение и запись DOM с помощью новых lifecycle hooks Недавно в Angular добавили afterNextRender и afterRender. afterNextRender — выполняется один раз и аналогичен AfterViewInit, но не выполняется при рендеринге на стороне сервера. afterRender — выполняется после каждого обнаружения изменений. В этой статье описывается, как использовать afterNextRender для добавления нового графика на холст и afterRender для перерисовки. 👉 https://dev.to/railsstudent/dom-reading-and-writing-with-new-lifecycle-hooks-in-angular-4n7e

✨ Начало работы с сигналами Начиная с версии 16, команда Angular проделала огромную работу, прислушиваясь к мнению сообщества и улучшая Signals API. Статья дает базовое представление о том, как сделать ваши приложения реактивными с помощью сигналов. 👉 https://www.danywalls.com/head-start-with-angular-signals-a-basic-overview

✨ TypeScript предотвращает плохие... и хорошие вещи TypeScript предотвращает множество плохих вещей: баги, ошибки, неверные предположения и многое другое. Система типов может дать вам большую уверенность в ваших программах. Это в подавляющем большинстве случаев положительно. Но большинство не экспертов, идут на компромисс, ограничивая программную выразительность ради безопасности типов. 👉 https://kyleshevlin.com/typescript-prevents-bad-things-and-good-things

🔥 Знакомство с новым потоком управления В Angular 17 внесли самое значительное изменение в шаблонах за все время их существования. Новый декларативный поток управления заменяет функциональность NgIf, NgFor и NgSwitch. 👉 https://medium.com/p/a02c6eee7843

✨ TypeScript и все что тебе нужно в разработке Изучение TypeScript — это постоянный процесс, и чем больше вы практикуетесь, тем более уверенно будете использовать его в своих проектах. В этом туториале рассмотрены приемы работы с TypeScript, например, дженерики и type guards. 👉 https://habr.com/ru/articles/762902/

📺 TypeScript: Документальный фильм В пятницу смотрим документальный фильм, в котором приняли участие основные соавторы и члены сообщества. Он дает представление о развитии TypeScript и его влиянии на веб-разработку и культуру открытого кода. 👉 https://www.youtube.com/watch?v=U6s2pdxebSo

✨ Как построить компонент Typeahead Знаете, когда вы начинаете набирать текст в поисковой строке, и она начинает предлагать вам что-то новое? Это называется typeahead. Это отличный способ помочь пользователям найти то, что они ищут. В этой статье вы узнаете, как создать компонент typeahead с помощью RxJS. 👉 https://dev.to/this-is-angular/how-to-build-a-typeahead-component-using-rxjs-4n4k

✨ Современные архитектуры на Angular В первой части были заложены основы сопровождаемой архитектуры. В этой части решение дополняется мерами по повышению производительности сборки, с помощью Nx. 👉 https://www.angulararchitects.io/en/blog/modern-architectures-with-angular-part-2-build-performance-with-nx-2/

✨ Реализуем бесконечную прокрутку Бесконечная прокрутка — метод веб-дизайна, при котором по мере прокрутки страницы вниз пользователь автоматически и непрерывно загружает все большее количество контента в нижней части страницы, избавляя пользователя от необходимости переходить на следующую страницу. В статье показывается, как создать этот функционал с помощью RxJS. 👉 https://dev.to/this-is-learning/reactive-infinity-scroll-2mja

✨ Incremental Static Regeneration для Angular Такие решения как Static Site Generation (SSG), обеспечивает рендеринг сайта во время сборки и кэшируют файлы для каждого маршрута приложения, но у SSG есть проблемы. Например, при обновлении страницы надо перестраивать весь сайт. Именно здесь и приходит на помощь Incremental Static Regeneration (ISR) — это технология, позволяющая обновлять статические страницы сайта без необходимости перестраивать весь сайт. 👉 https://medium.com/p/c12745ff4b48

🦄 Taiga UI: больше чем UI kit Taiga UI — огромная библиотека UI-компонентов для Angular, на которую стоит взглянуть. Но она только вершина айсберга. В этой статье рассматриваются все библиотеки относящиеся к ней. 👉 https://habr.com/ru/companies/tinkoff/articles/760276/

✨ Типизированные формы До релиза версии 14 не было поддержки строгой типизации форм. Обращение к несуществующему полю должно было вызывать ошибку компиляции Typescript но этого не происходило. В новых версиях типизация форм появилась, но есть нюансы, о которых дальше в статье. 👉 https://habr.com/ru/articles/760166/

✨ Standalone компоненты и tree-shaking Tree-shaking — «встряхивание дерева», удаление неиспользуемого кода из бандла приложения во время сборки. Анастасия Анисимова рассказала о нюансах tree-shaking, о которых стоит знать при работе со standalone компонентами. 👉 https://habr.com/ru/companies/skyeng/articles/757498/

✨ Работаем с логированием в Angular Логирование — довольно распространенная практика. К сожалению, она не так часто встречается в мире фронтенда и часто упоминается в статьях, посвященных бэкенду. В этой статье объясняется, что такое логирование и показаны способы его реализации. 👉 https://dev.to/this-is-angular/what-is-going-on-here-getting-started-with-logging-in-angular-59k