✨💖 Встречайте — Angular 9 и Ivy

Ivy включен по умолчанию в 9 версии, поэтому предлагаю ознакомиться с кратким перечнем того, что было сделано:

💖 Меньший размер бандла
✨ Улучшенное тестирование
✨ Улучшенный дебаг
✨ Улучшенная статическая типизация
✨ Улучшенное отображение ошибок
✨ Улучшенное время сборки,
по умолчанию включен AOT
✨ Улучшенная интернационализация

😁 Убедитесь, что вы используете Angular CLI v9.0.1. В последнем патче исправлена регрессия, которая случилась в последней версии.

👉 https://blog.angular.io/version-9-of-angular-now-available-project-ivy-has-arrived-23c97b63cfa3

✨👩🏻‍🚀 Загрузка файлов с помощью RxJS

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

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

🦄 NgRuAir — сегодня в 20:00

На прошлой неделе состоялся долгожданный релиз Angular 9 и Angular Ivy. Сегодня вместе с вами поговорим про производительность и изменения фреймворка, и узнаем, все ли хорошо с этим.

👉 https://youtu.be/_XY1xyEyr6I

✨🦊 Лис теперь GDE

Я очень рад анонсировать, что я теперь Google Developer Expert по Angular и Веб-технологиям! А это значит, что совсем скоро опубликую историю о собственном опыте, которая наверняка будет вам интересна.

💖 И выражаю огромную благодарность каждому! А если у вас есть твиттер, то буду очень рад вашему лайку.

👉 https://twitter.com/thekiba_io/status/1227618348869079040?s=20

✨🚀 Lazy Loading компонентов в Angular 9

Ленивая загрузка компонентов, это одно из главных улучшений в Angular Ivy. Теперь это делается проще, чем раньше. А вместо NgComponentOutlet вы можете использовать @ngxd/core, который еще сильнее упростит работу с компонентами и сделает все биндинги автоматически.

👉 https://netbasal.com/e76f0ee2854a

🚀🦊 Lazy Components: связываем Input и Output

Если вы еще не подписаны на мой twitter, то вы могли пропустить пример с Lazy Dynamic Components с использованием @ngxd/core для Angular 9.

💖 Простой, как NgComponentOutlet
✨ Автоматически биндит Input и Output
✨ Поддерживает Lazy Components

👉 https://twitter.com/thekiba_io/status/1230076631722659841?s=20

🍚🦊 Кир и Лис ищут ассистента

Мы программисты, и активно занимаемся развитием Angular сообщества в России и в Мире.

Лис: https://twitter.com/thekiba_io
Кир: https://twitter.com/kirjs

Последнее время мы испытываем проблемы с нехваткой времени. Поэтому сейчас подыскиваем себе ассистента(-тку), для выполнения небольших поручений.

Если у вас есть друг или подруга, которому(-ой) может подойти такой вариант подработки, то, пожалуйста, расскажите ей или ему об этом предложении.

👉 https://forms.gle/AKQgTKe6wAtFS8ok8

✨👩‍🚒 Главная проблема AsyncPipe

Initial Null Problem: это неочевидная особенность работы с асинхронными данными. Разбираемся в механизмах реализации AsyncPipe и решаем его главную проблему на этапе инициализации.

👉 https://indepth.dev/initial-null-problem-of-asyncpipe-and-async-data-binding/

✨🧜‍♀️ Dependency Injection изнутри

С приходом Ivy некоторые вещи в реализации декоратора @Injectable() изменились. Давайте посмотрим, что улучшилось, и разберемся в поведении Angular на стадии сборки приложения.

👉 https://indepth.dev/a-deep-dive-into-injectable-and-providedin-in-ivy/

✨😻 Как сделать утечку памяти в Angular

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

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

✨🦄 Как эффективно работать из дома

Возможно, в скором времени какие-то компании попробуют и успешно перейдут на удалённую работу.

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

