Angular Vue js React
1.84K subscribers
238 photos
2 videos
2 files
758 links
Полезные материалы по JS фреймворкам
По всем вопросам: @un_ixtime
Download Telegram
Пользовательская директива всплывающей подсказки в Vuejs 3: Учебник

Пользовательские директивы в Vuejs 3 — это одна из тех вещей, где нет совместимости с предыдущей версией фреймворка.

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

Прежде чем перейти к реализации директивы пользовательской всплывающей подсказки в Vuejs 3, позвольте мне представить основы хорошей стратегии повторного использования кода в Vuejs. https://devdojo.com/inspector/custom-tooltip-directive-in-vuejs-3-tutorial
Расширение ссылок Vue Router в Vue 3

Тег <router-link>— отличный инструмент для навигации между разными страницами вашего приложения Vue, но это не тот инструмент, который можно использовать при переходе по внешней ссылке, для этого вы захотите использовать обычный <a>тег. Может быть, это только я, но часто я не могу уделить внимание тому, чтобы не отставать от разницы. В других случаях ссылки могут быть динамическими, то есть исходящими из базы данных или какого-либо источника данных, предоставленного пользователем. В таких случаях вы просто не будете знать, является ли ссылка внешней или внутренней, и как сложно было бы делать v-if вручную в каждом месте, где эта ссылка может использоваться.

Было бы неплохо просто использовать один компонент для всех внутренних и внешних ссылок? Если вы чем-то похожи на меня, вы будете делать это прямо сейчас.

К счастью, расширить <router-link>компонент очень просто, обернув его в свой собственный компонент. Давай сделаем это! Давайте создадим AppLinkкомпонент, который будет обрабатывать любую ссылку, внешнюю ИЛИ внутреннюю.

https://vueschool.io/articles/vuejs-tutorials/extending-vue-router-links-in-vue-3/?source=weeklyVueNews&campaign=ISSUE_ID_PLACEHOLDER
Макросы настройки скрипта Vue 3

Vue 3 Script Setup — рекомендуемый синтаксис, если вы используете как Single File Components, так и Composition API. Он обеспечивает чистую и лаконичную структуру, которая значительно сокращает шаблонный код.

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

https://fadamakis.com/vue-3-script-setup-macros-ab754266363f
Как сделать Vue.js в 3000 раз быстрее

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

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

https://javascript.plainenglish.io/how-to-make-vue-js-3000-times-faster-826ee04a2491
Angular — шаблон адаптера: упрощение интеграции данных

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

https://javascript.plainenglish.io/angular-adapter-pattern-simplify-data-integration-kanban-board-84f520313a3d
Наблюдение за температурой: введение в холодные и горячие Observable в rxjs

По мере изучения RxJS разработчик рано или поздно сталкивается с такими понятиями, как cold и hot observable. А на технических собеседованиях в команды, которые используют RxJS, можно услышать вопросы по этой теме.

Например, чем горячий поток отличается от холодного? Можно ли холодный поток превратить в горячий и наоборот? И если да, то как это сделать?

В статье попробуем разобраться в теме и найти ответы.
https://habr.com/ru/companies/tinkoff/articles/729808/
Работа с формами в Angular — модуль работы с формами и обертки полей.

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

Читать далее https://habr.com/ru/companies/tinkoff/articles/740706
Forwarded from REact
Zedux: Это тот самый?

Zedux - это движок молекулярного состояния для React. После многих лет, проведенных в качестве проприетарного программного обеспечения, спрятанного в закрытом репозитории GitHub, он официально открыт и выпущена версия 1.0.0! https://omnistac.github.io/zedux/blog/zedux-is-this-the-one
У React наступает момент Angular.js?

