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

✨ 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

✨ Как перенести CoreModule на standalone APIs

За standalone компонентами будущее. Angular CLI позволяет генерировать новые приложения с ними из коробки, просто используя флаг --standalone при выполнении команды ng new.

Давайте узнаем, как перенести CoreModule на новое API.

👉 https://angularexperts.io/blog/angular-core-module-standalone-migration

✨ Объединение signals и observables

Будущее повсеместное распространение сигналов требует от нас создания новых паттернов.

В этой статье попытка объединить observables и signals в одно целое.

👉 https://dev.to/this-is-angular/a-sweet-spot-between-signals-and-observables-4chb

✨ Protractor устарел

В конце августа 2023 года Protractor официально завершит долгосрочную поддержку и перейдет в категорию End of Life в сентябре 2023 года.

Для получения более подробной информации о том, как команда Angular работает с устаревшими API и функциями, пожалуйста, ознакомьтесь с этим руководством.

👉 https://medium.com/p/2beac7402ce0

✨ Как операторы высшего порядка упрощают код

Чем глубже вы проваливаетесь в RxJS, тем больше самых разных операторов вы узнаете. И со временем добираетесь до потоков потоков. То есть вместо обычных значений такой поток эмитит другие потоки. Такие потоки называют Higher Order Observables.

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

👉 https://habr.com/ru/articles/757202/

✨ Создаем блог с помощью Analog

Создание блога является одним из лучших способов изучения стека веб-разработки, а современные метафреймворки облегчают этот процесс.

В этой статье показывается, как создать статический блог на Angular с помощью Analog.

👉 https://dev.to/analogjs/how-to-build-a-blog-with-analog-and-angular-4pk2

✨ Рефлексия в JavaScript и TypeScript

В JavaScript из коробки есть способы разобрать в рантайме структуру его значений — определить типы, ключи объектов, получить конструкторы и прототипы. Знание этих механизмов может помочь проектировать более логичные, лаконичные и удобные API.

В статье показывается, на примере CLI-фреймворка, как добавить классам и их полям собственные метаданные при помощи декораторов.

👉 https://habr.com/ru/companies/ruvds/articles/754764/

✨ DOM, DI и View: деревья в Angular

Легко можно спутать дерево инжекторов DI и DOM-дерево непосредственных HTML-элементов и вьюх Angular. Они похожи и иногда имеют прямое соответствие, но далеко не всегда.

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

👉 https://habr.com/ru/companies/tinkoff/articles/756024/

✨ Современные архитектуры с Angular

Angular часто используется для фронтенда крупных, критически важных решений. В таких условиях особенно важно обеспечить простоту сопровождения архитектуры. Однако при этом важно избегать оверинжиниринга.

В этой серии статей показывается, как можно совместить оба требования.

👉 https://www.angulararchitects.io/en/aktuelles/modern-architectures-with-angular-part-1-strategic-design-with-sheriff-and-standalone-components/