💖 Как организовать свою работу
✨ Как подготовить рабочее место
✨ Как взаимодействовать с командой
✨ Что делать, если вас отвлекают дома

👉 https://vc.ru/hr/111879-rabota-iz-doma-rukovodstvo-dlya-specialista

✨🍁 Использование environments в Angular

Добавляем, изменяем и настраиваем переменные окружения, а также разбираемся, какие из них генерируются Angular CLI по умолчанию.

👉 https://indepth.dev/becoming-an-angular-environmentalist/

✨🦊 RxJS — как сделать свой оператор

💡 Вам когда-нибудь приходилось использовать оператор distinctUntilChanged() из RxJS, чтобы проверить объект на изменения по определенным ключам?

😻 Если да, то попробуйте этот потрясающий оператор distinctUntilKeysChanged()!

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

👉 https://twitter.com/thekiba_io/status/1240921016718647297?s=20

✨🚀 Использование Intersection Observer API с RxJS в Angular

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

👉 https://medium.com/p/23d81312f178

✨🚀 Angular Ru Air — cегодня в 20.00

В этом выпуске мы расскажем про Angular Codelab — инструмент для интерактивного обучения Angular.

👉 https://youtu.be/h9lGLpvKeFI

✨💖 Новая версия Angular 9.1 уже доступна

Краткий список исправлений и улучшений:
💖 Добавлена поддержка TypeScript 3.8
✨ Улучшена производительность ngcc
✨ В CLI добавлена опция --displayBlock
✨ Поддержка grep в e2e тестах
✨ Поддержка Right to Left locales
✨ Поддержка TSLint 6.1 по умолчанию

Чтобы обновиться, достаточно выполнить следующую команду:
ng update @angular/cli @angular/core

👉 https://blog.angular.io/version-9-1-of-angular-now-available-typescript-3-8-faster-builds-and-more-eb292f989428

✨🌳 Создание icon library в Angular

Разбираемся в различных подходах к созданию иконок для приложения а также оптимизируем существующие при помощи Tree Shaking.

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

🏡🦊 Оставайся дома, если есть возможность

Если вы приняли решение остаться дома, то предлагаю вам поделиться этим с окружающими вас людьми.

💖 Как это сделать
☝️ Откройте настройки Telegram
✌️ Добавьте эмоджи 🏡 к своему имени
🖐 Сохраните изменения

Как открыть панель с emoji на macOS и Windows, можно посмотреть тут: https://t.me/angular_fox/76

🐾 Держу за всех вас лапки!

✨👾 Angular сообщество теперь в Discord

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

💖 В Discord вы найдете единомышленников чтобы
✨ детально обсудить вопрос по Angular
✨ провести мастер класс по Angular
✨ поделиться своим опытом по Angular
✨ позавтракать вместе с сообществом
✨ альтернатива для тех, кто не любит писать
✨ выпить пивка и пофлеймить

Будем ждать вас в Discord. Присоединяйтесь!

👉 https://discord.gg/GWBZgDE

✨🦊 Material Theme UI: Material Oceanic

Вы когда-нибудь хотели освежить свою любимую IDE? Тогда попробуйте Material Oceanic, которую я использую уже продолжительное время!

💖 Как установить
✨ откройте Plugins
✨ установите Material Theme UI
✨ выберите Material Oceanic
✨ выберите Contrast Mode

Так вы сможете получить такую же тему, как у меня! 😻

👉 https://plugins.jetbrains.com/plugin/8006-material-theme-ui

🦊🧩 RxJS Puzzle от Лиса

Руководителям крупнейшей корпорации срочно требуется твоя помощь! Компания понесет огромные убытки, если не починить код в срок.

💖 Ты можешь
✨ использовать только объявленные импорты
✨ изменять код там, где это разрешено
✨ задать любой вопрос в @angular_ru

Сможешь ли ты спасти компанию от банкротства? Да прибудет с тобой сырочек 🧀🐁

👉 https://stackblitz.com/edit/rxjs-forkjoin-exercise-001