В 2012 году Angular.js изменил ландшафт фронтенд-разработки и быстро стал успешным. Всего два года спустя команда Angular запустила Angular 2, полностью переписанную исходную библиотеку, основанную на другом наборе парадигм. Многие разработчики, в том числе и я, не хотели переписывать свои существующие приложения, чтобы они соответствовали этим новым идеям. И для новых проектов Angular.js больше не подходил, так как другие фреймворки были так же хороши.

В 2015 году мы начали использовать React для всей нашей работы с интерфейсом. Простая архитектура, сосредоточенность на компонентах и ​​стабильная производительность независимо от размера кодовой базы сделали его легким выбором. React имел большой успех, и сообщество очень быстро росло. Недавно команды React и Next.js продвигали Server Components — новый способ создания веб-приложений, который не подходит для большинства существующих приложений React.

Является ли это изменение таким же значительным, как переход с Angular.js на Angular 2? Переживает ли React ту же фазу, что и Angular.js?

https://marmelab.com/blog/2023/06/05/react-angularjs-moment.html
Что такое CommonModule в Angular

CommonModule
— это модуль Angular, который содержит и экспортирует компоненты, директивы и пайпы Angular.

https://medium.com/@dimitarg.stoev/what-is-commonmodule-in-angular-4aa712b704b2
vue-vine

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

Vue Vineбыл разработан, чтобы обеспечить большую гибкость управления компонентами Vue. Это параллельный стиль SFC.

https://github.com/vue-vine/vue-vine?source=weeklyVueNews&campaign=96
Вы заметили символ решетки, появляющийся в примерах кода Angular? Если нет, вы можете увидеть это в ближайшее время. Какова цель # и когда вы должны его использовать?

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

https://www.freecodecamp.org/news/javascript-vs-typescript-private-in-angular-explained/
10 распространенных ошибок при разработке Angular: как избежать ловушек

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

https://blog.bitsrc.io/10-common-mistakes-in-angular-development-avoiding-pitfalls-c2509082b3bc
Использование Ionic и Vue 3 для создания мобильных приложений.

В современном мире мобильные приложения играют важную роль в нашей повседневной жизни. Разработка мобильных приложений стала все более популярной, и существует множество фреймворков и инструментов для создания кросс-платформенных приложений. В этой статье мы рассмотрим процесс разработки мобильных приложений с использованием Ionic, Vue 3 и Capacitor, сочетающих в себе преимущества гибкости Vue.js и возможности кросс-платформенной разработки Ionic и Capacitor. Вперед под кат)

https://habr.com/ru/articles/743778/
Resolver в Angular: обзор

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

https://dzone.com/articles/resolver-in-angular
Взаимодействие компонентов в Angular для старших разработчиков

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

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

Сегодня мы увидим, как обмениваться данными между компонентами Angular. Каковы подходы по умолчанию. Когда их недостаточно. И как быть с более сложными сценариями.

https://medium.com/@iamprovidence/component-communication-in-angular-for-senior-devs-4e3c9f0f2c59
Используйте пользовательские директивы Vue3 как профессионал

Vue.js предоставляет богатый набор директив для упрощения работы разработчиков. Помимо встроенных директив, Vue.js также поддерживает директивы Custom, которые позволяют разработчикам расширять библиотеку директив Vue.js в соответствии со своими потребностями. Vue.js 3.x имеет некоторые улучшения в директиве Custom по сравнению с Vue.js 2.x. В этой статье рассказывается, как использовать директиву Custom в Vue.js 3.x.

https://javascript.plainenglish.io/mastering-vue-3-directives-an-in-depth-tutorial-5657cd8ca406
Выбор лучшего JS-фреймворка: опыт создания одного и того же приложения 6 раз


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

https://hackernoon.com/choosing-the-best-js-framework-insights-from-building-the-same-app-6-times?source=rss
Angular получает новый синтаксис шаблона

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

Angular предлагает переход от текущих структурных директив (NgIf, NgForOf, NgSwitch) к новому встроенному синтаксису

https://itnext.io/angular-is-getting-new-template-syntax-ff66bc5f02f7