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

✨ В чем разница между markForCheck и detectChanges? Время от времени, разрабатывая сложные веб-приложения с помощью Angular, мы задумываемся о повышении производительности. Либо мы вынуждены это делать, потому что нас не устраивает производительность и это негативно сказывается на пользовательском опыте, либо мы действуем проактивно и используем стратегию OnPush с самого начала, чтобы избежать рефакторинга в дальнейшем. В этой статье подробно объяснено, как работает обнаружение изменений под капотом или в чем разница между стратегиями Default и OnPush. 👉 https://medium.com/p/fff4e5f54d34

✨ Разница между any и unknown Типы any и unknown — это два примитивных типа в TypeScript, которые иногда могут пригодиться. Any отключает проверку типов и TypeScript не сможет обеспечить безопасность, поэтому лучше избегать его использования, а unknown является типобезопасным аналогом any. Эта статья позволяет разобраться в их отличиях. 👉 https://medium.com/p/1fff4bf232a

✨ Делаем простой и компактный стартер Angular Стартовый шаблон по умолчанию, который получается из команды ng new в Angular CLI, может быть немного пугающим для новичков. В этой статье показывается, как следуя принципу YAGNI, можно создать более компактный и простой шаблон, который будет понятен даже новичкам. 👉 https://dev.to/angular/a-simpler-and-smaller-angular-starter-with-nglite-1ooh

Приглашаем на новый сезон онлайн-конференции Podlodka Crew! Старт уже 15 августа! 🧰 Тема сезона — тулинг — инструменты, облегчающие жизнь фронтендеру 🧰 Мы вместили максимум пользы в 5 сессионных дней. В этом сезоне мы расскажем: 🛠 как подбирать под задачу и создавать собственные инструменты кодогенерации 🛠 как ускорять рефакторинг с помощью кодмодов 🛠 как упрощать код и уменьшать его количество 🛠 как определять, какие сборщики полезны и какие сложности возникнут при переезде 🛠 как поддерживать актуальность запросов и ответов бэкэнда 🛠 находить больше пользы в OpenAPI схемах Вас будет ждать море практики! 🤓 👨‍🔧 Александр Илатовский, Frontend Engineer, в своём воркшопе покажет как вручную писать интерфейсы для запросов и ответов от бэкэнда и зачем это нужно. 👨‍🔧 Илья Горский, Frontend Engineer из HeadHunter, покажет как рефакторить код с помощью кодмодов и писать собственные моды под конкретную задачу. 👨‍🔧 Анатолий Кабанов, разработчик из Perforce, продемонстрирует как использовать библиотеку Redux в приложениях на примере RTK Query. Научит уменьшать количество кода и заменять его простым и эффективным. Купить билет можно уже сейчас у нас на сайте со скидкой для ранних птичек! С нетерпением ждем на борту!

✨ Новый способ управления подписками Управление подписками — неприятная проблема, когда речь заходит об использовании RxJS с Angular. Трудно представить, сколько времени разработчики тратят на то, чтобы их приложения не имели утечек памяти. Недавно вышла 14-я версия Angular, и в ней появилось несколько новых функций. Одна из них позволила создать новый способ управления подписками. 👉 https://medium.com/p/f74ef79a8ffc

✨ HolyJS возвращается! В ноябре JUG Ru Group организует конференцию для JavaScript‑разработчиков — HolyJS 2022. В программе — технические доклады и дискуссии о языках, архитектуре, графике, фреймворках и инструментах. Есть интересные кейсы? Тогда подавайте заявку на выступление. Программный комитет поможет с подготовкой к выступлению: назначит персонального куратора, проведет ревью материала и организует репетиции. Выбирайте тему выступления на сайте или предлагайте свои идеи — их обязательно рассмотрят. Всем спикерам JUG Ru Group дарит билет на все конференции сезона в онлайне и офлайне. 👉 Билеты можно купить здесь.

✨ Функциональное программирование в TypeScript Функциональный стиль программирования был представлен Джоном Бэкусом в компании IBM в 1978 году, но до сих пор остается в значительной степени непонятым. Сегодня мы можем легко использовать функциональное программирование в TypeScript. В этой серии статей мы разберемся, что такое функциональное программирование и как оно появилось. 👉 https://medium.com/p/18ac096bb551

✨ Полное руководство по Interceptors Перехватчики в Angular являются одной из интереснейших особенностей, к тому же они способствуют чистоте кода. Вы пишете несколько строк кода в одном месте, а они применяют его глобально к каждому HTTP-запросу и ответу. В этой статье мы изучим перехватчики в Angular, поймем что это такое и как они работают. 👉 https://medium.com/p/7294e2317ecf

✨ Защищаем веб-приложение Существует множество статей о веб-безопасности. Но некоторые из них уже неактуальны, или написаны для традиционных веб-приложений с серверным рендерингом. В этой серии статей рассказывается о проблемах веб-безопасности, о которых должны знать все разработчики, с акцентом на одностраничные приложения. 👉 https://dev.to/oktadev/defend-your-spa-from-security-woes-1fg2

