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

✨ Оптимизация валидации форм с помощью ленивой загрузки

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

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

👉 https://medium.com/p/61265536a6f2

✨ RxJS в Angular

Первое, что вы увидите, как только начнете изучать Angular, — это RxJS. На это есть причина: многие действия, можно легко написать с помощью существующих операторов RxJS в декларативной форме, которая легко читается и понимается.

Изучить эту библиотеку действительно стоит, так как она значительно облегчит вам жизнь.

👉 https://medium.com/p/44c9d3b3fdb1

✨ Возможности декораторов в TypeScript

Декораторы обладают огромным потенциалом. Они помогают решать широкий круг задач и делают код легко читаемым.

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

👉 https://medium.com/p/c1496fed8a7

✨ Паттерны проектирования: Состояние

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

В статье описывается паттерн Состояние и его отличия от Стратегии.

👉 https://medium.com/p/32120b9a759f

✨ Реализация upsert диалогов

Термин "upsert" представляет собой комбинацию слов "update" и "insert" и означает, что диалог может использоваться как для создания новой записи, так и для обновления существующей.

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

👉 https://medium.com/p/732197d4936b

✨ Отрисовка графиков с помощью веб-воркеров в Angular

Рендеринг графиков в фоновом режиме возможен, но веб-воркеры имеют ограниченный доступ к DOM.

В статье используется OffscreenCanvas API для создания графиков.

👉 https://medium.com/p/f7ac576e21d1

✨ Создаем и публикуем npm-пакет с TypeScript и тестами

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

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

👉 https://habr.com/ru/company/otus/blog/704398/

🔥 Angular нуждается в реактивном примитиве

Разработчики Angular экспериментируют с различными подходами, один из которых реактивный примитив, который необходим для простой, локальной синхронизации состояния.

Mike Pearson поделился соображениями о возможном будущем Angular.

👉 https://dev.to/this-is-angular/i-changed-my-mind-angular-needs-a-reactive-primitive-n2g

✨ История внедрения TypeScript

JavaScript — это язык с динамической типизацией. Когда вы меняете тип переменной в одном месте, забыв поменять способ обращения к ней в другом, об ошибке узнаете только в рантайме.

Это не понравилось фронтендерам из hh. Вот их история миграции.

👉 https://habr.com/ru/company/hh/blog/702346/

🎉 Результаты розыгрыша билетов на Podlodka Frontend Crew

Поздравляем @mephistorine и @dev_nektobit. Ваши истории оказались лучшими.

Хочется выразить благодарность всем остальным участникам, надеемся в следующий раз вам повезет 💖

✨ Изучаем строго типизированные реактивные формы

Типизированные формы помогают нам избежать многих распространенных проблем при работе с нашими формами.

Лучший способ научиться и понять, зачем использовать типизированные реактивные формы, — это разобрать сценарий использования.

👉 https://www.danywalls.com/how-to-use-strictly-typed-reactive-forms-in-angular

✨ Создаем Angular библиотеки

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

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

👉 https://medium.com/p/73ee45b32916

✨ Паттерны проектирования: Команда

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

В статье с помощью него реализуется аналог приложения Shortcuts из iOS.

👉 https://medium.com/p/10b3162e3bee

✨ Изучаем модульные тесты

Одна из самых больших трудностей, когда люди только начинают изучать Angular, — это работа с модульными тестами.

Надеемся, после прочтения статьи вы будете чувствовать себя более уверенно при работе с ними.

👉 https://dev.to/stevewhitmore/angular-unit-tests-common-pain-points-4366

🔥 Разыгрываем два билета на Podlodka Frontend Crew

Специально для наших подписчиков мы запускаем конкурс совместно с Podlodka Frontend Crew.

Для участия необходимо в комментариях рассказать свою историю из мира фронтенда. Авторы двух историй, которые до 4 декабря соберут больше всех реакций, получат по одному билету на конференцию.

Конференция начнется 5 декабря. Вас ждут эксперты из топовых компаний — сессии в Zoom, сообщество в Slack и ламповая атмосфера.

💖 Желаем удачи

✨ Redux в Angular

В экосистеме Angular есть несколько реализаций сторов на основе концепций Redux.

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

👉 https://medium.com/p/591ba785e0fc

Привет! На связи Podlodka — организатор IT-конференций, родившихся из популярного подкаста. Приглашаем на юбилейный пятый сезон Podlodka Frontend Crew! Старт — 5 декабря.

🤓 В этот раз мы решили глубже разобраться в браузерных API. В спикерах — Павел Теренин, Полина Гуртовая, Никита Дубко и Саша Шинкевич.

👾 Разберём самые странные браузерные API. Вместе узнаем, что уже сейчас могут делать современные браузеры и как это может помочь вашим проектам.
👾 Узнаем про WASM в браузере и вне его. Попробуем понять, для чего можно использовать WASM, и обсудим распространённые проблемы.
👾 Послушаем подробный обзор полезных инструментов Chrome и узнаем о новых возможностях.
👾 Поговорим про проект Fugu, который прямо на веб-странице предоставляет доступ к любым API, используемым iOS- и Android-разработчиками. Обсудим, какие API можно использовать в продакшне.

🤑 Держи доп. промик на скидку 500 руб: frontend_crew_5_D1hyOx

👉 Залетай на сайт, чтобы узнать подробности и забрать билет со скидкой!

🦄 (Микро)фронтенды и микросервисы с помощью Webpack

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

Максим Смирнов рассказал, как разбить монолит на микрофронтенды, чтобы все остались довольными.

👉 https://habr.com/ru/company/tinkoff/blog/701152/

✨ Примеры использования NgRx: Работа со списками

ngrx/entity — это мощный инструмент, который предоставляет набор вспомогательных функций для работы с коллекциями данных.

В этой статье рассмотрена работа со списками с его помощью.

👉 https://dev.to/this-is-angular/ngrx-use-cases-part-ii-working-with-lists-1j58

✨ Осваиваем автономные компоненты в Angular 15

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

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

👉 https://www.danywalls.com/head-start-with-standalone-components-in-angular-15