✨ Исследуем режимы рендеринга маршрутов
Раньше мы вынуждены были выбирать: либо SSR для всего приложения, либо никак. Но что, если часть страниц приватные, а часть — публичные?
Теперь для каждого маршрута можно выбрать оптимальный режим — клиентский (CSR), серверный (SSR) или статическую генерацию (SSG).
Это позволяет создавать более гибкие и производительные приложения с точно настроенным рендерингом.
👉 https://dev.to/this-is-angular/exploring-routes-rendering-modes-in-angular-bjg
Раньше мы вынуждены были выбирать: либо SSR для всего приложения, либо никак. Но что, если часть страниц приватные, а часть — публичные?
Теперь для каждого маршрута можно выбрать оптимальный режим — клиентский (CSR), серверный (SSR) или статическую генерацию (SSG).
Это позволяет создавать более гибкие и производительные приложения с точно настроенным рендерингом.
👉 https://dev.to/this-is-angular/exploring-routes-rendering-modes-in-angular-bjg
👍11🔥2👏1🤡1
✨ Микрофронтенды с Angular и Native Federation
Вы когда-нибудь задумывались, как несколько команд могут работать над одним масштабным приложением, не мешая друг другу и сохраняя скорость релизов?
Микрофронтенды — секретное оружие enterprise-проектов. Они позволяют разбить монолит на автономные части, которые можно тестировать, деплоить и масштабировать независимо. Но Angular не поддерживает их из коробки. И тут на сцену выходит Native Federation.
👉 https://blog.angular.dev/micro-frontends-with-angular-and-native-federation-7623cfc5f413
Вы когда-нибудь задумывались, как несколько команд могут работать над одним масштабным приложением, не мешая друг другу и сохраняя скорость релизов?
Микрофронтенды — секретное оружие enterprise-проектов. Они позволяют разбить монолит на автономные части, которые можно тестировать, деплоить и масштабировать независимо. Но Angular не поддерживает их из коробки. И тут на сцену выходит Native Federation.
👉 https://blog.angular.dev/micro-frontends-with-angular-and-native-federation-7623cfc5f413
🔥5👍2😁2👌1
✨ Улучшение шаблонов Angular с помощью нетегированных шаблонных литералов
В версии 19.2.0-next.0 ввели поддержку шаблонных литералов, сделав шаблоны выразительнее.
Динамический контент, вычисляемые классы, сложные интерполяции, пайпы и даже генерация URL стали проще: теперь можно напрямую встраивать переменные в строку.
👉 https://medium.com/p/0baa5b4f8371
В версии 19.2.0-next.0 ввели поддержку шаблонных литералов, сделав шаблоны выразительнее.
Динамический контент, вычисляемые классы, сложные интерполяции, пайпы и даже генерация URL стали проще: теперь можно напрямую встраивать переменные в строку.
👉 https://medium.com/p/0baa5b4f8371
🔥10👍3👏1
✨ Что такое LinkedSignal и как его использовать
Angular 19 представил функцию LinkedSignal — расширение стандартного computed, которое позволяет не только вычислять значения, но и изменять их.
Интересно, как это может упростить управление состоянием в ваших проектах?
В статье рассмотрены практические примеры использования LinkedSignal: от подсчета элементов массива до динамического управления состоянием компонентов, таких как аккордеоны и выпадающие списки.
👉 https://angular.love/what-linkedsignal-is-and-how-to-use-it
Angular 19 представил функцию LinkedSignal — расширение стандартного computed, которое позволяет не только вычислять значения, но и изменять их.
Интересно, как это может упростить управление состоянием в ваших проектах?
В статье рассмотрены практические примеры использования LinkedSignal: от подсчета элементов массива до динамического управления состоянием компонентов, таких как аккордеоны и выпадающие списки.
👉 https://angular.love/what-linkedsignal-is-and-how-to-use-it
👍5🔥3
✨ Прекратите неправильно использовать Effects
Зачем усложнять код Effects, если Angular предлагает простое решение для синхронизации состояния?
Вместо асинхронных эффектов, которые могут привести к неочевидным багам и усложнению логики, связанные сигналы позволяют синхронизировать состояние напрямую — без лишних побочных действий.
В статье подробно рассматривается пример с компонентом выбора товара: при смене продукта linkedSignal автоматически сбрасывает значение.
👉 https://angularexperts.io/blog/stop-misusing-effects
Зачем усложнять код Effects, если Angular предлагает простое решение для синхронизации состояния?
Вместо асинхронных эффектов, которые могут привести к неочевидным багам и усложнению логики, связанные сигналы позволяют синхронизировать состояние напрямую — без лишних побочных действий.
В статье подробно рассматривается пример с компонентом выбора товара: при смене продукта linkedSignal автоматически сбрасывает значение.
👉 https://angularexperts.io/blog/stop-misusing-effects
👍4🔥1🤩1
✨ Простой трекер пользовательских событий
Представьте себе: решение, которое логирует все действия пользователя — от изменения значений в формах до сетевых запросов и помогает понять, что происходит "за кулисами" вашего кода.
В статье рассказывается о создании универсального сервиса для трекинга событий с использованием RxJS, интерсепторов и директив.
👉 https://www.angularspace.com/simple-user-event-tracker-in-angular/
Представьте себе: решение, которое логирует все действия пользователя — от изменения значений в формах до сетевых запросов и помогает понять, что происходит "за кулисами" вашего кода.
В статье рассказывается о создании универсального сервиса для трекинга событий с использованием RxJS, интерсепторов и директив.
👉 https://www.angularspace.com/simple-user-event-tracker-in-angular/
👍6🔥2👎1
✨ RxJS за пределами базового использования
Знаете, как превратить RxJS в ваш секретный инструмент для идеального кода?
Создание собственных операторов не просто убирает дублирование — оно делает ваши потоки данных чище, читабельнее и гибче.
В статье, показывается, как написать свой debounceIf оператор и создать delayedRange.
👉 https://habr.com/ru/articles/883294/
Знаете, как превратить RxJS в ваш секретный инструмент для идеального кода?
Создание собственных операторов не просто убирает дублирование — оно делает ваши потоки данных чище, читабельнее и гибче.
В статье, показывается, как написать свой debounceIf оператор и создать delayedRange.
👉 https://habr.com/ru/articles/883294/
👍8🥱3👏1
✨ Симптомы проблемного Angular-кода
Многие говорят об "антипаттернах", но в реальности их бывает сложно заметить. Возможно, вы не замечаете тревожных сигналов!
В статье разобраны опасные симптомы, которые медленно убивают ваше приложение. Не ждите, пока все сломается — учитесь находить и лечить проблемы на ранней стадии.
👉 https://www.angularspace.com/symptoms-of-an-angular-disorder/
Многие говорят об "антипаттернах", но в реальности их бывает сложно заметить. Возможно, вы не замечаете тревожных сигналов!
В статье разобраны опасные симптомы, которые медленно убивают ваше приложение. Не ждите, пока все сломается — учитесь находить и лечить проблемы на ранней стадии.
👉 https://www.angularspace.com/symptoms-of-an-angular-disorder/
👍16❤6
✨ Hawkeye — новый esbuild анализатор
Знаете ли вы, что скрывается в вашем бандле?
Даже с крутыми инструментами вроде esbuild он может незаметно распухнуть из-за иконок, библиотек или ленивого кода. А это — медленная загрузка и раздраженные пользователи.
Встречайте Hawkeye — новый инструмент для анализа бандлов. Он покажет, что именно входит в основной бандл, какие зависимости увеличивают его размер и позволит быстро выявить проблемные места.
👉 https://angularexperts.io/blog/hawkeye-esbuild-analyzer
Знаете ли вы, что скрывается в вашем бандле?
Даже с крутыми инструментами вроде esbuild он может незаметно распухнуть из-за иконок, библиотек или ленивого кода. А это — медленная загрузка и раздраженные пользователи.
Встречайте Hawkeye — новый инструмент для анализа бандлов. Он покажет, что именно входит в основной бандл, какие зависимости увеличивают его размер и позволит быстро выявить проблемные места.
👉 https://angularexperts.io/blog/hawkeye-esbuild-analyzer
👍18👌4❤3🔥1
✨ Новый httpResource
В 19.2.0-rc.0 представлен новый httpResource, который превращает загрузку данных в часть реактивного потока с помощью сигналов.
В статье показано, как использовать новую функцию на примере приложения в стиле классической игры Super Mario.
👉 https://www.angulararchitects.io/en/blog/learning-httpresource-with-super-mario/
В 19.2.0-rc.0 представлен новый httpResource, который превращает загрузку данных в часть реактивного потока с помощью сигналов.
В статье показано, как использовать новую функцию на примере приложения в стиле классической игры Super Mario.
👉 https://www.angulararchitects.io/en/blog/learning-httpresource-with-super-mario/
🔥5❤2👍2
✨ Понимание Ahead-of-Time (AOT) компиляции
AOT в Angular преобразует темплейты и TypeScript код в оптимизированный JavaScript до загрузки приложения в браузере. В отличие от Just-in-Time (JIT) компиляции, которая происходит в браузере, AOT работает на этапе сборки, значительно улучшая производительность, безопасность и снижая количество ошибок.
Статья рассматривает принципы работы AOT, преимущества перед JIT, типичные проблемы и способы отладки. Также показывает эволюцию компилятора Angular от версии 2 до современного движка Ivy.
👉 https://dev.to/this-is-angular/understanding-angular-ahead-of-time-aot-compilation-2m7p
AOT в Angular преобразует темплейты и TypeScript код в оптимизированный JavaScript до загрузки приложения в браузере. В отличие от Just-in-Time (JIT) компиляции, которая происходит в браузере, AOT работает на этапе сборки, значительно улучшая производительность, безопасность и снижая количество ошибок.
Статья рассматривает принципы работы AOT, преимущества перед JIT, типичные проблемы и способы отладки. Также показывает эволюцию компилятора Angular от версии 2 до современного движка Ivy.
👉 https://dev.to/this-is-angular/understanding-angular-ahead-of-time-aot-compilation-2m7p
👍8⚡3
✨ Эффективный рендеринг с декларативными шаблонами
Работа с DOM напрямую через нативные API может быть громоздкой, подверженной ошибкам и медленной, так как операции с DOM сами по себе ресурсоемки. Поэтому, одна из задач фреймворков — выполнять как можно меньше операций с DOM для обеспечения высокой производительности.
В этой статье рассматриваются различные стратегии, которые Angular использует для оптимизации работы.
👉 https://riegler.fr/blog/2025-02-16-incremental-dom
Работа с DOM напрямую через нативные API может быть громоздкой, подверженной ошибкам и медленной, так как операции с DOM сами по себе ресурсоемки. Поэтому, одна из задач фреймворков — выполнять как можно меньше операций с DOM для обеспечения высокой производительности.
В этой статье рассматриваются различные стратегии, которые Angular использует для оптимизации работы.
👉 https://riegler.fr/blog/2025-02-16-incremental-dom
👍5❤2
✨ Resource RFC
Angular анонсировал ресурсы (Resources) — новый стандарт работы с асинхронностью.
Как вы знаете, сигналы предназначены для работы с синхронным состоянием. Каждый сигнал имеет четко определенное текущее значение. Однако не все состояния в приложениях являются синхронными.
Ресурс — это декларативная зависимость от асинхронного источника данных, выраженная через сигналы. Ресурсы соединяют синхронный мир сигналов с операциями, которые требуют времени, такими как выполнение сетевых запросов, чтение файлов или даже ожидание пользовательского ввода.
Читайте RFC, чтобы глубже погрузиться в API ресурсов.
👉 https://github.com/angular/angular/discussions/60120
Angular анонсировал ресурсы (Resources) — новый стандарт работы с асинхронностью.
Как вы знаете, сигналы предназначены для работы с синхронным состоянием. Каждый сигнал имеет четко определенное текущее значение. Однако не все состояния в приложениях являются синхронными.
Ресурс — это декларативная зависимость от асинхронного источника данных, выраженная через сигналы. Ресурсы соединяют синхронный мир сигналов с операциями, которые требуют времени, такими как выполнение сетевых запросов, чтение файлов или даже ожидание пользовательского ввода.
Читайте RFC, чтобы глубже погрузиться в API ресурсов.
👉 https://github.com/angular/angular/discussions/60120
👍5🔥4❤2
✨ Dependency Injection под микроскопом
Angular позволяет создавать структурированные приложения, где зависимости внедряются автоматически. Этот подход делает код не только гибким, но и идеально тестируемым даже в масштабных проектах.
Статья знакомит с основами DI в Angular.
👉 https://habr.com/ru/articles/884884/
Angular позволяет создавать структурированные приложения, где зависимости внедряются автоматически. Этот подход делает код не только гибким, но и идеально тестируемым даже в масштабных проектах.
Статья знакомит с основами DI в Angular.
👉 https://habr.com/ru/articles/884884/
👍10🤡5🐳1
This media is not supported in the widget
VIEW IN TELEGRAM
👍2
Настало время, ищу лучших из лучших 📣
В комментариях пишут, что непонятно куда кликать, кликать можно сюда https://jobs.ton.org/companies/the-open-platform-2/jobs/46595263-frontend-engineer
В комментариях пишут, что непонятно куда кликать, кликать можно сюда https://jobs.ton.org/companies/the-open-platform-2/jobs/46595263-frontend-engineer
Please open Telegram to view this post
VIEW IN TELEGRAM
🏆6💩5🔥1
✨ Анонс TypeScript 5.8
Команда TypeScript представила версию 5.8 с новыми возможностями и улучшениями. Вот ключевые изменения:
Улучшенная проверка условий в return
Теперь TypeScript точнее анализирует условные выражения в операторах return. Это помогает находить ошибки, когда ветки возвращают несовместимые типы. Например, если функция должна вернуть объект URL, а одна из веток возвращает строку, TypeScript сразу укажет на проблему.
Поддержка require() для ESM в --module nodenext
В Node.js 22 появилась возможность использовать require() для загрузки ESM-модулей из CommonJS. TypeScript 5.8 поддерживает это поведение с флагом --module nodenext, что упрощает переход на ESM для разработчиков библиотек без дублирования кода.
Флаг --erasableSyntaxOnly для чистого синтаксиса
Новый флаг выявляет конструкции TypeScript, которые нельзя «стереть» в JavaScript (например, enum или параметры свойств в классах). Это полезно для совместимости с режимом Node.js, где TypeScript-файлы запускаются напрямую.
Управление заменой стандартных библиотек (--libReplacement)
Флаг --libReplacement позволяет отключить автоматическую замену встроенных типов (например, dom) на кастомные из @typescript/lib-*. Это ускоряет работу, если вы не используете такую замену.
Сохранение вычисляемых свойств в .d.ts-файлах
Исправляет генерацию деклараций для вычисляемых свойств в классах.
Оптимизации скорости работы
Улучшена обработка путей и валидация настроек проекта. Это ускоряет загрузку крупных проектов и делает реакцию на изменения в режиме --watch более отзывчивой.
Важные изменения в синтаксисе
При использовании --module nodenext импорт с assert теперь вызывает ошибку — вместо него нужно использовать with (актуально для Node.js 22+).
👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-8/
Команда TypeScript представила версию 5.8 с новыми возможностями и улучшениями. Вот ключевые изменения:
Улучшенная проверка условий в return
Теперь TypeScript точнее анализирует условные выражения в операторах return. Это помогает находить ошибки, когда ветки возвращают несовместимые типы. Например, если функция должна вернуть объект URL, а одна из веток возвращает строку, TypeScript сразу укажет на проблему.
Поддержка require() для ESM в --module nodenext
В Node.js 22 появилась возможность использовать require() для загрузки ESM-модулей из CommonJS. TypeScript 5.8 поддерживает это поведение с флагом --module nodenext, что упрощает переход на ESM для разработчиков библиотек без дублирования кода.
Флаг --erasableSyntaxOnly для чистого синтаксиса
Новый флаг выявляет конструкции TypeScript, которые нельзя «стереть» в JavaScript (например, enum или параметры свойств в классах). Это полезно для совместимости с режимом Node.js, где TypeScript-файлы запускаются напрямую.
Управление заменой стандартных библиотек (--libReplacement)
Флаг --libReplacement позволяет отключить автоматическую замену встроенных типов (например, dom) на кастомные из @typescript/lib-*. Это ускоряет работу, если вы не используете такую замену.
Сохранение вычисляемых свойств в .d.ts-файлах
Исправляет генерацию деклараций для вычисляемых свойств в классах.
Оптимизации скорости работы
Улучшена обработка путей и валидация настроек проекта. Это ускоряет загрузку крупных проектов и делает реакцию на изменения в режиме --watch более отзывчивой.
Важные изменения в синтаксисе
При использовании --module nodenext импорт с assert теперь вызывает ошибку — вместо него нужно использовать with (актуально для Node.js 22+).
👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-8/
👍5🔥5
✨ Вайб-кодинг
Как думаешь, можно ли превратить программирование в настоящий диалог с искусственным интеллектом?
В эпоху нейронок появился вайб-кодинг — способ, где каждая строка кода рождается в чате, превращая рутинную работу в креативное приключение, полное эмоций и неожиданных решений.
Узнай, как общаться с LLM так, как менеджер с разработчиком, и почему прототипы, созданные на коленке, способны изменить правила игры в разработке.
👉 https://vas3k.blog/notes/vibe_coding/
Как думаешь, можно ли превратить программирование в настоящий диалог с искусственным интеллектом?
В эпоху нейронок появился вайб-кодинг — способ, где каждая строка кода рождается в чате, превращая рутинную работу в креативное приключение, полное эмоций и неожиданных решений.
Узнай, как общаться с LLM так, как менеджер с разработчиком, и почему прототипы, созданные на коленке, способны изменить правила игры в разработке.
👉 https://vas3k.blog/notes/vibe_coding/
👍7🤡7🔥2🤔2❤1
✨ Angular Signals
Вы когда-нибудь задумывались, как работают сигналы изнутри?
В статье объясняется, как функционирует реактивный контекст и отслеживание зависимостей.
👉 https://habr.com/ru/companies/otus/articles/887494/
Вы когда-нибудь задумывались, как работают сигналы изнутри?
В статье объясняется, как функционирует реактивный контекст и отслеживание зависимостей.
👉 https://habr.com/ru/companies/otus/articles/887494/
👍7🔥3
✨ Ресурсы в Angular 19.2 — революция или просто хайп?
Angular 19.2 вышел и снова меняет правила игры! Новые API для асинхронной реактивности — это не просто фича, а мощный инструмент, который упростит жизнь разработчикам. Хочешь, чтобы твой код был чище, а данные грузились как по волшебству? Тогда это для тебя.
Теперь с httpResource и rxResource можно легко работать с асинхронными запросами, а обновленные шаблоны сделают твой код еще элегантнее. Плюс — поддержка Set в формах и удобные миграции.
👉 https://blog.angular.dev/angular-19-2-is-now-available-673ec70aea12
Angular 19.2 вышел и снова меняет правила игры! Новые API для асинхронной реактивности — это не просто фича, а мощный инструмент, который упростит жизнь разработчикам. Хочешь, чтобы твой код был чище, а данные грузились как по волшебству? Тогда это для тебя.
Теперь с httpResource и rxResource можно легко работать с асинхронными запросами, а обновленные шаблоны сделают твой код еще элегантнее. Плюс — поддержка Set в формах и удобные миграции.
👉 https://blog.angular.dev/angular-19-2-is-now-available-673ec70aea12
🔥11👍3❤1