✨ Создаем видеочат

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

В статье Александр Шатилов рассказывает о построении видеоконференций на базе Angular, WebRTC и Openvidu.

👉 https://habr.com/ru/company/europlan/blog/595731/

🦄 Taiga UI: год в Open Source

Taiga UI — это библиотека компонентов на Angular. Она разрабатывалась несколько лет, перед тем как выйти в публичный доступ. Open Source помог сформировать сообщество, благодаря идеям и помощи которого были расширили возможности кастомизации и локализации.

С тех пор прошел год, и Александр Инкин подводит итоги и делится планами на будущее.

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

✨ Разбираемся в type

В TypeScript обычно можно обойтись объявлением типов через interface, но иногда пригождается и type. С его помощью можно писать утилиты, которые выполняются при анализе кода и расширяют возможности языка.

Павел Дымков рассказал про type, не касаясь интерфейсов. Однако, эта тема интереснее, чем может показаться, и наверняка вы найдете что-то новое для себя.

👉 https://habr.com/ru/post/648805/

✨ Изучаем Module Federation в Angular

В последнее время ведется много дискуссий о микрофронтендах. Они позволяют разделить огромную кодовую базу на более мелкие части и поручить каждую часть отдельной команде. Подобная реализация раньше требовала множество трюков. К счастью, Module Federation упрощает эту задачу.

Manfred Steyer с помощью простых примеров показал, как применять Module Federation с Angular.

👉 https://auth0.com/blog/micro-frontends-with-angular-module-federation-and-auth0/

🔥 Новый способ установки заголовков страниц

Часто требуется, чтобы заголовок страницы обновлялся при переходе. В прошлом приходилось делать это вручную, но недавно в 14-й версии Angular Router появилась новая функция, позволяющая настраивать поведение маршрутизатора.

Brandon Roberts рассказал, как использовать новую функциональность Angular Router.

👉 https://dev.to/brandontroberts/setting-page-titles-natively-with-the-angular-router-393j

🚀 Принципы работы компилятора Angular

Компилятор Angular (ngc) — построен на основе компилятора TypeScript и расширяет его функционал. Например, когда вы используете Angular декораторы, ngc распознает их и переводит в более эффективный код.

Alex Rickabaugh подробно описал алгоритм работы ngc.

👉 https://blog.angular.io/how-the-angular-compiler-works-42111f9d2549

🎉 Анонсирован 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/

🔥 Управляем состоянием с помощью Akita

Существуют различные подходы, с помощью которых можно управлять состоянием в Angular. Akita — это паттерн управления состоянием, основанный на принципах объектно-ориентированного проектирования и RxJS.

William Juan показал, как легко применять Akita, и как можно использовать его с Auth0.

👉 https://auth0.com/blog/state-management-in-angular-with-akita-1/

🚀 Валидируем данные

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

Саша Беспоясов на примере формы «заявки на колонизацию Марса», показал подход, который делает валидацию проще.

👉 https://bespoyasov.ru/blog/declarative-rule-based-validation/

✨ Знакомимся с Elf

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

Netanel Basal рассказал о новом стейт менеджере, который стремится быть простым и модульным решением.

👉 https://netbasal.com/introducing-elf-a-reactive-store-with-magical-powers-for-js-apps-678d6cb0596f

✨ Понимание RxJS в Angular

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

Sam Redmond написал краткое руководством, которое поможет вам понять, как Observables работают в экосистеме Angular. Как только вы поймете RxJS, вы сможете использовать его где угодно.

👉 https://sam-redmond.com/understanding-rxjs-with-angular-40eefeae5c02

✨ Перехватываем HTTP запросы

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

В этой статье рассмотрены различные способы обработки неудачных HTTP запросов с помощью RxJS.

👉 https://dev.to/this-is-angular/angular-error-interceptor-12bg

✨ Разбираем верстку в Angular

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

Александр Серенко на примере макета с тремя вариантами отображения, рассмотрел нюансы верстки в Angular.

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

✨ Используем 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 легко, можно делать небольшие приложения всего за несколько дней обучения. Но чтобы освоить
его на хорошем уровне, нужно потратить намного больше времени.

Ivano Di Gese попытался обобщить лучшие практики, чтобы ускорить ваш прогресс в освоении Angular.

👉 https://medium.com/p/9c50dccb26a8

✨ Создаем динамические компоненты

В Angular 13 упростили API для создания динамических компонентов, теперь не нужно беспокоиться о создании фабрики, инжектировать вспомогательные зависимости, также устарели классы ComponentFactory и ComponentFactoryResolver.

Анастасия Анисимова рассказала как выглядит новый процесс динамического добавления компонентов.

👉 https://habr.com/ru/company/skyeng/blog/652855/

✨ Меняем параметры функции на деструктуризацию

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

JeB Barabanov рассказал, как контракты имеют тенденцию меняться со временем и как это может отразиться на вашем коде.

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

✨ Осваиваем CI/CD

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

Bobby Galli показал, как создать дружественный CI/CD процесс, опубликовать библиотеку в npm и развернуть приложение на GitHub Pages.

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

✨ Создаем веб-компоненты с помощью Lit

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

Netanel Basal показал, как использовать веб-компонент совместно с популярными фреймворками.

👉 https://medium.com/p/3c640a8ba46

✨ Используем RxJS в Lit

Lit создан на основе стандартов Web Components и добавляет реактивность, декларативные шаблоны и несколько продуманных функций, сокращающих количество шаблонов и облегчающих работу.

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

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