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

✨ Осваиваем связанные типы в TypeScript

Связанные типы — это удобная функция TypeScript, которая позволяет применять DRY. Однако, поскольку они находятся на грани между программированием и метапрограммированием, поначалу их бывает трудно понять.

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

👉 https://blog.logrocket.com/mastering-mapped-types-typescript/

✨ Micro-Frontends в Angular

Современные веб-приложения становятся все более крупными и сложными и иногда разрабатываются несколькими командами. Как управлять разными командами, разными сроками выпуска, если у вас один репозиторий?

В этом посте рассмотрены преимущества и недостатки микросервисной архитектуры.

👉 https://blog.devgenius.io/angular-micro-frontend-4dad619c4277

✨ Упрощаем себе работу с Enums в TypeScript

Работая над несколькими проектами, построенными на TypeScript, Олег Барановский заметил общие функции, которые приходилось переносить из проекта в проект. Поэтому он решил собрать их вместе и поделиться тем, что получилось.

В этой статье рассмотрены 8 функций, которые будут полезны при работе с Enums.

👉 https://obaranovskyi.medium.com/top-7-functions-youll-ever-need-to-work-with-enums-in-typescript-d8a75a445f2b

Сегодня в 9 вечера по Москве с KirJS разберем долгожданный RFC для типизированных форм: https://github.com/angular/angular/discussions/44513

🔥Прочитаем RFC и комменты
🔥Потыкаем результат

👀 Посмотреть: twitch.tv/kirjs | youtu.be/tIpIVg99O64
✉️ Обсудить в чате: https://t.me/kirjs_ru_chat/43407

🗣 Пообщаться голосом: twitch.tv/kirjs

🚀 RFC строго типизированных реактивных форм

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

Команда Angular открыла обсуждение строго типизированных форм и создала RFC. Цель этого RFC — подтвердить дизайн с помощью сообщества, и дать возможность экспериментировать с помощью прототипа.

👉 https://blog.angular.io/typed-forms-the-rfc-is-here-53263e792c89

✨ Полное руководство по директиве ngFor в Angular

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

Директива NgFor — это мощная техника для визуализации нескольких элементов. Она предоставляет множество полезных дополнительных возможностей, о которых рассказано в статье.

👉 https://indepth.dev/tutorials/angular/complete-guide-to-ngfor-directive

✨ 5 лучших техник на TypeScript

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

Надеемся эта статья откроет для вас несколько новых приемов.

👉 https://obaranovskyi.medium.com/top-5-techniques-in-typescript-to-bring-your-code-to-the-next-level-6f20be543b39

✨ Прекращение поддержки AngularJS

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

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

👉 https://blog.angular.io/discontinued-long-term-support-for-angularjs-cc066b82e65a

🔥 Как не нужно изучать TypeScript

Изучение TypeScript, даже в 2022 году, может быть затруднительным. Люди, которые пишут на Java или C# обнаруживают, что все работает не так, как они привыкли. Люди, которые работают на JavaScript пугаются, когда на них кричит компилятор.

Stefan Baumgartner рассказал о частых ошибках новичков в TypeScript. Надеемся, они окажутся полезными для вас.

👉 https://fettblog.eu/how-not-to-learn-typescript/

✨ Как использовать скелетоны в Angular?

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

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

👉 https://blog.angulartraining.com/how-to-use-a-skeleton-loader-with-angular-4f03ae8fa5c6

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

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

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

👉 https://javascript.plainenglish.io/create-your-own-angular-component-library-e5f062b902a8

🔥 Создаем клон TikTok с помощью Angular

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

Больше никаких скучных учебников, только красивые, реальные примеры, изучайте Micro Frontend, создавая TikTok.

👉 https://javascript.plainenglish.io/building-beautiful-tiktok-clone-with-angular-and-micro-frontend-part-1-bdd189425695

✨ Проектирование архитектуры Angular

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

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

👉 https://indepth.dev/posts/1478/designing-angular-architecture-container-presentation-pattern

🚀 Портфолио на Jamstack

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

В этом уроке вы создадите портфолио и блог с помощью Angular 11 и Scully.

👉 https://www.digitalocean.com/community/tutorials/how-to-build-a-jamstack-portfolio-with-angular-11-and-scully

✨ Опыт создания мобильных приложений на Ionic/Angular

Ionic — это набор инструментов пользовательского интерфейса для создания мобильных и настольных приложений с использованием HTML, CSS и JavaScript, а также с интеграцией с популярными фреймворками, как Angular.

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

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

✨ WebSockets в Angular

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

В этом туториале рассказывается, как реализовать сервис для взаимодействия через WebSocket API.

👉 https://indepth.dev/tutorials/angular/how-to-implement-websockets-in-angular-project

✨ Angular Pipes: Полное руководство

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

В этой руководстве рассматриваются важные концепции, необходимые для понимания Angular Pipes.

👉 https://indepth.dev/tutorials/angular/angular-pipes-complete-guide

✨ Меню с использованием динамических данных

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

Сначала изучим основы Angular Material Menu и узнаем, как отобразить вложенное меню с помощью статичного HTML-шаблона.

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

👉 https://indepth.dev/tutorials/angular/angular-material-nested-menu-dynamic-data

✨ Порядок операторов в RxJS

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

Вербило Александр разобрал варианты последовательностей в RxJS, показал типичные ошибки в них и как валидировать их порядок.

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

✨ Как использовать ngx-formly в Angular

Как часто вы создаете формы? Приходила ли вам идея улучшить этот процесс? Ngx-formly — это библиотека динамических форм для Angular, которая поможет вам легко реализовать формы и добавлять к ним специфическую валидацию.

В этой статье вы узнаете, как использовать, настраивать и кастомизировать ngx-formly.

👉 https://indepth.dev/tutorials/angular/how-to-use-ngx-formly-with-angular