✨ Строим архитектуру Angular-приложений

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

Цель этой статьи – познакомиться с темой построения архитектуры.

👉 https://habr.com/ru/company/simbirsoft/blog/687712/

✨ Создаем подпись в Angular

Canvas создает область, в которой можно рисовать разные объекты, выводить изображения или рисовать графики.

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

👉 https://medium.com/p/7a3eb7e0599d

✨ Жаргон функционального программирования

Функциональное программирование печально известно своим загадочным математическим жаргоном: такие термины, как монады, моноиды, функторы и изоморфизмы, кажутся пугающими. Но если взглянуть на них как на паттерны программирования, все становится гораздо понятнее.

Давайте рассмотрим эти термины, с которыми вы можете столкнуться при использовании FP-библиотек.

👉 https://ybogomolov.me/fp-jargon-part-1/

✨ Перегрузка функций в TypeScript

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

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

👉 https://habr.com/ru/company/otus/blog/688270/

✨ Чистая архитектура во фронтенде

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

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

👉 https://dev.to/alexey_karpov_b8cab9c09ab/clean-architecture-in-frontend-1c77

✨ Реализуем Resolver

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

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

👉 https://indepth.dev/tutorials/angular/indepth-guide-how-to-implement-resolver-in-angular

✨ Дополнительные возможности Angular

Вы наверняка читали миллион статей с похожим названием.

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

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

✨ Ловушка приоритетов Angular Guards

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

Дмитрий Дробышев рассказал о управлении правилами навигации.

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

✨ Декораторы в TypeScript

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

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

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

✨ Передача данных через маршрутизацию

В Angular существует множество методов передачи данных. Используя URL, мы можем сохранять информацию не только на время пользовательской сессии, но и после обновления, в закладках браузера или при передаче ссылки кому-либо еще.

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

👉 https://indepth.dev/tutorials/angular/indepth-guide-to-passing-parameters-via-routing

✨ Ускоряем процесс обучения

С версии 2, Angular прошел долгий путь. За эти годы было добавлено множество возможностей, которые сделали его сложным фреймворком.

Если вы собираетесь изучать Angular, то в этой статье рассказывается о функционале, на который стоит обратить внимание.

👉 https://www.smashingmagazine.com/2022/09/angular-guide/

✨ 5 выводов с ng-conf 2022

ng-conf — крупнейшая в мире конференция по Angular, и в начале сентября этого года она вновь прошла в Солт-Лейк-Сити. Алану посчастливилось выступать на этом мероприятии.

Вот 5 основных выводов, которые он вынес из трехдневной конференции.

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

✨ Нюансы работы с Interceptors

Все HTTP-запросы, которые инициируются HTTP-клиентом, обрабатываются Angular перехватчиками. Это мощная функция, которая позволяет вам добавлять логику во все исходящие запросы.

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

👉 https://timdeschryver.dev/blog/watch-out-what-you-expose-with-angular-interceptors

✨ Лучшие практики RxJS

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

Статья посвящена тому, что нужно и чего нельзя делать, когда речь идет о реактивных приложениях с RxJS в Angular.

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

✨ Делаем анимацию в стиле Dynamic Island

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

Эта статья поможет вам создать анимацию в стиле Dynamic Island.

👉 https://williamjuan.dev/blog/dynamic-island-animations-with-popmotion-in-angular

✨ Принцип открытости-закрытости

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

Если следовать некоторым проверенным принципам проектирования, одним из которых является принцип открытости-закрытости (OCP), то можно создавать программы, которое легко поддерживать, тестировать, понимать и расширять.

👉 https://medium.com/p/34f142b64bc2

✨ Руководство по созданию многократно используемых форм

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

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

👉 https://indepth.dev/tutorials/angular/indepth-guide-for-nested-and-reusable-form

✨ Генерация текста с помощью цепей Маркова

Цепь Маркова — это последовательность событий, в которой наступление каждого события зависит только от предыдущего и не зависит от остальных.

В этом посте Саша Беспоясов реализовал генератор текста на марковских цепях.

👉 https://bespoyasov.ru/blog/text-generation-with-markov-chains/

✨ Настраиваем кнопку в Angular Material

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

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

👉 https://indepth.dev/tutorials/angular/indepth-guide-for-customizing-angular-material-button

✨ Рефакторинг на максималках

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

Книга бесплатная и доступна на Гитхабе.

👉 https://bespoyasov.ru/blog/refactor-like-a-superhero/