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

✨ Учимся работать с inject

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

В статье на примерах показано, почему функция inject такая замечательная.

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

✨ Работаем с GraphQL в Angular

Apollo Angular — это сверхгибкий клиент GraphQL для Angular, позволяющий добавить его в уже существующее приложение и начать использовать GraphQL только для части пользовательского интерфейса.

В статье описан быстрый способ его настройки.

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

✨ Настраиваем CI/CD

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

В этой статье объяснена концепция непрерывной интеграции, на примере Angular и GitLab.

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

✨ Руководство по миграции на новый Firebase API

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

Благодаря этим изменениям наши приложения могут быть более легковесными и работать быстрее.

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

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

Всплывающие окна стали распространенной особенностью веб-приложений. Не так давно для их создания мы полагались на библиотеки компонентов. С появлением HTML-элемента dialog, все может измениться.

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

👉 https://medium.com/p/277ea7f96da1

✨ Создаем свои Pipes

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

В этой статье мы изучим пользовательские pipes в Angular.

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

✨ Динамические переводы

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

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

👉 https://medium.com/p/5eeed8466696

✨ Осваиваем Utility Types

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

В статье разобраны 15 наиболее используемых утилит.

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

✨ Используем проекцию контента

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

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

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

✨ Ленивая загрузка в Angular

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

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

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

✨ Типизированные формы

Многие уже знакомы с типизированными формами, которые появились в новом релизе Angular, они позволяют указывать явные типы.

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

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

🔥 Новости e2e-тестирования в Angular

В Angular 12 была добавлена поддержка трех популярных фреймворков для e2e-тестирования: Cypress, Nightwatch и WebdriverIO.

Основываясь на обратной связи с сообществом, команда Angular решила отказаться от использования Protractor, одновременно работая над поддержкой для проектов, которые хотят продолжать его использовать.

В Angular 16, который ожидается летом 2023 года, будет опубликован последний релиз Protractor.

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

Live stream finished (9 minutes)

Начинаем розыгрыш билетов Podlodka Crew

Если вы еще не подали заявку на участие, то можете сделать это здесь

Нажмите, чтобы присоединиться к стриму

Live stream started

Live stream scheduled for Aug 14, 2022 at 17:00

🔥 Розыгрыш четырех билетов на Podlodka Frontend Crew

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

Для участия необходимо:
💖 Любить фронтенд
👉 Ответить на несколько вопросов

Конференция состоится 15 - 19 августа.

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

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

✨ Дополнительные техники для производительности

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

Александр Шатилов собрал их в виде справочника.

👉 https://medium.com/p/4e30a097ee32

✨ Добавляем темы в приложение

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

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

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

✨ Используем AsyncPipe

AsyncPipe — это один из инструментов, которые Angular предоставляет, чтобы облегчить нам жизнь. Он автоматически подписывается на Observable и отписывается, избегая утечек памяти.

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

👉 https://medium.com/p/714dd864adaa