🦊 Angular Fox 🚀 — русскогорящие новости сообщества
3.97K subscribers
1.19K photos
7 videos
1.04K links
Как костыль на реактивно-лисьей тяге 🔥🦊

Нравится канал? Подпишись на меня!
👉 twitter.com/thekiba_ru
💖 twitter.com/thekiba_io
medium.com/@thekiba
github.com/thekiba

Чаты @angular_ru @angular_jobs
Download Telegram
Оптимизируем производительность

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

В этой статье перечислены 9 советов по улучшению производительности ваших Angular приложений.

👉 https://medium.com/p/dbedb0ec4e2d
👍13💩11
Разыгрываем офлайн-билет на HolyJS

Уже на следующей неделе в Санкт-Петербурге пройдет большая конференция по JS-разработке HolyJS. Вас ждут доклады, BoF-сессии, круглые столы, дискуссии со спикерами, живое общение и нетворкинг.

🎉 И мы объявляем розыгрыш офлайн-билета на конференцию

Принять участие в розыгрыше может любой влюбленный в программирование из любого города. Если вы из Питера, то сегодня вам повезло☺️ Если нет — большая часть офлайн-активностей будет транслироваться для тех, кто не смог приехать 😍

Для участия необходимо заполнить форму.

👉 https://forms.gle/nF1TMQDPVD87zMxe8
🔥6👍5👎4
Создаем типизированные формы

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

Эта статья показывает новые возможности форм в Angular 14.

👉 https://medium.com/p/86837965a0e5
👍9
Выбираем архитектуру

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

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

👉 https://medium.com/p/ddde5ca111df
👍8
🦊 Сегодня воскресение, а значит давайте разыграем билет на HolyJs

Я нахожусь в полевых условиях, сделаем это прям сейчас

У вас есть несколько минут, чтобы заполнить форму https://t.me/angular_fox/533
👍1
🎉 Объявляем результаты розыгрыша офлайн-билетика на HolyJS

@Ktpvj, билетик ваш, поздравляем🎉 Организаторы скоро с вами свяжутся😉

HolyJS пройдет 23 июня в Санкт-Петербурге.
Для тех, кто еще не приобрел билет и кому не повезло с госпожой Удачей, решили напомнить, что по промокоду angularfox2022JRGpc у вас еще есть время приобрести билет на конференцию со скидкой.

Программа конференции и билеты — на сайте.

Увидимся в теплом ламповом офлайне
👍7🔥3😁2
Паттерны проектирования в Angular

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

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

👉 https://dev.to/armandotrue/design-patterns-in-angular-part-i-3ld7
👍19🔥5🙏1
Создаем структурные директивы

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

В статье показано, как реализовать пользовательский NgFor.

👉 https://indepth.dev/tutorials/angular/guide-to-repeat-HTML-elements-multiple-times
👍13🔥3
Применяем паттерн адаптер

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

Павел Беликов предложил использовать адаптер для Angular приложений.

👉 https://medium.com/p/3d00582c7156
👍6🤔3🔥2❤‍🔥1
Используем веб-компоненты в Angular

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

Давайте приступим к созданию нашего первого веб-компонента, который мы интегрируем с Angular.

👉 https://medium.com/p/c5d1d7825ca0
👍11
Как Computed Properties в Angular помогают пропускать титры

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

Алексей Охрименко рассказал, какие в KION возникли проблемы в процессе реализации фичи пропуска титров и как их решили с помощью реактивного программирования.

👉 https://habr.com/ru/company/ru_mts/blog/671922/
👍93👎1🔥1
Основы взаимодействия компонентов

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

Давайте рассмотрим несколько способов взаимодействия компонентов.

👉 https://medium.com/p/82fc196f30f9
👍10🤔1
Создаем директиву копирования текста в буфер обмена

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

Давайте создадим директиву, которая упростит нашу работу.

👉 https://medium.com/p/fc1139b9e755
👍10👎2🔥2😁1
Изучаем Angular inject

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

Но что же это такое? Давайте разберемся.

👉 https://medium.com/p/33c6ce8cfd07
👍12🐳4
Управляем доступом с помощью директив

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

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

👉 https://medium.com/p/48f477f69d23
👍14🔥2
Создаем чат

Appwrite — это backend-as-a-service с открытым исходным кодом, который предоставляет набор функций, от взаимодействия с базой данных до аутентификации, и обновлений в реальном времени.

В статье на примере чата показано, как начать работу с Appwrite.

👉 https://dev.to/appwrite/building-a-realtime-chat-application-using-angular-and-appwrite-i3o
👍4
Делаем код более абстрактным

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

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

👉 https://medium.com/p/7b16273658db?sk=752ffb35983f38e82be8e45759371ed4
👍10🔥2