✨ Поднимаем свой уровень в 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

✨ Отлаживаем Angular приложения

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

Walter Kuppens рассказал о нескольких способах отладки. Надеемся, они окажутся полезными в ваших поисках ошибок.

👉 https://www.thisdot.co/blog/debugging-strategies-for-angular-applications

✨ Dependency Injection в Angular

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

В этой небольшой статье Chameera Dulanga рассказал о особенностях DI в Angular.

👉 https://medium.com/p/181009608a91

✨ Шпаргалка по уязвимостям

Обеспечение безопасности приложений — непростое занятие. Приложения состоят из логики на стороне сервера и клиента, хранения данных, API и т.д. Учитывая все компоненты, которые необходимо защитить, создание безопасного приложения может показаться сложной задачей.

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

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

✨ Реализуем скелетоны

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

Netanel Basal поделился минимальной реализацией скелетонов с помощью структурных директив.

👉 https://medium.com/p/7490ffdecc1b

✨ Делаем интернационализацию

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

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

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

🔥 Proposal типов в JavaScript

Команда TypeScript предложила добавить в JavaScript синтаксис типов, который движки будут полностью игнорировать, но который могут использовать такие инструменты, как TypeScript, Flow и другие. Это позволит сохранить проверку типов и при этом устранить необходимость в шаге сборки.

Команда считает, что в этом proposal есть большой потенциал, и в этом месяце они выносят его на рассмотрение TC39.

👉 https://devblogs.microsoft.com/typescript/a-proposal-for-type-syntax-in-javascript/

🔥 Будущие диагностики в Angular

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

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

👉 https://medium.com/p/53e2fa19ece9

✨ Оптимизируем приложения Angular

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

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

👉 https://medium.com/p/1e0f70008098

✨ Решаем головоломки на TypeScript

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

В статье показаны несколько интересных приемов, для тех кто не любит использовать any.

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

✨ Создаем плавную прокрутку в Angular

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

Давайте посмотрим, как мы можем реализовать эту функциональность с их помощью.

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

✨ SSR на Angular с помощью Nx

Nx — это умная, быстрая и расширяемая система сборки, которая разработана в Nrwl на основе опыта работы в Google.

В этой статье мы добавим SSR в приложение Angular в рабочем пространстве Nx, используя Angular Universal, который обеспечит рендеринг приложения на сервере.

👉 https://medium.com/p/14e2414ca532

✨ Делаем компоненты общего назначения

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

Ryan Hoffnan рассказал, как мы можем создавать универсальные компоненты, которые легко читать и поддерживать.

👉 https://medium.com/p/33cecd7a7139

✨ Тестируем с помощью Spectator

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

В этом посте показано, как использовать Spectator для тестирования приложений Angular. Надеемся, это поможет вам начать использовать тесты в ваших проектах.

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

✨ Собираем Angular самостоятельно

Обычно для создания проектов Angular применяется angular-cli, который используется для инициализации, разработки и построения приложений из командной строки.

Однако, что если мы не хотим использовать angular-cli, а хотим сами создать структуру папок, подключить нужные библиотеки и собрать проект?

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

✨ Вызываем глобальные функции в Angular

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

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

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