🔥 Функции TypeScript, которые следует избегать
TypeScript — это сложный язык, который значительно эволюционировал с течением времени. Как и в случае с любым зрелым языком, приходится принимать сложные решения о том, какие функции использовать, а какие избегать.
В этой статье перечислены четыре функции TypeScript, которые ее авторы рекомендуют избегать, но в зависимости от ваших обстоятельств, могут быть веские причины для их использования.
👉 https://www.executeprogram.com/blog/typescript-features-to-avoid
TypeScript — это сложный язык, который значительно эволюционировал с течением времени. Как и в случае с любым зрелым языком, приходится принимать сложные решения о том, какие функции использовать, а какие избегать.
В этой статье перечислены четыре функции TypeScript, которые ее авторы рекомендуют избегать, но в зависимости от ваших обстоятельств, могут быть веские причины для их использования.
👉 https://www.executeprogram.com/blog/typescript-features-to-avoid
👎19👍7
🎉 Angular v13.2 уже здесь
Нововведения:
— Поддержка optional chaining в шаблонах
— Дополнительные опции в FormControl
— Расширенная диагностика
Так же добавили более умные предупреждения и помощь в раннем обнаружении простых ошибок.
👉 https://github.com/angular/angular/releases/tag/13.2.0
Нововведения:
— Поддержка optional chaining в шаблонах
— Дополнительные опции в FormControl
— Расширенная диагностика
Так же добавили более умные предупреждения и помощь в раннем обнаружении простых ошибок.
👉 https://github.com/angular/angular/releases/tag/13.2.0
🎉21👍3
🦊 Лис разрушает мифы про Angular
Очень часто вижу, что люди задаются таким вопросом: «А правда ли то, что Angular сложный, тяжелый и трудно поддерживаемый фреймворк?» или «Что проще выучить новичку: Angular или React?»
Это хорошие вопросы, которые ставят многих разработчиков в тупик.
На стриме, который состоится через неделю — 3 февраля, расскажу на примерах, что на самом деле такое Angular.
Зарегистрироваться можно здесь.
👉 https://youtu.be/ZHvQv34WKlk
Очень часто вижу, что люди задаются таким вопросом: «А правда ли то, что Angular сложный, тяжелый и трудно поддерживаемый фреймворк?» или «Что проще выучить новичку: Angular или React?»
Это хорошие вопросы, которые ставят многих разработчиков в тупик.
На стриме, который состоится через неделю — 3 февраля, расскажу на примерах, что на самом деле такое Angular.
Зарегистрироваться можно здесь.
👉 https://youtu.be/ZHvQv34WKlk
🔥32
⭐️ Реализация GitHub с помощью Angular
Команда This Dot Labs создала клон интерфейса GitHub, чтобы дать сообществу проект, демонстрирующий возможности Angular, с открытым исходным кодом в качестве учебного пособия.
Проект нуждается в доработке. Если вы новичок в Angular и хотите получить отзыв о своем коде. Можете сделать pull request с вашими изменениями, и они с радостью рассмотрят его и дадут обратную связь.
👉 https://www.thisdot.co/blog/announcing-angular-github-clone-for-starter-dev-showcases
Команда This Dot Labs создала клон интерфейса GitHub, чтобы дать сообществу проект, демонстрирующий возможности Angular, с открытым исходным кодом в качестве учебного пособия.
Проект нуждается в доработке. Если вы новичок в Angular и хотите получить отзыв о своем коде. Можете сделать pull request с вашими изменениями, и они с радостью рассмотрят его и дадут обратную связь.
👉 https://www.thisdot.co/blog/announcing-angular-github-clone-for-starter-dev-showcases
🔥16👍9🤩1
🔥 Новая диагностика в Angular
Наверное, каждому программисту знакомо разочарование, когда приходится тратить часы на отладку, чтобы в конце концов обнаружить, что какая-то крошечная деталь, например, скобка, была пропущена.
В последнем выпуске Angular v13.2 добавлена новая замечательная функция. Она называется расширенная диагностика. Давайте рассмотрим ее подробнее.
👉 https://kevinkreuzer.medium.com/angular-extended-diagnostics-bee0400727ec
Наверное, каждому программисту знакомо разочарование, когда приходится тратить часы на отладку, чтобы в конце концов обнаружить, что какая-то крошечная деталь, например, скобка, была пропущена.
В последнем выпуске Angular v13.2 добавлена новая замечательная функция. Она называется расширенная диагностика. Давайте рассмотрим ее подробнее.
👉 https://kevinkreuzer.medium.com/angular-extended-diagnostics-bee0400727ec
🔥13👍5
✨ Настраиваем Tailwind CSS в Angular
Tailwind CSS — это CSS-фреймворк с хорошей функциональностью из коробки и высоким уровнем персонализации. С момента своего появления он привлек к себе много внимания, и он хороший вариант, когда речь идет о стилизации наших приложений.
В этой статье рассматривается, как можно использовать Tailwind CSS с Angular.
👉 https://blog.nrwl.io/set-up-tailwind-css-with-angular-in-an-nx-workspace-6f039a0f4479
Tailwind CSS — это CSS-фреймворк с хорошей функциональностью из коробки и высоким уровнем персонализации. С момента своего появления он привлек к себе много внимания, и он хороший вариант, когда речь идет о стилизации наших приложений.
В этой статье рассматривается, как можно использовать Tailwind CSS с Angular.
👉 https://blog.nrwl.io/set-up-tailwind-css-with-angular-in-an-nx-workspace-6f039a0f4479
👍8🔥3
✨ Тестируем компоненты по новому
Component Harness — это способ тестирования компонентов, который позволяет убрать зависимость тестов от внутренней реализации компонента: разработчикам предоставляется специальный API, который упрощает взаимодействие с компонентом и DOM. Идея такого подхода возникла из шаблона PageObject.
Давайте разберемся на примерах, как можно самостоятельно реализовать Component Harness для своих компонентов.
👉 https://kevinkreuzer.medium.com/how-to-write-component-harnesses-in-angular-8dbcccf2bf0e
Component Harness — это способ тестирования компонентов, который позволяет убрать зависимость тестов от внутренней реализации компонента: разработчикам предоставляется специальный API, который упрощает взаимодействие с компонентом и DOM. Идея такого подхода возникла из шаблона PageObject.
Давайте разберемся на примерах, как можно самостоятельно реализовать Component Harness для своих компонентов.
👉 https://kevinkreuzer.medium.com/how-to-write-component-harnesses-in-angular-8dbcccf2bf0e
👍9🔥5
✨ Создаем видеочат
С появлением WebRTC позволяющего делать видеозвонки в браузере, все больше приложений стали добавлять этот функционал.
В статье Александр Шатилов рассказывает о построении видеоконференций на базе Angular, WebRTC и Openvidu.
👉 https://habr.com/ru/company/europlan/blog/595731/
С появлением WebRTC позволяющего делать видеозвонки в браузере, все больше приложений стали добавлять этот функционал.
В статье Александр Шатилов рассказывает о построении видеоконференций на базе Angular, WebRTC и Openvidu.
👉 https://habr.com/ru/company/europlan/blog/595731/
🔥21👍13
🦄 Taiga UI: год в Open Source
Taiga UI — это библиотека компонентов на Angular. Она разрабатывалась несколько лет, перед тем как выйти в публичный доступ. Open Source помог сформировать сообщество, благодаря идеям и помощи которого были расширили возможности кастомизации и локализации.
С тех пор прошел год, и Александр Инкин подводит итоги и делится планами на будущее.
👉 https://habr.com/ru/company/tinkoff/blog/649685/
Taiga UI — это библиотека компонентов на Angular. Она разрабатывалась несколько лет, перед тем как выйти в публичный доступ. Open Source помог сформировать сообщество, благодаря идеям и помощи которого были расширили возможности кастомизации и локализации.
С тех пор прошел год, и Александр Инкин подводит итоги и делится планами на будущее.
👉 https://habr.com/ru/company/tinkoff/blog/649685/
🔥17👍11🤔2
✨ Разбираемся в type
В TypeScript обычно можно обойтись объявлением типов через interface, но иногда пригождается и type. С его помощью можно писать утилиты, которые выполняются при анализе кода и расширяют возможности языка.
Павел Дымков рассказал про type, не касаясь интерфейсов. Однако, эта тема интереснее, чем может показаться, и наверняка вы найдете что-то новое для себя.
👉 https://habr.com/ru/post/648805/
В TypeScript обычно можно обойтись объявлением типов через interface, но иногда пригождается и type. С его помощью можно писать утилиты, которые выполняются при анализе кода и расширяют возможности языка.
Павел Дымков рассказал про type, не касаясь интерфейсов. Однако, эта тема интереснее, чем может показаться, и наверняка вы найдете что-то новое для себя.
👉 https://habr.com/ru/post/648805/
🔥6👍1
✨ Изучаем Module Federation в Angular
В последнее время ведется много дискуссий о микрофронтендах. Они позволяют разделить огромную кодовую базу на более мелкие части и поручить каждую часть отдельной команде. Подобная реализация раньше требовала множество трюков. К счастью, Module Federation упрощает эту задачу.
Manfred Steyer с помощью простых примеров показал, как применять Module Federation с Angular.
👉 https://auth0.com/blog/micro-frontends-with-angular-module-federation-and-auth0/
В последнее время ведется много дискуссий о микрофронтендах. Они позволяют разделить огромную кодовую базу на более мелкие части и поручить каждую часть отдельной команде. Подобная реализация раньше требовала множество трюков. К счастью, Module Federation упрощает эту задачу.
Manfred Steyer с помощью простых примеров показал, как применять Module Federation с Angular.
👉 https://auth0.com/blog/micro-frontends-with-angular-module-federation-and-auth0/
👍11🔥7
🔥 Новый способ установки заголовков страниц
Часто требуется, чтобы заголовок страницы обновлялся при переходе. В прошлом приходилось делать это вручную, но недавно в 14-й версии Angular Router появилась новая функция, позволяющая настраивать поведение маршрутизатора.
Brandon Roberts рассказал, как использовать новую функциональность Angular Router.
👉 https://dev.to/brandontroberts/setting-page-titles-natively-with-the-angular-router-393j
Часто требуется, чтобы заголовок страницы обновлялся при переходе. В прошлом приходилось делать это вручную, но недавно в 14-й версии Angular Router появилась новая функция, позволяющая настраивать поведение маршрутизатора.
Brandon Roberts рассказал, как использовать новую функциональность Angular Router.
👉 https://dev.to/brandontroberts/setting-page-titles-natively-with-the-angular-router-393j
🔥21👍7
🚀 Принципы работы компилятора Angular
Компилятор Angular (ngc) — построен на основе компилятора TypeScript и расширяет его функционал. Например, когда вы используете Angular декораторы, ngc распознает их и переводит в более эффективный код.
Alex Rickabaugh подробно описал алгоритм работы ngc.
👉 https://blog.angular.io/how-the-angular-compiler-works-42111f9d2549
Компилятор Angular (ngc) — построен на основе компилятора TypeScript и расширяет его функционал. Например, когда вы используете Angular декораторы, ngc распознает их и переводит в более эффективный код.
Alex Rickabaugh подробно описал алгоритм работы ngc.
👉 https://blog.angular.io/how-the-angular-compiler-works-42111f9d2549
🔥21👍4
🎉 Анонсирован TypeScript 4.6 RC
Когда Daniel Rosenwasser объявлял о выходе бета-версии, то упустил две новые возможности — анализ потока управления для Destructured Discriminated Unions и что --target теперь поддерживает es2022. В остальном команда TS работала над исправлением ошибок и исследовала возможности повышения производительности.
В ближайшие две недели будет выпущена стабильная версия TypeScript 4.6. До выхода больше не ожидается никаких изменений.
👉 https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-rc/
Когда Daniel Rosenwasser объявлял о выходе бета-версии, то упустил две новые возможности — анализ потока управления для Destructured Discriminated Unions и что --target теперь поддерживает es2022. В остальном команда TS работала над исправлением ошибок и исследовала возможности повышения производительности.
В ближайшие две недели будет выпущена стабильная версия TypeScript 4.6. До выхода больше не ожидается никаких изменений.
👉 https://devblogs.microsoft.com/typescript/announcing-typescript-4-6-rc/
🔥9👍4
🔥 Управляем состоянием с помощью Akita
Существуют различные подходы, с помощью которых можно управлять состоянием в Angular. Akita — это паттерн управления состоянием, основанный на принципах объектно-ориентированного проектирования и RxJS.
William Juan показал, как легко применять Akita, и как можно использовать его с Auth0.
👉 https://auth0.com/blog/state-management-in-angular-with-akita-1/
Существуют различные подходы, с помощью которых можно управлять состоянием в Angular. Akita — это паттерн управления состоянием, основанный на принципах объектно-ориентированного проектирования и RxJS.
William Juan показал, как легко применять Akita, и как можно использовать его с Auth0.
👉 https://auth0.com/blog/state-management-in-angular-with-akita-1/
🔥6👍2
🚀 Валидируем данные
Сложность валидации данных на клиенте зачастую заключается в тесном переплетении правил, которые проверяют данные, и особенностей пользовательского интерфейса.
Саша Беспоясов на примере формы «заявки на колонизацию Марса», показал подход, который делает валидацию проще.
👉 https://bespoyasov.ru/blog/declarative-rule-based-validation/
Сложность валидации данных на клиенте зачастую заключается в тесном переплетении правил, которые проверяют данные, и особенностей пользовательского интерфейса.
Саша Беспоясов на примере формы «заявки на колонизацию Марса», показал подход, который делает валидацию проще.
👉 https://bespoyasov.ru/blog/declarative-rule-based-validation/
🔥11👍3🤔3
✨ Знакомимся с Elf
Elf — это реактивный стейт менеджер, построенный на базе RxJS. Он использует кастомные RxJS операторы для запроса состояния и чистые функции для его обновления. Elf поощряет простоту и избавляет от необходимости создавать шаблонный код.
Netanel Basal рассказал о новом стейт менеджере, который стремится быть простым и модульным решением.
👉 https://netbasal.com/introducing-elf-a-reactive-store-with-magical-powers-for-js-apps-678d6cb0596f
Elf — это реактивный стейт менеджер, построенный на базе RxJS. Он использует кастомные RxJS операторы для запроса состояния и чистые функции для его обновления. Elf поощряет простоту и избавляет от необходимости создавать шаблонный код.
Netanel Basal рассказал о новом стейт менеджере, который стремится быть простым и модульным решением.
👉 https://netbasal.com/introducing-elf-a-reactive-store-with-magical-powers-for-js-apps-678d6cb0596f
🔥17👍4💩2
✨ Понимание RxJS в Angular
Одна из самых частых жалоб об Angular, на самом деле относится не к Angular, а скорее к RxJS. Многие говорят, что его слишком сложно изучать.
Sam Redmond написал краткое руководством, которое поможет вам понять, как Observables работают в экосистеме Angular. Как только вы поймете RxJS, вы сможете использовать его где угодно.
👉 https://sam-redmond.com/understanding-rxjs-with-angular-40eefeae5c02
Одна из самых частых жалоб об Angular, на самом деле относится не к Angular, а скорее к RxJS. Многие говорят, что его слишком сложно изучать.
Sam Redmond написал краткое руководством, которое поможет вам понять, как Observables работают в экосистеме Angular. Как только вы поймете RxJS, вы сможете использовать его где угодно.
👉 https://sam-redmond.com/understanding-rxjs-with-angular-40eefeae5c02
👍14🔥5👎2
✨ Перехватываем HTTP запросы
Перехватчики позволяют выполнять операции над запросами на пути к серверу и обратно, это делает их идеальным местом для добавления заголовков, кэширования и обработки ошибок.
В этой статье рассмотрены различные способы обработки неудачных HTTP запросов с помощью RxJS.
👉 https://dev.to/this-is-angular/angular-error-interceptor-12bg
Перехватчики позволяют выполнять операции над запросами на пути к серверу и обратно, это делает их идеальным местом для добавления заголовков, кэширования и обработки ошибок.
В этой статье рассмотрены различные способы обработки неудачных HTTP запросов с помощью RxJS.
👉 https://dev.to/this-is-angular/angular-error-interceptor-12bg
👍6❤1
✨ Разбираем верстку в Angular
Из-за отсутствия примеров в документации Angular Material, некоторые разработчики начинают изобретать собственные решения для создания сеток и лейаутов, хотя все это можно реализовать средствами Angular CDK.
Александр Серенко на примере макета с тремя вариантами отображения, рассмотрел нюансы верстки в Angular.
👉 https://medium.com/p/bd4f15ebbf54
Из-за отсутствия примеров в документации Angular Material, некоторые разработчики начинают изобретать собственные решения для создания сеток и лейаутов, хотя все это можно реализовать средствами Angular CDK.
Александр Серенко на примере макета с тремя вариантами отображения, рассмотрел нюансы верстки в Angular.
👉 https://medium.com/p/bd4f15ebbf54
👍14🔥5👏1
✨ Используем GraphQL с Angular
GraphQL с каждым днем становится все более востребованным. К счастью в экосистеме Angular есть Apollo Angular, который не требует сложной настройки. Вы можете сразу приступить к созданию приложения.
В этом посте Walter Kuppens показал, как легко можно подключиться к PokeAPI используя Apollo Angular.
👉 https://www.thisdot.co/blog/connecting-to-pokeapi-with-angular-and-apollo-client
GraphQL с каждым днем становится все более востребованным. К счастью в экосистеме Angular есть Apollo Angular, который не требует сложной настройки. Вы можете сразу приступить к созданию приложения.
В этом посте Walter Kuppens показал, как легко можно подключиться к PokeAPI используя Apollo Angular.
👉 https://www.thisdot.co/blog/connecting-to-pokeapi-with-angular-and-apollo-client
👍7🔥2