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

✨ Реализуем скелетоны Скелетоны — это элементы-заполнители, которые отображаются перед загрузкой содержимого веб-страницы. Скелетоны передают визуальное впечатление о функции, что дает им преимущество перед спиннерами. Netanel Basal поделился минимальной реализацией скелетонов с помощью структурных директив. 👉 https://medium.com/p/7490ffdecc1b

✨ Шпаргалка по уязвимостям Обеспечение безопасности приложений — непростое занятие. Приложения состоят из логики на стороне сервера и клиента, хранения данных, API и т.д. Учитывая все компоненты, которые необходимо защитить, создание безопасного приложения может показаться сложной задачей. К счастью, большинство уязвимостей имеют одни и те же корни. Изучив причины их возникновения и способы их обнаружения, можно научиться защищать свои приложения. 👉 https://medium.com/p/a3b36f22a0fd

✨ Dependency Injection в Angular Внедрение зависимостей — это паттерн проектирования, в котором мы запрашиваем зависимости у внешних ресурсов, а не создаем их. Это уникальная особенность Angular, которая помогает разработчикам избежать ненужных хлопот в их коде. В этой небольшой статье Chameera Dulanga рассказал о особенностях DI в Angular. 👉 https://medium.com/p/181009608a91

✨ Отлаживаем Angular приложения При знакомстве с новым фреймворком или библиотекой важно знать, как отладить его, если что-то пошло не так. В Angular есть множество полезных инструментов, которые помогут вам эффективно отлаживать ваше приложение. Walter Kuppens рассказал о нескольких способах отладки. Надеемся, они окажутся полезными в ваших поисках ошибок. 👉 https://www.thisdot.co/blog/debugging-strategies-for-angular-applications

✨ Используем RxJS в Lit Lit создан на основе стандартов Web Components и добавляет реактивность, декларативные шаблоны и несколько продуманных функций, сокращающих количество шаблонов и облегчающих работу. В этой статье мы узнаем, как использовать RxJS с Lit и как они хорошо работают вместе. 👉 https://medium.com/p/ace3d13f3c24

✨ Создаем веб-компоненты с помощью Lit Веб-компоненты позволяют создавать многократно используемые элементы, которые могут использоваться с любым фреймворком или вообще без него. Однако создавать их с нуля проблематично, но мы можем делать быстрые и легкие веб-компоненты с помощью Lit. Netanel Basal показал, как использовать веб-компонент совместно с популярными фреймворками. 👉 https://medium.com/p/3c640a8ba46

✨ Осваиваем CI/CD Деплой вручную — рутинная задача, которая отнимает много времени и чревата ошибками. Сегодня эта практика является антипаттерном. К счастью, современные инструменты позволяют выпускать новые версии вашего приложения легко и просто. Bobby Galli показал, как создать дружественный CI/CD процесс, опубликовать библиотеку в npm и развернуть приложение на GitHub Pages. 👉 https://medium.com/p/be9a1485d22b

✨ Меняем параметры функции на деструктуризацию Функции в JavaScript могут быть разными, но в первую очередь это контракт. Когда мы определяем функцию, мы определяем контракт между вызывающей стороной и исполнителем. JeB Barabanov рассказал, как контракты имеют тенденцию меняться со временем и как это может отразиться на вашем коде. 👉 https://medium.com/p/d320cf0932df

✨ Создаем динамические компоненты В Angular 13 упростили API для создания динамических компонентов, теперь не нужно беспокоиться о создании фабрики, инжектировать вспомогательные зависимости, также устарели классы ComponentFactory и ComponentFactoryResolver. Анастасия Анисимова рассказала как выглядит новый процесс динамического добавления компонентов. 👉 https://habr.com/ru/company/skyeng/blog/652855/

✨ Поднимаем свой уровень в Angular Начать программировать на Angular легко, можно делать небольшие приложения всего за несколько дней обучения. Но чтобы освоить его на хорошем уровне, нужно потратить намного больше времени. Ivano Di Gese попытался обобщить лучшие практики, чтобы ускорить ваш прогресс в освоении Angular. 👉 https://medium.com/p/9c50dccb26a8

