✨ Будущее за standalone
В Angular 14 были представлены standalone-компоненты, которые впервые позволили создавать приложения, не зависящие от NgModules.
Теперь в Angular 19 опция standalone: true будет использоваться по умолчанию для компонентов, директив и пайпов.
👉 https://blog.angular.dev/the-future-is-standalone-475d7edbc706
В Angular 14 были представлены standalone-компоненты, которые впервые позволили создавать приложения, не зависящие от NgModules.
Теперь в Angular 19 опция standalone: true будет использоваться по умолчанию для компонентов, директив и пайпов.
👉 https://blog.angular.dev/the-future-is-standalone-475d7edbc706
👍22🔥6👏4
✨ Получаем тип элемента массива
Вы наверняка встречались со странным синтаксисом
Статья объясняет механизм работы этой конструкции и показывает, как она может быть полезна в различных сценариях.
👉 https://www.totaltypescript.com/get-the-type-of-an-array-element
Вы наверняка встречались со странным синтаксисом
Array[number]
, который позволяет получить тип элемента массива.Статья объясняет механизм работы этой конструкции и показывает, как она может быть полезна в различных сценариях.
👉 https://www.totaltypescript.com/get-the-type-of-an-array-element
👍4🔥2🤡1
✨ Аутентификация по отпечатку пальца и Face ID
Web Authentication API (WebAuthn) — это современный способ улучшить пользовательский опыт, обеспечивая более высокую безопасность и удобство при входе в приложение.
В этом руководстве рассматривается интеграция биометрической аутентификации с Angular с использованием WebAuthn.
👉 https://dev.to/this-is-angular/integrate-fingerprint-and-face-id-authentication-in-your-angular-app-using-webauthn-a-step-by-step-guide-3o2b
Web Authentication API (WebAuthn) — это современный способ улучшить пользовательский опыт, обеспечивая более высокую безопасность и удобство при входе в приложение.
В этом руководстве рассматривается интеграция биометрической аутентификации с Angular с использованием WebAuthn.
👉 https://dev.to/this-is-angular/integrate-fingerprint-and-face-id-authentication-in-your-angular-app-using-webauthn-a-step-by-step-guide-3o2b
👍16👌2❤1👏1
✨ Ваша архитектура как место преступления
Хорошие границы домена помогают сделать систему поддерживаемой в долгосрочной перспективе. Но как определить, жизнеспособна ли изначальная структура?
Статья показывает, что криминалистический анализ, который рассматривает не только текущий код, но и историческое развитие проекта, может выявить скрытые проблемы в архитектуре Angular-приложения. Для этого используется инструмент Detective, основанный на идеях книги Your Code as a Crime Scene.
👉 https://www.angulararchitects.io/en/blog/your-architecture-as-a-crime-scene-forensic-analysis-for-your-angular-solutions/
Хорошие границы домена помогают сделать систему поддерживаемой в долгосрочной перспективе. Но как определить, жизнеспособна ли изначальная структура?
Статья показывает, что криминалистический анализ, который рассматривает не только текущий код, но и историческое развитие проекта, может выявить скрытые проблемы в архитектуре Angular-приложения. Для этого используется инструмент Detective, основанный на идеях книги Your Code as a Crime Scene.
👉 https://www.angulararchitects.io/en/blog/your-architecture-as-a-crime-scene-forensic-analysis-for-your-angular-solutions/
👍5🔥3
✨ Сверхспособности с Директивами и Внедрением Зависимостей
Директивы — самая недооцененная часть Angular. Они предоставляют мощный набор инструментов для выполнения "магии" в шаблонах, но в большинстве проектов они используются в самом простом варианте.
Следующая недооцененная вещь — это внедрение зависимостей (Dependency Injection). Это отличный концепт для создания повторно используемых компонентов, но 95% использования DI в Angular сводится к сервисам.
Сегодня мы изучим, как оба этих концепта можно использовать, чтобы значительно упростить приложения.
👉 https://www.angularspace.com/mega-article-superpowers-with-directives-and-dependency-injection/
Директивы — самая недооцененная часть Angular. Они предоставляют мощный набор инструментов для выполнения "магии" в шаблонах, но в большинстве проектов они используются в самом простом варианте.
Следующая недооцененная вещь — это внедрение зависимостей (Dependency Injection). Это отличный концепт для создания повторно используемых компонентов, но 95% использования DI в Angular сводится к сервисам.
Сегодня мы изучим, как оба этих концепта можно использовать, чтобы значительно упростить приложения.
👉 https://www.angularspace.com/mega-article-superpowers-with-directives-and-dependency-injection/
👍7👏3❤1🔥1
✨ Анонс TypeScript 5.6
Вышел TypeScript 5.6, о beta и RC версиях которого мы уже писали ранее.
В этом релизе не удалось решить проблему с открытием множества связанных проектов, поэтому было возвращено прежнее поведение. Новое поведение для поиска tsconfig.json ожидается в TypeScript 5.7.
👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-6/
Вышел TypeScript 5.6, о beta и RC версиях которого мы уже писали ранее.
В этом релизе не удалось решить проблему с открытием множества связанных проектов, поэтому было возвращено прежнее поведение. Новое поведение для поиска tsconfig.json ожидается в TypeScript 5.7.
👉 https://devblogs.microsoft.com/typescript/announcing-typescript-5-6/
👍1🔥1🤡1
✨ Когда (не) стоит использовать эффекты
Как упоминается в документации Angular, эффекты редко требуются в большинстве приложений, из-за чего возникает некоторая путаница по поводу того, как и когда их применять.
Manfred Steyer постарался осветить эту тему объективно и без эмоций.
👉 https://www.angulararchitects.io/en/blog/when-not-to-use-effects-in-angular-and-what-to-do-instead/
Как упоминается в документации Angular, эффекты редко требуются в большинстве приложений, из-за чего возникает некоторая путаница по поводу того, как и когда их применять.
Manfred Steyer постарался осветить эту тему объективно и без эмоций.
👉 https://www.angulararchitects.io/en/blog/when-not-to-use-effects-in-angular-and-what-to-do-instead/
👍2😱1
✨ Топ-10 ошибок в архитектуре Angular, которых стоит избегать
Команда Angular в последнее время представила множество потрясающих вещей, но они не оказывают особого влияния на архитектуру. Основные архитектурные ошибки по-прежнему остаются вызовом для разработчиков, и их избегание имеет критическое значение для успеха проекта.
Надеемся, вы найдете в этой статье хотя бы пару действенных советов, которые сможете применить на практике.
👉 https://angularexperts.io/blog/top-10-angular-architecture-mistakes
Команда Angular в последнее время представила множество потрясающих вещей, но они не оказывают особого влияния на архитектуру. Основные архитектурные ошибки по-прежнему остаются вызовом для разработчиков, и их избегание имеет критическое значение для успеха проекта.
Надеемся, вы найдете в этой статье хотя бы пару действенных советов, которые сможете применить на практике.
👉 https://angularexperts.io/blog/top-10-angular-architecture-mistakes
👍13🔥3👏2
✨ Разработка веб приложения для поиска авиабилетов
Если вы хотите разобраться в том, как создать приложение на Angular с нуля, то этот цикл статей станет вашим идеальным помощником.
Александр Серенко описал весь процесс создания, начиная с генерации и заканчивая интеграцией с внешним API.
👉 https://dev.to/fafnur/razrabotka-vieb-prilozhieniia-dlia-poiska-aviabilietov-na-angular-18-4clf
Если вы хотите разобраться в том, как создать приложение на Angular с нуля, то этот цикл статей станет вашим идеальным помощником.
Александр Серенко описал весь процесс создания, начиная с генерации и заканчивая интеграцией с внешним API.
👉 https://dev.to/fafnur/razrabotka-vieb-prilozhieniia-dlia-poiska-aviabilietov-na-angular-18-4clf
🔥11👍10❤1
✨ Снова any
Если вы всё ещё используете any, стоит задуматься о его влиянии на качество кода.
В статье разбираются случаи, когда этот тип действительно оправдан, например, при миграции с JavaScript. Однако для повышения безопасности и предсказуемости кода лучше использовать unknown, если точный тип данных неизвестен.
👉 https://habr.com/ru/articles/843116/
Если вы всё ещё используете any, стоит задуматься о его влиянии на качество кода.
В статье разбираются случаи, когда этот тип действительно оправдан, например, при миграции с JavaScript. Однако для повышения безопасности и предсказуемости кода лучше использовать unknown, если точный тип данных неизвестен.
👉 https://habr.com/ru/articles/843116/
🥱5👍3👏1
✨ Рекомендации по настройке VS Code
Как разработчики, мы проводим много времени в редакторе, поэтому важно настроить его по своему вкусу. Правильная настройка — важный шаг для улучшения рабочего процесса.
В статье показано, как, изменив несколько настроек в VS Code, вы сможете сделать свою работу более эффективной и приятной.
👉 https://timdeschryver.dev/blog/my-recommendations-to-configure-visual-studio-code-for-angular-development
Как разработчики, мы проводим много времени в редакторе, поэтому важно настроить его по своему вкусу. Правильная настройка — важный шаг для улучшения рабочего процесса.
В статье показано, как, изменив несколько настроек в VS Code, вы сможете сделать свою работу более эффективной и приятной.
👉 https://timdeschryver.dev/blog/my-recommendations-to-configure-visual-studio-code-for-angular-development
❤🔥6👍5😐2😁1🤡1
✨ RFC: Incremental Hydration
В новом RFC обсуждается добавление функции "Incremental Hydration" в Angular, что позволит улучшить ключевые метрики производительности страниц.
Эта функция будет особенно полезна для больших приложений и страниц с динамическими элементами.
👉 https://github.com/angular/angular/discussions/57664
В новом RFC обсуждается добавление функции "Incremental Hydration" в Angular, что позволит улучшить ключевые метрики производительности страниц.
Эта функция будет особенно полезна для больших приложений и страниц с динамическими элементами.
👉 https://github.com/angular/angular/discussions/57664
👍5👏2
✨ Перенос React компонента в Angular
Во фронтенде существует множество подходов к разработке компонентов, особенно при работе с разными фреймворками, такими как React и Angular.
В статье показаны различия между React и Angular с точки зрения того, как они работают с композицией. Автор делится своим опытом, объясняя, как эффективно адаптировать код, сохраняя его функциональность, и что нужно учитывать при миграции компонентов.
👉 https://nartc.me/blog/port-react-component/
Во фронтенде существует множество подходов к разработке компонентов, особенно при работе с разными фреймворками, такими как React и Angular.
В статье показаны различия между React и Angular с точки зрения того, как они работают с композицией. Автор делится своим опытом, объясняя, как эффективно адаптировать код, сохраняя его функциональность, и что нужно учитывать при миграции компонентов.
👉 https://nartc.me/blog/port-react-component/
😁12🔥7👍3💊3❤1😭1
✨ Увлекательное внедрение зависимостей
Dependency Injection — мощный, но недостаточно используемый инструмент. Он позволяет повторно использовать различные ресурсы, получать доступ к встроенным механизмам, таким как HttpClient, извлекать данные из маршрутизации и многое другое.
Статья рассматривает несколько нестандартных сценариев, которые могут быть улучшены с помощью DI.
👉 https://www.angularspace.com/fascinating-dependency-injection/?ref=angular-space-all-in-one-newsletter
Dependency Injection — мощный, но недостаточно используемый инструмент. Он позволяет повторно использовать различные ресурсы, получать доступ к встроенным механизмам, таким как HttpClient, извлекать данные из маршрутизации и многое другое.
Статья рассматривает несколько нестандартных сценариев, которые могут быть улучшены с помощью DI.
👉 https://www.angularspace.com/fascinating-dependency-injection/?ref=angular-space-all-in-one-newsletter
👍5🔥2👏2
✨ Типы или интерфейсы в TypeScript: что и когда использовать?
При работе с TypeScript многие из нас рано или поздно сталкиваются с вопросом: что выбрать — типы или интерфейсы?
Дмитрий Бердников поделится особенностями их работы, которые помогут сделать правильный выбор.
👉 https://habr.com/ru/articles/844990/
При работе с TypeScript многие из нас рано или поздно сталкиваются с вопросом: что выбрать — типы или интерфейсы?
Дмитрий Бердников поделится особенностями их работы, которые помогут сделать правильный выбор.
👉 https://habr.com/ru/articles/844990/
👍7🔥1🤡1
✨ Определяем неиспользуемые импорты
Одна из наиболее ожидаемых функций с момента введения standalone components — это возможность определять, используется ли компонент или директива, импортированные в компонент.
Новая диагностика выводит предупреждения, предоставляя информацию без блокировки сборки. Это может быть особенно полезно на этапе разработки, позволяя выявлять неиспользуемые импорты на ранних стадиях.
👉 https://netbasal.com/optimize-angular-apps-with-unused-standalone-imports-diagnostic-in-v19-f2e50220c302
Одна из наиболее ожидаемых функций с момента введения standalone components — это возможность определять, используется ли компонент или директива, импортированные в компонент.
Новая диагностика выводит предупреждения, предоставляя информацию без блокировки сборки. Это может быть особенно полезно на этапе разработки, позволяя выявлять неиспользуемые импорты на ранних стадиях.
👉 https://netbasal.com/optimize-angular-apps-with-unused-standalone-imports-diagnostic-in-v19-f2e50220c302
👍13🔥3👏2
✨ Angular для всех: как адаптировать приложения для людей с ограниченными возможностями
Согласно отчету WebAIM (Web Accessibility In Mind) за 2023 год, 96,3% сайтов не соответствуют основным требованиям, необходимым для того, чтобы люди с ограниченными возможностями могли полноценно пользоваться ими.
Хорошая новость заключается в том, что Angular предлагает множество решений и техник в этой области, поэтому нам не нужно обращаться к внешним библиотекам.
👉 https://angular.love/angular-for-everyone-how-to-adapt-applications-for-people-with-disabilities
Согласно отчету WebAIM (Web Accessibility In Mind) за 2023 год, 96,3% сайтов не соответствуют основным требованиям, необходимым для того, чтобы люди с ограниченными возможностями могли полноценно пользоваться ими.
Хорошая новость заключается в том, что Angular предлагает множество решений и техник в этой области, поэтому нам не нужно обращаться к внешним библиотекам.
👉 https://angular.love/angular-for-everyone-how-to-adapt-applications-for-people-with-disabilities
👍7
✨ Host directives: декомпозиция освобождена!
В Angular 15 появилась потрясающая возможность, которую часто упускают из виду — Directive Composition API. Она добавляет новое свойство в декораторы Directive/Component под названием hostDirectives.
В нем вы можете перечислить все отдельные директивы, которые вы хотите автоматически применить к своему компоненту или директиве. Это позволяет вам комбинировать логику любым удобным образом.
Александр Инкин подробно объяснил, насколько эта возможность невероятно мощна.
👉 https://www.angularspace.com/host-directives-decomposition-unleashed/
В Angular 15 появилась потрясающая возможность, которую часто упускают из виду — Directive Composition API. Она добавляет новое свойство в декораторы Directive/Component под названием hostDirectives.
В нем вы можете перечислить все отдельные директивы, которые вы хотите автоматически применить к своему компоненту или директиве. Это позволяет вам комбинировать логику любым удобным образом.
Александр Инкин подробно объяснил, насколько эта возможность невероятно мощна.
👉 https://www.angularspace.com/host-directives-decomposition-unleashed/
👍20🔥6
✨ Использование Storybook с Angular и Vite
Storybook — это отличный инструмент для изолированной разработки и итерации компонентов перед их интеграцией в приложение.
По умолчанию Angular и Storybook используют Webpack, но в Angular уже появилась возможность задействовать Vite, поэтому вы можете быть заинтересованы в его использовании и для других частей вашего проекта.
👉 https://dev.to/brandontroberts/using-storybook-with-angular-and-vite-48ga
Storybook — это отличный инструмент для изолированной разработки и итерации компонентов перед их интеграцией в приложение.
По умолчанию Angular и Storybook используют Webpack, но в Angular уже появилась возможность задействовать Vite, поэтому вы можете быть заинтересованы в его использовании и для других частей вашего проекта.
👉 https://dev.to/brandontroberts/using-storybook-with-angular-and-vite-48ga
❤🔥3👍3
✨ Создание пагинации с помощью Firebase и NgRx SignalStore
Если вы искали простое приложение, которое бы сочетало сигналы, NgRx и Firebase.
Мы нашли небольшое руководство по созданию пагинации, которое поможет улучшить ваши навыки работы с этими инструментами.
👉 https://www.angularspace.com/create-pagination-using-firebase-and-ngrx-signalstore/
Если вы искали простое приложение, которое бы сочетало сигналы, NgRx и Firebase.
Мы нашли небольшое руководство по созданию пагинации, которое поможет улучшить ваши навыки работы с этими инструментами.
👉 https://www.angularspace.com/create-pagination-using-firebase-and-ngrx-signalstore/
👍5👎2