✨ Тестируем компоненты
В Angular когда вы создаете новый компонент с помощью cli, то создается файл spec и в нем описан отличный способ быстро начать тестировать, но существую и другие подходы к тестированию компонентов.
В этой статье Michael Seemann размышляет о том, как мы пишем компонентные тесты для Angular приложений.
👉 https://medium.com/p/64d07d226bff
В Angular когда вы создаете новый компонент с помощью cli, то создается файл spec и в нем описан отличный способ быстро начать тестировать, но существую и другие подходы к тестированию компонентов.
В этой статье Michael Seemann размышляет о том, как мы пишем компонентные тесты для Angular приложений.
👉 https://medium.com/p/64d07d226bff
👍8🤬1
✨ Создаем пользовательские директивы
Если вы используете Angular, вы, вероятно, знакомы с популярными структурными директивами *ngIf и *ngFor, но есть ли в вашем коде пользовательские директивы?
Tim Deschryver показал, как можно изменить поведение сторонних библиотек, не имея доступа к коду компонента.
👉 https://timdeschryver.dev/blog/use-angular-directives-to-extend-components-that-you-dont-own
Если вы используете Angular, вы, вероятно, знакомы с популярными структурными директивами *ngIf и *ngFor, но есть ли в вашем коде пользовательские директивы?
Tim Deschryver показал, как можно изменить поведение сторонних библиотек, не имея доступа к коду компонента.
👉 https://timdeschryver.dev/blog/use-angular-directives-to-extend-components-that-you-dont-own
👍6❤2
✨ Готовимся к появлению Standalone Components
Поскольку Standalone Components самодостаточны и не нуждаются в NgModules, приложения становятся более легковесными. И возникает вопрос, как подготовить существующие решения к будущему без модулей?
В этой статье Manfred Steyer показал четыре пути, как это сделать.
👉 https://www.angulararchitects.io/en/aktuelles/4-ways-to-prepare-for-angulars-upcoming-standalone-components/
Поскольку Standalone Components самодостаточны и не нуждаются в NgModules, приложения становятся более легковесными. И возникает вопрос, как подготовить существующие решения к будущему без модулей?
В этой статье Manfred Steyer показал четыре пути, как это сделать.
👉 https://www.angulararchitects.io/en/aktuelles/4-ways-to-prepare-for-angulars-upcoming-standalone-components/
👍13
✨ Строим Micro Frontend архитектуру
Поскольку с течением времени веб становится все более сложным, микро-фронтенды приобретают большую популярность, так как позволяют разрабатывать приложения отдельными командами.
В этой статье мы совместно с Денисом Манило создадим приложение с микро-фронтенд архитектурой.
👉 https://habr.com/ru/company/auriga/blog/659199/
Поскольку с течением времени веб становится все более сложным, микро-фронтенды приобретают большую популярность, так как позволяют разрабатывать приложения отдельными командами.
В этой статье мы совместно с Денисом Манило создадим приложение с микро-фронтенд архитектурой.
👉 https://habr.com/ru/company/auriga/blog/659199/
👍11🔥2
✨ Обрабатываем деревья
Если поискать, то можно найти древовидные структуры повсюду — от природы, городов и их окрестностей до вашего семейного древа. Неудивительно, что деревья так же часто встречаются в структурах данных.
В этой серии уроков, мы с Робом Гравель будем преобразовывать сложное дерево в более простое, а затем обратно.
👉 https://www.htmlgoodies.com/javascript/recursive-tree-node-angular/
Если поискать, то можно найти древовидные структуры повсюду — от природы, городов и их окрестностей до вашего семейного древа. Неудивительно, что деревья так же часто встречаются в структурах данных.
В этой серии уроков, мы с Робом Гравель будем преобразовывать сложное дерево в более простое, а затем обратно.
👉 https://www.htmlgoodies.com/javascript/recursive-tree-node-angular/
👍8
🔥 Новости о Standalone Components
Недавно команда Angular опубликовала RFC, с амбициозной целью: сократить количество шаблонов и сделать Angular проще в использовании и изучении.
На этой неделе выпустили второй RFC, в котором обсуждается, как Standalone Components будут интегрированы в остальную часть Angular.
Alex Rickabaugh рассказал об обновлении проекта, о некоторых извлеченных уроках, и о ближайшем будущем.
👉 https://medium.com/p/ea53b4d55214
Недавно команда Angular опубликовала RFC, с амбициозной целью: сократить количество шаблонов и сделать Angular проще в использовании и изучении.
На этой неделе выпустили второй RFC, в котором обсуждается, как Standalone Components будут интегрированы в остальную часть Angular.
Alex Rickabaugh рассказал об обновлении проекта, о некоторых извлеченных уроках, и о ближайшем будущем.
👉 https://medium.com/p/ea53b4d55214
🔥12👍2
🦄 Осваиваем RxJS
У RxJS отличная документация, в которой немного теории и его легко понять с помощью marble diagrams, а еще лучше изучать его на практике.
Эта статья посвящена советам и подсказкам, которые помогут вам в разработке на Angular.
👉 https://medium.com/p/afd9fbdc4d31
У RxJS отличная документация, в которой немного теории и его легко понять с помощью marble diagrams, а еще лучше изучать его на практике.
Эта статья посвящена советам и подсказкам, которые помогут вам в разработке на Angular.
👉 https://medium.com/p/afd9fbdc4d31
👍14🔥7
✨ Стилизуем компоненты
Существуют различные подходы к стилизации компонентов. Angular вдохновлен основными концепциями веб-компонентов. Поэтому он использует идеи из Shadow DOM.
В работе часто требуется применять различные стили к компонентам в зависимости от условий. Как мы можем сделать это, не переписывая стили?
👉 https://medium.com/p/3eb9794bf86f
Существуют различные подходы к стилизации компонентов. Angular вдохновлен основными концепциями веб-компонентов. Поэтому он использует идеи из Shadow DOM.
В работе часто требуется применять различные стили к компонентам в зависимости от условий. Как мы можем сделать это, не переписывая стили?
👉 https://medium.com/p/3eb9794bf86f
👍9🔥3
✨ CSS-in-JS в Angular
CSS-in-JS пользуется популярностью в React сообществе, большинство решений изначально разрабатывались для него. В Angular и Vue он не популярен, но существуют и framework agnostic библиотеки.
Всеволод Золотов скрестил CSS-in-JS с Angular, на примере приложения для учета времени, и проверил насколько актуален этот подход.
👉 https://habr.com/ru/company/bimeister/blog/659273/
CSS-in-JS пользуется популярностью в React сообществе, большинство решений изначально разрабатывались для него. В Angular и Vue он не популярен, но существуют и framework agnostic библиотеки.
Всеволод Золотов скрестил CSS-in-JS с Angular, на примере приложения для учета времени, и проверил насколько актуален этот подход.
👉 https://habr.com/ru/company/bimeister/blog/659273/
👍13👎3🔥3
✨ Результаты опроса разработчиков
В начале года команда Angular провела ежегодный опрос разработчиков, получив почти 25 тысяч ответов. На их основе разрабатывается документация, расставляются приоритеты и составляется план развития.
Minko Gechev рассказал о результатах опроса и как они соотносятся с дорожной картой Angular.
👉 https://medium.com/p/38e653cbb36b
В начале года команда Angular провела ежегодный опрос разработчиков, получив почти 25 тысяч ответов. На их основе разрабатывается документация, расставляются приоритеты и составляется план развития.
Minko Gechev рассказал о результатах опроса и как они соотносятся с дорожной картой Angular.
👉 https://medium.com/p/38e653cbb36b
👍12
🔥 Пишем компилятор
Хотели ли вы когда-нибудь написать свой собственный компилятор? Теперь у вас появился отличный повод попробовать, на примере программы на TypeScript, которая компилирует переданную строку вымышленного кода в WebAssembly и выполняет ее отрисовку в canvas.
Надеемся вам понравится статья и вы узнаете немного больше о том, как работают wasm и компиляторы.
👉 https://habr.com/ru/company/timeweb/blog/660607/
Хотели ли вы когда-нибудь написать свой собственный компилятор? Теперь у вас появился отличный повод попробовать, на примере программы на TypeScript, которая компилирует переданную строку вымышленного кода в WebAssembly и выполняет ее отрисовку в canvas.
Надеемся вам понравится статья и вы узнаете немного больше о том, как работают wasm и компиляторы.
👉 https://habr.com/ru/company/timeweb/blog/660607/
👍8🔥7
📡 Улучшаем SEO
Если зайти в чат для поиска работы и присмотреться к вакансиям, то почти не найти в них Scully. Возможно из-за ассоциаций с секретными материалами? Давайте приоткроем завесу тайны.
Scully — это генератор статических сайтов для Angular, который использует все его возможности, но при этом дает преимущества в SEO, а это может оказать огромное влияние на компанию, увеличив количество продаж.
В этой статье мы узнаем, как улучшить SEO в Angular приложениях с помощью Scully, а также развернем статический сайт на Firebase.
👉 https://indepth.dev/tutorials/angular/angular-applications-seo-improvement-with-social-media-customization
Если зайти в чат для поиска работы и присмотреться к вакансиям, то почти не найти в них Scully. Возможно из-за ассоциаций с секретными материалами? Давайте приоткроем завесу тайны.
Scully — это генератор статических сайтов для Angular, который использует все его возможности, но при этом дает преимущества в SEO, а это может оказать огромное влияние на компанию, увеличив количество продаж.
В этой статье мы узнаем, как улучшить SEO в Angular приложениях с помощью Scully, а также развернем статический сайт на Firebase.
👉 https://indepth.dev/tutorials/angular/angular-applications-seo-improvement-with-social-media-customization
👍7🔥4
🚀 Запускаем ISR
Вы наверняка слышали о SSR — рендеринге на стороне сервера, SSG — генерации статических сайтов и CSR — рендеринге на стороне клиента. Что тогда ISR и какую проблему он решает?
ISR — это как SSG, но во время выполнения. С помощью ISR при первом запросе создается страница на сервере, сохраняется в кэше и отдается пользователям, а кэш обновляется через время или по требованию.
👉 https://medium.com/p/42b0a8440e53
Вы наверняка слышали о SSR — рендеринге на стороне сервера, SSG — генерации статических сайтов и CSR — рендеринге на стороне клиента. Что тогда ISR и какую проблему он решает?
ISR — это как SSG, но во время выполнения. С помощью ISR при первом запросе создается страница на сервере, сохраняется в кэше и отдается пользователям, а кэш обновляется через время или по требованию.
👉 https://medium.com/p/42b0a8440e53
🔥8👍3🤔1
✨ Ищем применение materialize и dematerialize операторам
Если вы давно знакомы с RxJS, то наверняка встречали операторы materialize и dematerialize. А как насчет класса Notification? Они встречаются довольно редко, но могут быть вам полезны.
В этой статье Анастасия Анисимова рассказала о этих операторах и описала несколько способов применения, которые вам могут пригодиться.
👉 https://habr.com/ru/company/skyeng/blog/661709/
Если вы давно знакомы с RxJS, то наверняка встречали операторы materialize и dematerialize. А как насчет класса Notification? Они встречаются довольно редко, но могут быть вам полезны.
В этой статье Анастасия Анисимова рассказала о этих операторах и описала несколько способов применения, которые вам могут пригодиться.
👉 https://habr.com/ru/company/skyeng/blog/661709/
👍13❤2🔥2
✨ Настраиваем новый проект
Линтеры и git hooks необходимы как для личных, так и для корпоративных проектов. Они способны существенно облегчить разработку, предотвращая типичные ошибки.
Цель этой статьи — упростить создание проекта и начало работы над ним, не тратя время на настройку.
👉 https://medium.com/p/6581ecd66fbb
Линтеры и git hooks необходимы как для личных, так и для корпоративных проектов. Они способны существенно облегчить разработку, предотвращая типичные ошибки.
Цель этой статьи — упростить создание проекта и начало работы над ним, не тратя время на настройку.
👉 https://medium.com/p/6581ecd66fbb
👍19👎2
✨ Сценарии использования RxJS
Существует множество статей и курсов, которые помогут изучить RxJS. Но знания функциональности недостаточно, чтобы по-настоящему использовать возможности реактивного программирования необходимо осознавать сценарии, в которых могут применяться инструменты из набора RxJS.
В этой статье рассмотрены возможности RxJS, которые сделают ваш код более чистым, удобным и читаемым.
👉 https://dev.to/this-is-angular/understanding-rxjs-use-cases-part-i-2mfb
Существует множество статей и курсов, которые помогут изучить RxJS. Но знания функциональности недостаточно, чтобы по-настоящему использовать возможности реактивного программирования необходимо осознавать сценарии, в которых могут применяться инструменты из набора RxJS.
В этой статье рассмотрены возможности RxJS, которые сделают ваш код более чистым, удобным и читаемым.
👉 https://dev.to/this-is-angular/understanding-rxjs-use-cases-part-i-2mfb
👍17🔥5🤔2
✨ Создаем многократно используемые компоненты
Одна из особенностей Angular — это компонентная природа фреймворка. Компоненты — это блоки для построения масштабируемых приложений. Однако иногда одних компонентов недостаточно.
В этой статье показаны два способа создания многократно используемых компонентов. Оба решения являются масштабируемыми и исключают дублирование кода.
👉 https://medium.com/p/b7fcba2f5f38
Одна из особенностей Angular — это компонентная природа фреймворка. Компоненты — это блоки для построения масштабируемых приложений. Однако иногда одних компонентов недостаточно.
В этой статье показаны два способа создания многократно используемых компонентов. Оба решения являются масштабируемыми и исключают дублирование кода.
👉 https://medium.com/p/b7fcba2f5f38
👍8🔥3
✨ Плюсы и минусы TypeScript
Выразительность TypeScript позволяет делать умопомрачительные вещи. Вы можете не просто сказать, что функция вернет какое-то значение, а описать, что конкретно она будет возвращать даже для частных случаев.
С другой стороны, высокая выразительность TypeScript подводит нас к очень важной идее: типовая система — это язык программирования. И к его использованию применяются соответствующие требования, как к обычному коду.
👉 https://habr.com/ru/company/oleg-bunin/blog/660683/
Выразительность TypeScript позволяет делать умопомрачительные вещи. Вы можете не просто сказать, что функция вернет какое-то значение, а описать, что конкретно она будет возвращать даже для частных случаев.
С другой стороны, высокая выразительность TypeScript подводит нас к очень важной идее: типовая система — это язык программирования. И к его использованию применяются соответствующие требования, как к обычному коду.
👉 https://habr.com/ru/company/oleg-bunin/blog/660683/
👍7
✨ Реализуем прогресс бар
Когда мы сталкиваемся с новой задачей, важно рассмотреть все варианты и решить уместно ли добавлять зависимость в проект? Возможно, функционал легко реализуем и следует сделать его самостоятельно.
Создать собственный круглый прогресс бар не так уж и сложно, всего лишь немного CSS и SVG.
👉 https://medium.com/p/ae6299e86bc7
Когда мы сталкиваемся с новой задачей, важно рассмотреть все варианты и решить уместно ли добавлять зависимость в проект? Возможно, функционал легко реализуем и следует сделать его самостоятельно.
Создать собственный круглый прогресс бар не так уж и сложно, всего лишь немного CSS и SVG.
👉 https://medium.com/p/ae6299e86bc7
👍12
✨ HolyJS — конференция для JavaScript-разработчиков от JUG Ru Group
Online-часть: 8–10 июня.
Offline-день: 23 июня.
В online вас ждут выступления, посвященные трендам и новым технологиям, обмен опытом и общение в чатах.
На offline-дне в Санкт-Петербурге можно вживую послушать спикеров, лично познакомиться с коллегами и потусоваться у стендов партнеров.
В программе:
– Каким бывает легаси во фронтенде, как с ним справляться и не допускать его появления.
– Что такое proposal Wasm GC, почему его так долго делают и какой путь прошли движки за 2 года экспериментов.
– Как построить дизайн-систему для продукта с 20-миллионной аудиторией, огромной кодовой базой и массой поверхностей.
– Что такое сложность для человеческого мозга и как эти знания помогают писать более понятный код.
Для подписчиков канала организаторы сделали промокод, который поможет вам купить персональный билет со скидкой:
Online-часть: 8–10 июня.
Offline-день: 23 июня.
В online вас ждут выступления, посвященные трендам и новым технологиям, обмен опытом и общение в чатах.
На offline-дне в Санкт-Петербурге можно вживую послушать спикеров, лично познакомиться с коллегами и потусоваться у стендов партнеров.
В программе:
– Каким бывает легаси во фронтенде, как с ним справляться и не допускать его появления.
– Что такое proposal Wasm GC, почему его так долго делают и какой путь прошли движки за 2 года экспериментов.
– Как построить дизайн-систему для продукта с 20-миллионной аудиторией, огромной кодовой базой и массой поверхностей.
– Что такое сложность для человеческого мозга и как эти знания помогают писать более понятный код.
Для подписчиков канала организаторы сделали промокод, который поможет вам купить персональный билет со скидкой:
angularfox2022JRGpc
👉 Билеты, подробности и первая программа — на сайте.👍8👎6🔥2