✨ Используем GraphQL с Angular GraphQL с каждым днем становится все более востребованным. К счастью в экосистеме Angular есть Apollo Angular, который не требует сложной настройки. Вы можете сразу приступить к созданию приложения. В этом посте Walter Kuppens показал, как легко можно подключиться к PokeAPI используя Apollo Angular. 👉 https://www.thisdot.co/blog/connecting-to-pokeapi-with-angular-and-apollo-client

✨ Разбираем верстку в Angular Из-за отсутствия примеров в документации Angular Material, некоторые разработчики начинают изобретать собственные решения для создания сеток и лейаутов, хотя все это можно реализовать средствами Angular CDK. Александр Серенко на примере макета с тремя вариантами отображения, рассмотрел нюансы верстки в Angular. 👉 https://medium.com/p/bd4f15ebbf54

✨ Перехватываем HTTP запросы Перехватчики позволяют выполнять операции над запросами на пути к серверу и обратно, это делает их идеальным местом для добавления заголовков, кэширования и обработки ошибок. В этой статье рассмотрены различные способы обработки неудачных HTTP запросов с помощью RxJS. 👉 https://dev.to/this-is-angular/angular-error-interceptor-12bg

✨ Понимание RxJS в Angular Одна из самых частых жалоб об Angular, на самом деле относится не к Angular, а скорее к RxJS. Многие говорят, что его слишком сложно изучать. Sam Redmond написал краткое руководством, которое поможет вам понять, как Observables работают в экосистеме Angular. Как только вы поймете RxJS, вы сможете использовать его где угодно. 👉 https://sam-redmond.com/understanding-rxjs-with-angular-40eefeae5c02

✨ Знакомимся с Elf Elf — это реактивный стейт менеджер, построенный на базе RxJS. Он использует кастомные RxJS операторы для запроса состояния и чистые функции для его обновления. Elf поощряет простоту и избавляет от необходимости создавать шаблонный код. Netanel Basal рассказал о новом стейт менеджере, который стремится быть простым и модульным решением. 👉 https://netbasal.com/introducing-elf-a-reactive-store-with-magical-powers-for-js-apps-678d6cb0596f

🚀 Валидируем данные Сложность валидации данных на клиенте зачастую заключается в тесном переплетении правил, которые проверяют данные, и особенностей пользовательского интерфейса. Саша Беспоясов на примере формы «заявки на колонизацию Марса», показал подход, который делает валидацию проще. 👉 https://bespoyasov.ru/blog/declarative-rule-based-validation/

🔥 Управляем состоянием с помощью Akita Существуют различные подходы, с помощью которых можно управлять состоянием в Angular. Akita — это паттерн управления состоянием, основанный на принципах объектно-ориентированного проектирования и RxJS. William Juan показал, как легко применять Akita, и как можно использовать его с Auth0. 👉 https://auth0.com/blog/state-management-in-angular-with-akita-1/

🎉 Анонсирован TypeScript 4.6 RC Когда Daniel Rosenwasser объявлял о выходе бета-версии, то упустил две новые возможности — анализ потока управления для Destructured Discriminated Unions и что --target теперь поддерживает es2022. В остальном команда TS работала над исправлением ошибок и исследовала возможности повышения производительности. В ближайшие две недели будет выпущена стабильная версия TypeScript 4.6. До выхода больше не ожидается никаких изменений. 👉 https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-rc/

🚀 Принципы работы компилятора Angular Компилятор Angular (ngc) — построен на основе компилятора TypeScript и расширяет его функционал. Например, когда вы используете Angular декораторы, ngc распознает их и переводит в более эффективный код. Alex Rickabaugh подробно описал алгоритм работы ngc. 👉 https://blog.angular.io/how-the-angular-compiler-works-42111f9d2549

🔥 Новый способ установки заголовков страниц Часто требуется, чтобы заголовок страницы обновлялся при переходе. В прошлом приходилось делать это вручную, но недавно в 14-й версии Angular Router появилась новая функция, позволяющая настраивать поведение маршрутизатора. Brandon Roberts рассказал, как использовать новую функциональность Angular Router. 👉 https://dev.to/brandontroberts/setting-page-titles-natively-with-the-angular-router-393j