✨ Реализуем Pokedex с помощью AngularFire AngularFire упрощает внедрении Firebase SDK, и стремится обеспечить привычный опыт для Angular разработчиков. В этом руководстве вы узнаете, как создать CRUD-приложение Pokedex, используя Angular 14, Firestore и новый AngularFire. 👉 https://medium.com/p/2d6980dcc091

✨ Сортируем элементы с помощью Drag & Drop Нередко в разработке интерфейсов попадаются требования связанные с Drag and Drop: загрузка изображений, управление списками задач или сортировка элементов. К счастью, команда Angular реализовала библиотеку, позволяющую легко реализовать этот функционал. 👉 https://www.thisdot.co/blog/angular-cdk-sorting-items-using-drag-and-drop

✨ Пишем плохой код Когда заходит разговор о улучшении навыков программирования, чаще всего звучат советы: прочитать чистый код, изучить паттерны проектирования, посмотреть чужие проекты. Но есть другой способ — пойти от обратного, и попробовать написать код максимально плохо. По мнению автора статьи, написав плохой код можно понять, как писать хороший. Пожалуйста не пробуйте эти советы в рабочих проектах. Мы не несем никакой ответственности за любой причиненный ущерб. 👉 https://habr.com/ru/post/678204/

✨ Управление точками останова Точки останова чаще всего создаются с помощью CSS. Однако как быть, если нужно прослушивать их для выполнения изменений в вашем приложении? Это может потребоваться для настройки сторонних компонентов или обработки событий. К счастью, Angular поставляется с BreakpointObserver, который идеально подходит для таких сценариев. 👉 https://www.thisdot.co/blog/how-to-manage-breakpoints-using-breakpointobserver-in-angular

✨ Продвинутый TypeScript Сопоставление типов и другие сложные техники позволяют нам типизировать код гораздо строже. С другой стороны, это обычно нетривиально и добавляет много дополнительных накладных расходов. В этой статье, на примере работы с несколькими языками, продемонстрированы продвинутые возможности TypeScript. 👉 https://medium.com/p/b5d023bd6539

✨ Пользовательские операторы RxJS Библиотека RxJS поставляется с богатым набором операторов, которые способны решить большинство проблем, возникающих при работе с потоками. Тем не менее, существуют ситуации, когда возможность создания новых пользовательских операторов может пригодиться. 👉 https://medium.com/p/da8443a89c3a

✨ Внешние конфигурации Классический способ добавления конфигураций из файла окружения. Таким образом, если у нас есть два окружения, вам нужно будет сделать две сборки. Внешние конфигурации позволяют создавать несколько пользовательских конфигураций для одного и того же исходного кода. В этой статье рассмотрены несколько способов загрузки внешней конфигурации, подводные камни и возможные решения. 👉 https://indepth.dev/posts/1502/external-configurations-in-angular

✨ Разбираемся с реактивностью Существует множество способов реактивного кода в Angular, от двустороннего связывания до продвинутого RxJS. Некоторые команды предпочитают не иметь единой стратегии, а позволить каждому разработчику самостоятельно придумать самый простой способ разработки каждой функции, адаптируя сложность решения к сложности проблемы. В этой серии статей рассматривается, как можно сохранить декларативность кода по мере реализации более сложного функционала. 👉 https://dev.to/this-is-angular/progressive-reactivity-in-angular-1d40

✨ Предотвращаем утечки памяти JavaScript язык программирования высокого уровня. В отличие от низкоуровневых языков, таких как C или C++, разработчику не нужно выделять и освобождать память в явном виде. Сборщик мусора берет на себя эту ответственность. Однако сборщику мусора нужны подсказки, должны ли определенные объекты существовать в памяти. В этой статье рассказывается о наиболее распространенных источниках утечек памяти в приложениях на JavaScript и Angular. 👉 https://medium.com/p/5b83eb361b82

✨ Проверяем ответы сервера Обычно бэкенд проверяет входные данные, но для фронтенда проверки применяются не всегда, хотя они могут пригодиться, чтобы получать уведомления о любых несоответствиях, которых мы не ожидаем. В статье показывается, как валидировать входящие данные на соответствие контракту, с помощью zod. 👉 https://timdeschryver.dev/blog/why-we-should-verify-http-response-bodies-and-why-we-should-use-zod-for-this

✨ Разбираемся с ошибками Как правило, мы стараемся избегать ошибок, и это особенно актуально для начинающих разработчиков. Но, на самом деле, ошибки являются неотъемлемой частью процесса разработки и даже могут быть нашими друзьями. В статье рассмотрено, как можно обрабатывать ошибки в Angular, как различать их типы, а также когда применять пользовательские ошибки. 👉 https://dev.to/this-is-angular/errors-and-angular-n0b