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

✨ Итерация по объекту в TypeScript

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

Stefan Baumgartner рассказал как TypeScript старается спасти ваш код от ошибок.

👉 https://fettblog.eu/typescript-iterating-over-objects/

✨ Стилизуем вложенные компоненты

По умолчанию у Angular компонентов включена инкапсуляция стилей. Это очень удобно, не нужно следить за уникальностью селекторов, но иногда требуется применить стили к элементам внутри вложенного компонента.

Игорь Мотовилов рассмотрел три варианта стилизации компонентов.

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

✨ TechTrain 2022 Spring — бесплатный онлайн-фестиваль для всех разработчиков

Дата: 14 мая
Начало — в 11:45 (Мск, GMT+3)

Сезон конференций от JUG Ru Group традиционно начинается с TechTrain. В программе — 8 докладов по разным направлениям: технологии видео и стриминга, тестирование, .NET, мобильная разработка, JavaScript, параллельные и распределенные системы, Java, C++.

В рамках JavaScript-направления будет доклад «Electron + Node.js = ❤️».

👉 Подробности и регистрация — на сайте фестиваля.

Кстати, конференция по JavaScript, HolyJS пройдет 8 — 10 июня. Напоминаем вам промокод, с ним можно купить персональный билет дешевле: angularfox2022JRGpc

👉 Подробности на сайте.

✨ Кэшируем данные с помощью RxJS

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

RxJS предоставляет нам простой способ создания кэша и его хранения. Операторы share и shareReplay, позволяют не запрашивать данные каждый раз.

👉 https://dev.to/this-is-angular/how-caching-data-in-angular-with-rxjs-27mj

✨ Лучшие практики в NgRx

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

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

👉 https://medium.com/p/6c837fb14877

✨ Стилизуем проецируемый контент

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

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

👉 https://medium.com/p/731c0721902f

✨ Разрабатываем пакетный менеджер

Вам когда-нибудь хотелось узнать, как под капотом работают пакетные менеджеры для установки зависимостей наподобие npm или yarn? Если хотелось, тогда эта статья для вас.

Игорь Агапов разработал простой пакетный менеджер на Node.js и TypeScript.

👉 https://habr.com/ru/company/timeweb/blog/662830/

✨ Изучаем операторы в RxJS

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

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

👉 https://dev.to/this-is-learning/understanding-rxjs-use-cases-part-ii-51ll

✨ Осваиваем NestJS

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

Игорь Агапов опираясь на структуру и содержание официальной документации рассмотрел основы работы с Nest.

👉 https://habr.com/ru/company/timeweb/blog/663234/

✨ Angular Universal в e-commerce проектах

Про Angular Universal написано довольно много, но мало примеров настройки в больших e-commerce проектах, где есть свои нюансы.

Дмитрий Дружков рассказал, чем полезен Angular Universal в e-commerce проектах, как выбрать вид рендеринга и как выглядит первоначальная настройка.

👉 https://habr.com/ru/company/utkonos/blog/663518/

✨ HolyJS — конференция для JavaScript-разработчиков от JUG Ru Group

Online-часть: 8–10 июня.
Offline-день: 23 июня.

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

В программе:
– Каким бывает легаси во фронтенде, как с ним справляться и не допускать его появления.
– Что такое proposal Wasm GC, почему его так долго делают и какой путь прошли движки за 2 года экспериментов.
– Как построить дизайн-систему для продукта с 20-миллионной аудиторией, огромной кодовой базой и массой поверхностей.
– Что такое сложность для человеческого мозга и как эти знания помогают писать более понятный код.

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

👉 Билеты, подробности и первая программа — на сайте.

✨ Реализуем прогресс бар

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

Создать собственный круглый прогресс бар не так уж и сложно, всего лишь немного CSS и SVG.

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

✨ Плюсы и минусы TypeScript

Выразительность TypeScript позволяет делать умопомрачительные вещи. Вы можете не просто сказать, что функция вернет какое-то значение, а описать, что конкретно она будет возвращать даже для частных случаев.

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

👉 https://habr.com/ru/company/oleg-bunin/blog/660683/

✨ Создаем многократно используемые компоненты

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

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

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

✨ Сценарии использования RxJS

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

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

👉 https://dev.to/this-is-angular/understanding-rxjs-use-cases-part-i-2mfb

✨ Настраиваем новый проект

Линтеры и git hooks необходимы как для личных, так и для корпоративных проектов. Они способны существенно облегчить разработку, предотвращая типичные ошибки.

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

👉 https://medium.com/p/6581ecd66fbb

✨ Ищем применение materialize и dematerialize операторам

Если вы давно знакомы с RxJS, то наверняка встречали операторы materialize и dematerialize. А как насчет класса Notification? Они встречаются довольно редко, но могут быть вам полезны.

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

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

🚀 Запускаем ISR

Вы наверняка слышали о SSR — рендеринге на стороне сервера, SSG — генерации статических сайтов и CSR — рендеринге на стороне клиента. Что тогда ISR и какую проблему он решает?

ISR — это как SSG, но во время выполнения. С помощью ISR при первом запросе создается страница на сервере, сохраняется в кэше и отдается пользователям, а кэш обновляется через время или по требованию.

👉 https://medium.com/p/42b0a8440e53

📡 Улучшаем SEO

Если зайти в чат для поиска работы и присмотреться к вакансиям, то почти не найти в них Scully. Возможно из-за ассоциаций с секретными материалами? Давайте приоткроем завесу тайны.

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

В этой статье мы узнаем, как улучшить SEO в Angular приложениях с помощью Scully, а также развернем статический сайт на Firebase.

👉 https://indepth.dev/tutorials/angular/angular-applications-seo-improvement-with-social-media-customization

🔥 Пишем компилятор

Хотели ли вы когда-нибудь написать свой собственный компилятор? Теперь у вас появился отличный повод попробовать, на примере программы на TypeScript, которая компилирует переданную строку вымышленного кода в WebAssembly и выполняет ее отрисовку в canvas.

Надеемся вам понравится статья и вы узнаете немного больше о том, как работают wasm и компиляторы.

👉 https://habr.com/ru/company/timeweb/blog/660607/