🦊 Angular Fox 🚀 — русскогорящие новости сообщества
3.97K subscribers
1.21K photos
7 videos
1.06K links
Как костыль на реактивно-лисьей тяге 🔥🦊

Нравится канал? Подпишись на меня!
👉 twitter.com/thekiba_ru
💖 twitter.com/thekiba_io
medium.com/@thekiba
github.com/thekiba

Чаты @angular_ru @angular_jobs
Download Telegram
Люди не понимают ООП

Похоже, многим не нравится объектно-ориентированное программирование. И это неудивительно, если в нем не разобраться, то оно может привести к усложнению всего.

Сегодня мы отойдем от хайпа сигналов и погрузимся в мир фундаментальных вещей. Пристегивайтесь, путешествие будет долгим, но захватывающим.

👉https://habr.com/ru/companies/ruvds/articles/792052/
👍7🤔6😁1
TypeSpec

TypeSpec — это вдохновленный TypeScript, легко расширяемый язык, который помогает разработчикам описывать API в привычной манере.

Он позволяет работать с REST API, OpenAPI, gRPC и т.д.

👉 https://typespec.io/
👍7💩5🤔1
Query Signals

В Angular v17.2.0-rc.0 появились queries as signals.

Они предоставляют набор новых функций: viewChild, viewChildren, contentChild и contentChildren.

👉 https://netbasal.com/querying-made-easy-exploring-angulars-query-signals-ca850b5db892
👍21🆒1
Изучаем опцию Define в Angular CLI

Angular CLI продолжает радовать новыми функциями и улучшениями. Одним из таких дополнений является опция define, появившаяся в версии 17.2.0-rc.0 в конфигурационном файле angular.json.

Давайте рассмотрим, как эта функциональность может улучшить ваши проекты.

👉 https://netbasal.com/explore-angular-clis-define-option-effortless-global-identifier-replacement-f08fec7d9243
👍10🤔1
Angular innerHTML и DomSanitizer

Angular позаботился о том, чтобы встроить в свой движок рендеринга шаблонов множество средств защиты от инъекций кода.

Но иногда, в очень редких сценариях, действительно нужна возможность инъекции HTML непосредственно в DOM.

👉 https://blog.angular-university.io/angular-innerhtml/
👍9
Релиз Angular 17.2

В новую версию вошла экспериментальная поддержка Material 3, signal queries, model inputs, загрузчик изображений для Netlify, поддержка отладки гидратации в DevTools, а так же CLI теперь поддерживает менеджер пакетов Bun.

На очереди — выход Angular 18 в мае.

👉 https://blog.angular.io/angular-v17-2-is-now-available-596cbe96242d
🤯17👍7🔥211🏆1
Material 3

Начиная с версии 17.2.0, Angular Material включает экспериментальную поддержку стилей M3 в дополнение к M2. Команда планирует стабилизировать поддержку M3 после короткого экспериментального периода, чтобы получить отзывы о дизайне и API.

Вы можете попробовать его уже сегодня, перейдя к руководству.

👉 https://blog.angular.io/material-3-experimental-support-in-angular-17-2-8e681dde650e
👍8🤯4😨21🔥1
Ленивая загрузка на уровне шаблонов

До внедрения современного синтаксиса шаблонов, ленивая загрузка на основе маршрутов была широко принята в среде разработчиков Angular. Однако на уровне шаблонов она не пользовалась популярностью.

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

👉 https://dev.to/this-is-angular/template-level-lazy-loading-in-angular-4lgm
👍5
Angular 17.2: Что нового?

Новые API, которые мы получили в Angular 17.2, упрощают создание компонентов, основанных на сигналах.

В этой статье мы познакомимся с новыми функциями, представленными в последнем выпуске.

👉 https://blog.angular-university.io/angular-17-2-release/
👍13🤩4🔥2
Шпаргалка для алгособеса

В этой статье подробное руководство по алгоритмам и структурам данных, которые с большой вероятностью попадутся на собеседовании.

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

👉 https://habr.com/ru/articles/794556/
👍6🔥2🤮2😁1
Изучаем Model

Новейшее дополнение к Angular — функция Model, которая улучшает двустороннюю привязку данных с помощью сигналов.

Она позволяет, упростить управление данными в компонентах.

👉 https://netbasal.com/angulars-model-function-explored-a-comprehensive-overview-4481d023c822
👍12
OAuth 2 с помощью Spring, Angular и Keycloak

В статье рассматривается интеграция OAuth2 в одностраничное приложение, где Spring является бэкендом, а Angular фронтендом.

Роль сервера авторизации берет на себя Keycloak, распространенный выбор в экосистеме Java.

👉 https://www.angulararchitects.io/en/blog/oauth2-with-spring-angular-keycloak-spring-for-resource-server/
👍11
Тюнинг производительности Angular

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

В ней вы узнаете, как сгенерировать performance profile и разделить приложение на части.

👉 https://blog.angular-university.io/angular-performance-tuning/
👍9👎1🔥1
Signal Forms

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

Новая библиотека Signal Forms берет идеи из Template Driven Forms и Reactive Forms и добавляет сигналы. Она все еще находится в процессе разработки, любая обратная связь и помощь в реализации приветствуется.

👉 https://timdeschryver.dev/blog/bringing-the-power-of-signals-to-angular-forms-with-signal-forms
👍9
Angular на стероидах

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

В статье продемонстрировано, как с легкостью использовать WebAssembly внутри приложения, написанного на Angular.

👉 https://habr.com/ru/companies/piter/articles/796329/
👍3👎2🤔1🥴1
Сравнение utility types библиотек или TypeScript на стероидах

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

В статье рассказывается о сторонних utility types библиотеках, которые могут сэкономить время на типизацию.

👉 https://habr.com/ru/articles/794410/
👍51
Attribute Injection

В Angular 17.3.0-next.1 появился новый класс HostAttributeToken, позволяющий внедрять атрибуты аналогично @Attribute.

Его можно использовать следующим образом:
import {HostAttributeToken, inject} from '@angular/core';

class MyDir {
someAttr = inject(new HostAttributeToken('some-attr'));
}


Новый API ведет себя аналогично декоратору @Attribute, с одним существенным отличием: он выбрасывает DI-ошибку, если атрибут не существует, а не возвращает null.

👉 https://netbasal.com/streamlining-attribute-injection-in-angular-the-hostattributetoken-approach-494f5c1428b8
👍16👎1🤯1
Типизированные реактивные формы

Всегда лучше получить предупреждение заранее, если ваша форма не валидна.

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

👉 https://angularindepth.com/posts/1527/strongly-typed-reactive-forms-in-angular
👍10🔥32
Оптимизируем изображения

Нет необходимости говорить о том, что загрузка изображений может сильно повлиять на показатели Web Vitals.

В статье рассказывается о том, как работает директива NgOptimizedImage и инструменты, которые она предоставляет.

👉 https://angularindepth.com/posts/1522/the-who-what-where-when-why-and-how-of-image-optimization-in-angular
👍9
Тип never и обработка ошибок в TypeScript

Если упускать из виду некоторые фундаментальные особенности never. Это может привести к ошибкам в коде, которые могут проявиться в проде.

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

👉 https://fettblog.eu/typescript-never-and-error-handling/
👍7