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

✨ Делаем интернет магазин Редко можно найти описание процесса создания Angular приложения, начиная с определения предметной области и заканчивая тестированием. К счастью, Александр Серенко недавно опубликовал цикл статей о создании интернет магазина. В котором реализованы: список товаров, корзина, чат, локализация, SEO, SSR и даже UI Kit. 👉 https://medium.com/p/9bc18c25fe37

✨ Опыт миграции на Nx Команда Santosh Yadav закончила переход на Nx с Angular CLI в прошлом году, и это была одна из самых больших реструктуризаций, которую они провели. В этом посте рассказано о том, почему они решили это сделать и что в итоге получилось. 👉 https://dev.to/this-is-angular/why-and-how-we-migrated-to-nx-from-angular-cli-5a61

✨ Разбираем стилизацию компонентов в Angular В Angular стили компонентов могут быть инкапсулированы. Существует три различных стратегии инкапсуляции: None, Emulated и ShadowDom. Две последние позволяют нам писать масштабируемые стили, которые не просачиваются и не влияют на остальную часть нашего приложения. Но в чем разница между ними? Давайте узнаем! 👉 https://medium.com/p/9b2c81546b85

✨ Вызываем глобальные функции в Angular В большинстве приложений мы сталкиваемся с функциональностью, которую хотим запустить глобально. В этот момент мы часто задумываемся о том, откуда ее вызывать. Netanel Basal рассказал, как не позволить глобальным функциям загромоздить ваши приложения. 👉 https://medium.com/p/d013faa71a

✨ Собираем Angular самостоятельно Обычно для создания проектов Angular применяется angular-cli, который используется для инициализации, разработки и построения приложений из командной оболочки. Однако, что если мы не хотим использовать angular-cli, а хотим сами создать структуру папок, подключить нужные библиотеки и собрать проект? 👉 https://habr.com/ru/post/656529/

✨ Тестируем с помощью Spectator Spectator — это мощный инструмент для упрощения тестов Angular. Он поможет вам избавиться от всей грязной работы, оставив вам читабельные, гладкие и оптимизированные модульные тесты. В этом посте показано, как использовать Spectator для тестирования приложений Angular. Надеемся, это поможет вам начать использовать тесты в ваших приложениях. 👉 https://medium.com/p/a125c95cf24b

✨ Делаем компоненты общего назначения Вы наверное замечали, что со временем требования к компонентам растут, и в результате их сложность увеличивается, а сопровождаемость снижается. Мы мечтаем о многократном использовании, но на деле разрабатываем компоненты для конкретного случая, и в результате они не могут быть использованы повторно. Ryan Hoffnan рассказал, как мы можем создавать универсальные компоненты, которые легко читать и поддерживать. 👉 https://medium.com/p/33cecd7a7139

✨ SSR на Angular с помощью Nx Nx — это умная, быстрая и расширяемая система сборки, которая разработана в Nrwl на основе опыта работы в Google. В этой статье мы добавим SSR в приложение Angular в рабочем пространстве Nx, используя Angular Universal, который обеспечит рендеринг приложения на сервере. 👉 https://medium.com/p/14e2414ca532

✨ Создаем плавную прокрутку в Angular Представим, что у нас есть панель навигации для разделов страницы и нам надо реализовать прокрутку к нужному разделу. Стандартным решением было бы использование якорей, но можно применить директивы. Давайте посмотрим, как мы можем реализовать эту функциональность с их помощью. 👉 https://medium.com/p/a657e0ea9699

✨ Решаем головоломки на TypeScript Вы любите головоломки? В большинстве случаев достаточно базовых возможностей TypeScript, но иногда приходится описывать нестандартные типы и тогда приходится решать головоломки. К счастью, в TS есть все необходимые инструменты для этого. В статье показаны несколько интересных приемов, для тех кто не любит использовать any. 👉 https://habr.com/ru/post/655705/

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

🔥 Будущие диагностики в Angular Команда Angular представила список идей для диагностик. Вы можете проголосовать за понравившиеся и если у вас есть идея для расширенной диагностики, которой нет списке, можно подать запрос на ее разработку. Возможно, в долгосрочной перспективе будет реализована поддержка сторонних диагностик, авторами которых является сообщество. 👉 https://medium.com/p/53e2fa19ece9

🔥 Proposal типов в JavaScript Команда TypeScript предложила добавить в JavaScript синтаксис типов, который движки будут полностью игнорировать, но который могут использовать такие инструменты, как TypeScript, Flow и другие. Это позволит сохранить проверку типов и при этом устранить необходимость в шаге сборки. Команда считает, что в этом proposal есть большой потенциал, и в этом месяце они выносят его на рассмотрение TC39. 👉 https://devblogs.microsoft.com/typescript/a-proposal-for-type-syntax-in-javascript/

✨ Делаем интернационализацию Обычно все переводы загружаются сразу, но неизвестно будет ли пользователь пользоваться всеми доступными функциями. Так зачем же загружать переводы с самого начала для модулей, которые еще не загружены? В этой статье вы узнаете, как адаптировать ваше приложение к нескольким языкам модульным способом, на основе библиотеки ngx/translate. 👉 https://medium.com/p/d8c13a67117b

✨ Реализуем скелетоны Скелетоны — это элементы-заполнители, которые отображаются перед загрузкой содержимого веб-страницы. Скелетоны передают визуальное впечатление о функции, что дает им преимущество перед спиннерами. Netanel Basal поделился минимальной реализацией скелетонов с помощью структурных директив. 👉 https://medium.com/p/7490ffdecc1b

✨ Шпаргалка по уязвимостям Обеспечение безопасности приложений — непростое занятие. Приложения состоят из логики на стороне сервера и клиента, хранения данных, API и т.д. Учитывая все компоненты, которые необходимо защитить, создание безопасного приложения может показаться сложной задачей. К счастью, большинство уязвимостей имеют одни и те же корни. Изучив причины их возникновения и способы их обнаружения, можно научиться защищать свои приложения. 👉 https://medium.com/p/a3b36f22a0fd

✨ Dependency Injection в Angular Внедрение зависимостей — это паттерн проектирования, в котором мы запрашиваем зависимости у внешних ресурсов, а не создаем их. Это уникальная особенность Angular, которая помогает разработчикам избежать ненужных хлопот в их коде. В этой небольшой статье Chameera Dulanga рассказал о особенностях DI в Angular. 👉 https://medium.com/p/181009608a91

✨ Отлаживаем Angular приложения При знакомстве с новым фреймворком или библиотекой важно знать, как отладить его, если что-то пошло не так. В Angular есть множество полезных инструментов, которые помогут вам эффективно отлаживать ваше приложение. Walter Kuppens рассказал о нескольких способах отладки. Надеемся, они окажутся полезными в ваших поисках ошибок. 👉 https://www.thisdot.co/blog/debugging-strategies-for-angular-applications

✨ Используем RxJS в Lit Lit создан на основе стандартов Web Components и добавляет реактивность, декларативные шаблоны и несколько продуманных функций, сокращающих количество шаблонов и облегчающих работу. В этой статье мы узнаем, как использовать RxJS с Lit и как они хорошо работают вместе. 👉 https://medium.com/p/ace3d13f3c24

✨ Создаем веб-компоненты с помощью Lit Веб-компоненты позволяют создавать многократно используемые элементы, которые могут использоваться с любым фреймворком или вообще без него. Однако создавать их с нуля проблематично, но мы можем делать быстрые и легкие веб-компоненты с помощью Lit. Netanel Basal показал, как использовать веб-компонент совместно с популярными фреймворками. 👉 https://medium.com/p/3c640a8ba46