Три способа раскрыть API внутренних компонентов Vue
Мы все были там, у вас есть компонент с внутренним API (функцией или состоянием), который вы хотите предоставить родительскому компоненту, но с множеством вариантов для этого, какой из них лучше?
Недавно я ответил на вопрос об этом в Твиттере и подумал, что было бы неплохо написать об этом статью. Тем более что в Vue 3 у нас больше возможностей для решения этой проблемы, чем во Vue 2.
https://logaretm.com/blog/three-ways-to-expose-vue-component-api/?source=weeklyVueNews&campaign=ISSUE_ID_PLACEHOLDER
Мы все были там, у вас есть компонент с внутренним API (функцией или состоянием), который вы хотите предоставить родительскому компоненту, но с множеством вариантов для этого, какой из них лучше?
Недавно я ответил на вопрос об этом в Твиттере и подумал, что было бы неплохо написать об этом статью. Тем более что в Vue 3 у нас больше возможностей для решения этой проблемы, чем во Vue 2.
https://logaretm.com/blog/three-ways-to-expose-vue-component-api/?source=weeklyVueNews&campaign=ISSUE_ID_PLACEHOLDER
Logaretm
Three ways to expose internal Vue components API
And when to use each one of them
10 лучших (бесплатных) ресурсов Angular
Возможно, самый мощный JavaScript-фреймворк, Angular требует довольно много времени для обучения. Вот 10 ресурсов для преодоления этого, чтобы вы могли освоить этот зверь фреймворка! https://www.telerik.com/blogs/top-10-free-angular-resources
Возможно, самый мощный JavaScript-фреймворк, Angular требует довольно много времени для обучения. Вот 10 ресурсов для преодоления этого, чтобы вы могли освоить этот зверь фреймворка! https://www.telerik.com/blogs/top-10-free-angular-resources
Telerik Blogs
Top 10 (Free) Angular Resources
Perhaps the most powerful JavaScript framework, Angular does have quite a learning curve. Here are 10 resources for overcoming that so you can master it!
Зачем и как создавать шину событий в Vuejs 3
Прежде чем вдаваться в подробности этой конкретной реализации, позвольте мне описать принципы взаимодействия компонентов в Vuejs и почему мы решили использовать глобальную шину событий, даже если это не рекомендуется. https://devdojo.com/inspector/why-and-how-to-create-an-event-bus-in-vuejs-3
Прежде чем вдаваться в подробности этой конкретной реализации, позвольте мне описать принципы взаимодействия компонентов в Vuejs и почему мы решили использовать глобальную шину событий, даже если это не рекомендуется. https://devdojo.com/inspector/why-and-how-to-create-an-event-bus-in-vuejs-3
DevDojo
Why and how to create an Event Bus in Vuejs 3
Have you ever used an event bus in Vue 2 and don't know how to recreate it in Vue 3? Since I'm working on the 2.0 version of my product's UI (to be released in May) I'm publishing some technical trick...
Пользовательская директива всплывающей подсказки в Vuejs 3: Учебник
Пользовательские директивы в Vuejs 3 — это одна из тех вещей, где нет совместимости с предыдущей версией фреймворка.
Работая над новой версией панели управления интерфейсом Inspector, мне нужно было отображать всплывающие подсказки во многих разных точках приложения.
Прежде чем перейти к реализации директивы пользовательской всплывающей подсказки в Vuejs 3, позвольте мне представить основы хорошей стратегии повторного использования кода в Vuejs. https://devdojo.com/inspector/custom-tooltip-directive-in-vuejs-3-tutorial
Пользовательские директивы в 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
Тег <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
Аутентификация и авторизация в Angular
https://www.c-sharpcorner.com/article/authentication-and-authorization-in-angular/
https://www.c-sharpcorner.com/article/authentication-and-authorization-in-angular/
C-Sharpcorner
Authentication And Authorization In Angular - Part Twelve
Before we get into the mechanics of implementing Authentication and Authorization, let’s have a quick look at high level architecture. So let’s start with Authentication. So in order to build authentication, on the client we need to build the login page and…
Макросы настройки скрипта Vue 3
Vue 3 Script Setup — рекомендуемый синтаксис, если вы используете как Single File Components, так и Composition API. Он обеспечивает чистую и лаконичную структуру, которая значительно сокращает шаблонный код.
Основная идея API композиции заключается в том, чтобы явно импортировать каждый помощник , который вам нужно использовать.
https://fadamakis.com/vue-3-script-setup-macros-ab754266363f
Vue 3 Script Setup — рекомендуемый синтаксис, если вы используете как Single File Components, так и Composition API. Он обеспечивает чистую и лаконичную структуру, которая значительно сокращает шаблонный код.
Основная идея API композиции заключается в том, чтобы явно импортировать каждый помощник , который вам нужно использовать.
https://fadamakis.com/vue-3-script-setup-macros-ab754266363f
Medium
Vue 3 Script Setup Macros
Vue 3 Script Setup is the recommended syntax if you are using both Single File Components and Composition API. It provides a clean and…
Как сделать Vue.js в 3000 раз быстрее
В сегодняшнюю цифровую эпоху, когда пользователи ожидают молниеносной работы, невозможно переоценить важность производительности в приложениях Vue.js. Как разработчики Vue.js, мы постоянно стремимся предоставлять высокочувствительные и эффективные пользовательские интерфейсы. Но что, если я скажу вам, что достижение ошеломляющего 3000-кратного увеличения скорости вашего приложения Vue.js вполне достижимо?
Приготовьтесь к захватывающему путешествию, пока мы погружаемся в мир оптимизации. В этой статье мы говорим не просто о дополнительных улучшениях или незначительных увеличениях скорости. Наша цель — не что иное, как монументальный скачок — повышение скорости в 3000 раз, которое бросит вызов вашим ожиданиям и раздвинет границы того, что вы считали возможным.
https://javascript.plainenglish.io/how-to-make-vue-js-3000-times-faster-826ee04a2491
В сегодняшнюю цифровую эпоху, когда пользователи ожидают молниеносной работы, невозможно переоценить важность производительности в приложениях 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
Общим требованием современной веб-разработки является интеграция данных из нескольких источников. Однако работа с различными форматами данных и API может быть сложной, а код может быть тесно связан с конкретными источниками данных. Чтобы преодолеть эту проблему, шаблон адаптера предлагает решение, выступая в качестве моста между несовместимыми интерфейсами. В этой статье мы продемонстрируем шаблон адаптера на примере доски Канбан. Также будут предоставлены примеры кода и практические варианты использования, чтобы проиллюстрировать преимущества.
https://javascript.plainenglish.io/angular-adapter-pattern-simplify-data-integration-kanban-board-84f520313a3d
Medium
Angular —Adapter Pattern: Simplify Data Integration(Kanban Board)
Simplifying Integration and Enhancing Flexibility
Наблюдение за температурой: введение в холодные и горячие Observable в rxjs
По мере изучения RxJS разработчик рано или поздно сталкивается с такими понятиями, как cold и hot observable. А на технических собеседованиях в команды, которые используют RxJS, можно услышать вопросы по этой теме.
Например, чем горячий поток отличается от холодного? Можно ли холодный поток превратить в горячий и наоборот? И если да, то как это сделать?
В статье попробуем разобраться в теме и найти ответы.
https://habr.com/ru/companies/tinkoff/articles/729808/
По мере изучения RxJS разработчик рано или поздно сталкивается с такими понятиями, как cold и hot observable. А на технических собеседованиях в команды, которые используют RxJS, можно услышать вопросы по этой теме.
Например, чем горячий поток отличается от холодного? Можно ли холодный поток превратить в горячий и наоборот? И если да, то как это сделать?
В статье попробуем разобраться в теме и найти ответы.
https://habr.com/ru/companies/tinkoff/articles/729808/
Хабр
Наблюдение за температурой: введение в холодные и горячие Observable в rxjs
По мере изучения RxJS разработчик рано или поздно сталкивается с такими понятиями, как cold и hot observable. А на технических собеседованиях в команды, которые используют RxJS, можно услышать вопросы...
Работа с формами в Angular — модуль работы с формами и обертки полей.
В статье покажу один из способов работы с формами в Angular-проектах, который упрощает создание новых форм и изолирует зависимость от внешней UI-библиотеки. Будет мало текста и много кода, пристегните ремни, мы начинаем.
Читать далее https://habr.com/ru/companies/tinkoff/articles/740706
В статье покажу один из способов работы с формами в Angular-проектах, который упрощает создание новых форм и изолирует зависимость от внешней UI-библиотеки. Будет мало текста и много кода, пристегните ремни, мы начинаем.
Читать далее https://habr.com/ru/companies/tinkoff/articles/740706
Хабр
Работа с формами в Angular — модуль работы с формами и обертки полей
Всем привет! Я Александр Бухтатый, frontend-разработчик в Тинькофф, специализируюсь на Angular. Наша команда работает в монорепозитории с четырьмя проектами. В каждом проекте много форм, нужно...
Основы Angular: встроенные Pipes с примерами каждого
https://www.telerik.com/blogs/angular-basics-built-pipes-examples-each
https://www.telerik.com/blogs/angular-basics-built-pipes-examples-each
Telerik Blogs
Angular Basics: Built-in Pipes with Examples of Each
Angular has some built-in pipes that allow us to render numbers and string values in a locale-specific format. Let’s take a look!
Forwarded from REact
Zedux: Это тот самый?
Zedux - это движок молекулярного состояния для React. После многих лет, проведенных в качестве проприетарного программного обеспечения, спрятанного в закрытом репозитории GitHub, он официально открыт и выпущена версия 1.0.0! https://omnistac.github.io/zedux/blog/zedux-is-this-the-one
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
В 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
Marmelab
Is React Having An Angular.js Moment?
React Server Components, while innovative, risk causing division in the React community due to their potential to undermine Single-Page App architecture.
Что такое CommonModule в Angular
CommonModule — это модуль Angular, который содержит и экспортирует компоненты, директивы и пайпы Angular.
https://medium.com/@dimitarg.stoev/what-is-commonmodule-in-angular-4aa712b704b2
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
В сообществе ведется много дискуссий, которые надеются на решение, поддерживающее запись нескольких компонентов Vue в один файл. Потому и Vue Vineродился.
Vue Vineбыл разработан, чтобы обеспечить большую гибкость управления компонентами Vue. Это параллельный стиль SFC.
https://github.com/vue-vine/vue-vine?source=weeklyVueNews&campaign=96
GitHub
GitHub - vue-vine/vue-vine: Another style of writing Vue components.
Another style of writing Vue components. Contribute to vue-vine/vue-vine development by creating an account on GitHub.
Вы заметили символ решетки, появляющийся в примерах кода Angular? Если нет, вы можете увидеть это в ближайшее время. Какова цель # и когда вы должны его использовать?
Недавно этот # символ был добавлен в JavaScript для обозначения свойств частного класса. Создание переменной класса приватной означает, что доступ к переменной возможен только внутри ее класса. Это позволяет нам инкапсулировать данные, к которым мы хотим получить доступ только внутри сервиса.
https://www.freecodecamp.org/news/javascript-vs-typescript-private-in-angular-explained/
Недавно этот # символ был добавлен в JavaScript для обозначения свойств частного класса. Создание переменной класса приватной означает, что доступ к переменной возможен только внутри ее класса. Это позволяет нам инкапсулировать данные, к которым мы хотим получить доступ только внутри сервиса.
https://www.freecodecamp.org/news/javascript-vs-typescript-private-in-angular-explained/
freeCodeCamp.org
How to Hide Your Angular Properties – # vs private Explained
By Deborah Kurata Have you noticed a hash symbol showing up in Angular code samples? If not, you may see it soon. What is the purpose of the # and when should you use it? The # symbol was recently added to JavaScript to denote private class propertie...
10 распространенных ошибок при разработке Angular: как избежать ловушек
В этой статье мы рассмотрим 10 распространенных ошибок, которые часто допускают разработчики при работе с Angular, и предоставим примеры кода, которые помогут вам избежать этих ловушек. Понимая и избегая этих ошибок, вы можете улучшить свои навыки разработки на Angular и создавать высококачественные приложения.
https://blog.bitsrc.io/10-common-mistakes-in-angular-development-avoiding-pitfalls-c2509082b3bc
В этой статье мы рассмотрим 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/
В современном мире мобильные приложения играют важную роль в нашей повседневной жизни. Разработка мобильных приложений стала все более популярной, и существует множество фреймворков и инструментов для создания кросс-платформенных приложений. В этой статье мы рассмотрим процесс разработки мобильных приложений с использованием Ionic, Vue 3 и Capacitor, сочетающих в себе преимущества гибкости Vue.js и возможности кросс-платформенной разработки Ionic и Capacitor. Вперед под кат)
https://habr.com/ru/articles/743778/
Хабр
Использование Ionic и Vue 3 для создания мобильных приложений
В современном мире мобильные приложения играют важную роль в нашей повседневной жизни. Разработка мобильных приложений стала все более популярной, и существует множество фреймворков и инструментов для...
Resolver в Angular: обзор
В этой статье рассматривается концепция Angular Resolver, его функции и практическое применение для ваших проектов Angular.
https://dzone.com/articles/resolver-in-angular
В этой статье рассматривается концепция Angular Resolver, его функции и практическое применение для ваших проектов Angular.
https://dzone.com/articles/resolver-in-angular
DZone
Resolver in Angular: An Overview
This article explores the concept of the Angular Resolver, its function, and its practical application for your Angular projects.
Взаимодействие компонентов в Angular для старших разработчиков
Обмен данными между различными компонентами — просто необходимая задача в любом приложении. Angular здесь не исключение. Несмотря на то, насколько это распространено, существует несколько встроенных подходов. Иногда этого может быть недостаточно, и вам придется придумывать какие-то причудливые обходные пути.
Как узнать, что вы не пишете плохой код? Откуда вы знаете, что не изобретаете велосипед? Это просто. Вам просто нужно учиться на чужих ошибках и получать их знания 😁
Сегодня мы увидим, как обмениваться данными между компонентами Angular. Каковы подходы по умолчанию. Когда их недостаточно. И как быть с более сложными сценариями.
https://medium.com/@iamprovidence/component-communication-in-angular-for-senior-devs-4e3c9f0f2c59
Обмен данными между различными компонентами — просто необходимая задача в любом приложении. Angular здесь не исключение. Несмотря на то, насколько это распространено, существует несколько встроенных подходов. Иногда этого может быть недостаточно, и вам придется придумывать какие-то причудливые обходные пути.
Как узнать, что вы не пишете плохой код? Откуда вы знаете, что не изобретаете велосипед? Это просто. Вам просто нужно учиться на чужих ошибках и получать их знания 😁
Сегодня мы увидим, как обмениваться данными между компонентами Angular. Каковы подходы по умолчанию. Когда их недостаточно. И как быть с более сложными сценариями.
https://medium.com/@iamprovidence/component-communication-in-angular-for-senior-devs-4e3c9f0f2c59
Medium
Component communication in Angular for Senior devs
Exchanging data between different components is just an essential task in any application. Angular is not an exception here. Despite how…