[Перевод] Улучшение реактивности с помощью VueUse

VueUse — это библиотека из более чем 200 служебных функций, которые можно использовать для взаимодействия с целым рядом API, включая интерфейсы для браузера, состояния, сети, анимации и времени. Эти функции позволяют разработчикам легко добавлять реактивные возможности в свои проекты Vue.js, помогая им с легкостью создавать мощные и отзывчивые пользовательские интерфейсы.Одна из самых интересных фич VueUse — поддержка прямого манипулирования реактивными данными. Это означает, что разработчики могут запросто обновлять данные в режиме реального времени, не используя сложный и подверженный ошибкам код. Благодаря этому легко создавать приложения, которые могут реагировать на изменения в данных и соответствующим образом обновлять пользовательский интерфейс без необходимости ручного вмешательства.Цель этой статьи — изучить некоторые утилиты VueUse, которые помогут нам улучшить реактивность в нашем приложении Vue 3. Читать далее
https://habr.com/ru/companies/otus/articles/728068/?utm_campaign=728068&utm_source=habrahabr&utm_medium=rss

[Перевод] Расширенный мониторинг производительности Vue.js

Даже самые лучшие разработчики сталкиваются с проблемами производительности своих приложений и сайтов. Бывает, мы настолько сосредоточены на создании новой фичи, что теряем из виду, какова производительность этих новых фрагментов кода. Обычное дело.Как мы можем отслеживать производительность в динамике? Каковы должны быть наши цели? Несем ли мы, разработчики Vue.js, ответственность за все проблемы с производительностью?Эта статья является продолжением нашего руководства Vue.js Performance Guide, в котором рассматриваются основы оптимизации производительности. Она поможет вам разобраться с мониторингом производительности и ее наиболее важными метриками. Читать далее
https://habr.com/ru/companies/otus/articles/730762/?utm_campaign=730762&utm_source=habrahabr&utm_medium=rss

Как я сделал SPA в два раза быстрее

Существует огромное множество статей про оптимизацию загрузки веб-сайтов, но часто они обходятся лишь общими советами или абстрактными примерами. В этой статье я хочу поделиться своим опытом комплексной оптимизации реального проекта с конкретными примерами, в данном случае SPA, написанном на Vue 3 с использованием Vuetify для части UI компонентов и Firebase для авторизации.Немного контекста: я работаю frontend-разработчиком в компании, которая в основном занимается разработкой MVP (Minimum Viable Product), но так же и разработкой и поддержкой долгоживущих продуктов. Как раз у MVP бывает много проблем, потому что минимум времени уделяется под рефакторинг и оптимизацию, а проблемы между проектами повторяются, потому что часто используется один стартовый шаблон.Возможность долго и планомерно заниматься оптимизацией у меня появилась на волонтерском проекте компании - combat-sport.club, которому можно было уделять сколько угодно свободного времени. Так что в данной статье идет речь именно о нем, но решения с него мы переносили и на другие проекты компании, т.к. стэк технологий и проблемы были одинаковые. Читать далее
https://habr.com/ru/articles/732406/?utm_campaign=732406&utm_source=habrahabr&utm_medium=rss

Я хотел улучшить React

Я давно пишу код, а React использую более пяти лет.За это время у меня возникло несколько идей о том, как можно было бы улучшить React.К реализации этих идей я приступил около трех лет назад. Сначала проверил концепцию, потом решил оформить всё в виде библиотеки.А о том, что из этого вышло, я бы хотел рассказать в этой статье. Читать далее
https://habr.com/ru/articles/733094/?utm_campaign=733094&utm_source=habrahabr&utm_medium=rss

Рендеринг модальных окон с помощью функций на Vue

Недавно на работе столкнулся с интересной задачей: нужно было создать уведомления, которые бы рендерились с помощью вызовов функций. После ресерча различных библиотек и статей собрал все ведомые мне способы в одной статье. Под катом подробнее. Вперед под кат
https://habr.com/ru/articles/733852/?utm_campaign=733852&utm_source=habrahabr&utm_medium=rss

[Перевод] Представляем вам Vue 3.3

Сегодня мы рады объявить о релизе Vue 3.3 "Rurouni Kenshin"!Этот выпуск сосредоточен на улучшении опыта разработки - в частности, на использовании SFC <script setup> с TypeScript. Вместе с релизом 1.6 Vue Language Tools (ранее известного как Volar) мы решили многие давние проблемы при использовании Vue с TypeScript.В этом посте представлен обзор основных возможностей версии 3.3. Для получения полного списка изменений, пожалуйста, ознакомьтесь с полным журналом изменений на GitHub. Читать далее
https://habr.com/ru/articles/735086/?utm_campaign=735086&utm_source=habrahabr&utm_medium=rss

Как заставить бэкендера писать фронтенд

Всем привет! Меня зовут Иван Ситкин, я бэкенд-разработчик в Едадиле. Сегодня я хочу поделиться с вами историей написания очередной панели администрирования и как из этого мы собрали подходящие подходы и практики.Для начала давайте вспомним, что же это за панели. Панель администрирования (или админка) — это приложение, которое используется для управления и настройки приложения. То есть это такой продукт для продукта. Панели администрирования нужны для различных целей, например, для создания и редактирования контента, настройки параметров продукта или управления пользователями.Но иногда в проектах важна скорость и ресурсов на создание админки с привлечением команды фронтенда откровенно не хватает. И тогда бэкендеру приходится брать процесс в свои руки.А теперь вы готовы погрузиться в эту кроличью нору. Читать далее
https://habr.com/ru/companies/yandex/articles/736006/?utm_campaign=736006&utm_source=habrahabr&utm_medium=rss

Детокс для i18n

NPM библиотека для интернационализации и локализации i18n очень популярна, однако за последние годы она сильно разрослась. В ней много возможностей для локализации дат, чисел, плурализации, двунаправленных алфавитов, загрузки локалей с сервера и кучи еще чего. На сайте i18next она называется уже даже "интернационализационным фреймворком".В то же время часто для локализации сайта нужны очень простые вещи, занимающие всего пару процентов от всего функционала тяжеловеса i18n. Ниже будет описана несложная процедура избавления от i18next-ной зависимости Читать далее
https://habr.com/ru/articles/736530/?utm_campaign=736530&utm_source=habrahabr&utm_medium=rss

Миграция на Vue 2.7

Здравствуйте! В данной статье я бы хотел поделиться своим опытом обновления проекта, написанного на Vue 2.6. Помимо обновления самого vue и компонентов, я на примерах покажу как мне удалось обновить другие зависимости проекта и адаптировать их для работы с Composition API. Читать далее
https://habr.com/ru/articles/738032/?utm_campaign=738032&utm_source=habrahabr&utm_medium=rss

[Разбор резюме] Фронтенд-разработчик: как не утопить рекрутера в технологиях и не потерять фокус

Это вторая статья из нашей рубрики «Разбор резюме». В первой мы разбирали резюме бэкендера, а здесь нам прислал свое CV фронтендер. Давайте посмотрим и разберем, что в нем можно улучшить: почему это резюме вообще лучше бы превратить в несколько, стоит ли включать в список навыков «опытный пользователь ПК» и как определяется уровень владения той или иной технологией.Резюме достаточно длинное, так что разбирать мы его будем поэтапно. Читать далее
https://habr.com/ru/companies/getmatch/articles/739218/?utm_campaign=739218&utm_source=habrahabr&utm_medium=rss

Свой NPM репозитарий Verdaccio + GitLab + Docker

Требовалось кешировать используемые в разных проектах NPM пакеты (+ хранить свои пакеты) на отдельном сервере. Было решено делать это с помощью репозитария Verdaccio (по нему есть достаточно хорошая офф. дока), крутится это все должно в Docker, а разворачиваться на отдельном сервере через GitLab CI/CD.Т.к. реализация данной схемы заняла у меня некоторое время (Хотелось бы и по меньше), решил написать короткий туториал по этой теме, с описание нюансов, которые для меня казались не очевидными. Читать далее
https://habr.com/ru/articles/739298/?utm_campaign=739298&utm_source=habrahabr&utm_medium=rss

Делюсь опытом участия в хакатоне от совкомбанка

Сегодня, я хочу поделиться опытом и рассказать про участие в хакатоне от совкомбанка. Подробнее про хакатон можно почитать тут. Для лл я вкратце опишу задачу - командой до 5 человек сделать внутренний сервис для подбора персонала и ведения HR деятельности. Читать далее
https://habr.com/ru/articles/739350/?utm_campaign=739350&utm_source=habrahabr&utm_medium=rss

Парсинг, хранение и отображение логов 3-х разных агентов доставки электронной почты. MTA Log Parser

Эта моя первая коротенькая статейка на Хабре в попытке сделать проект, который делал для себя в целях самообразования и применения на работе, полезным кому-то еще. Можно было бы написать больше букв, но ввиду особенностей профессиональной деятельности, времени на это мягко говоря не очень много. Кто заинтересуется, всегда может подробности почерпнуть самостоятельно на гитхабе. Читать далее
https://habr.com/ru/articles/740288/?utm_campaign=740288&utm_source=habrahabr&utm_medium=rss

BALLSORT на $mol

Сегодня мы перепишем на $mol эту демку почти пиксель в пиксель и напишем несколько тестов.Демка представляет собой игру, в которой перемещаются разноцветные шарики между трубками, цель игры - отсортировать шарики по цветам за наименьшее количество шагов.Изначально она была реализована на эффекторе + react, недавно несколько человек реализовали ее на реатоме + react исходники, на vue исходники и две независимых версии на моле: первая и моя о ней пойдет речь. Читать далее
https://habr.com/ru/articles/741040/?utm_campaign=741040&utm_source=habrahabr&utm_medium=rss

Как сделать кастомный Semi Donut Chart с помощью SVG

Я сделал конфигурируемый Semi Donut Chart на svg, и решил поделиться с вами.В этой статье вы узнаете как сделать Semi Donut Chart, гибким и конфигурируем меньше чем за 100 строк кода на Vue 3(применимо к любому другому Фреймворку). Читать далее
https://habr.com/ru/articles/741214/?utm_campaign=741214&utm_source=habrahabr&utm_medium=rss

BALLSORT на $mol. Часть 2

Сегодня мы продолжим переписывание на $mol этой демки. Кто не читал первую часть, рекомендую сначала ознакомиться с ней BALLSORT на $mol. Часть 1 Читать далее
https://habr.com/ru/articles/741256/?utm_campaign=741256&utm_source=habrahabr&utm_medium=rss

Низкоуровневая реализация полного цикла жизни компонента во Vue 2

В статье речь пойдет о низкоуровневой реализации цикла жизни компонента: объявление, монтирование в DOM, дестрой экземпляром компонента самого себя.Мы привыкли к наиболее частому использованию компонентов: объявление, регистрация, обращение к компоненту из другого с передачей параметров.  Описываем компонент в файле componentName.vue и вызываем в шаблоне другого компонента как <component-name /> А как быть если мы хотим вызвать скажем диалоговое окно из плагина? И хотим чтобы о нашем диалоговом окне не знало все приложение, а знал только плагин? Именно с такой задачей столкнулась на рабочем проекте и собирать информацию пришлось по крупицам. Расскажу как было реализовано все перечисленное. Я делала в плагине, но это не обязательно. Этот подход можно реализовывать и в самом проекте. Читать далее
https://habr.com/ru/articles/742310/?utm_campaign=742310&utm_source=habrahabr&utm_medium=rss

Vue.js 3 Design Patterns and Best Practices: Develop scalable and robust applications with Vite, Pinia, and Vue Router (2023)
Автор: Olaf Zander
Количество страниц: 296

#vue

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

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

Скачать книгу

Использование Ionic и Vue 3 для создания мобильных приложений

В современном мире мобильные приложения играют важную роль в нашей повседневной жизни. Разработка мобильных приложений стала все более популярной, и существует множество фреймворков и инструментов для создания кросс-платформенных приложений. В этой статье мы рассмотрим процесс разработки мобильных приложений с использованием Ionic, Vue 3 и Capacitor, сочетающих в себе преимущества гибкости Vue.js и возможности кросс-платформенной разработки Ionic и Capacitor. Вперед под кат) Под кат!
https://habr.com/ru/articles/743778/?utm_campaign=743778&utm_source=habrahabr&utm_medium=rss

Сравнение тяжеловесности популярных библиотек IU компонент для Vue 3

Библиотеки UI компонент популярны и удобны в некоторых случаях, но у них тоже есть обратные стороны. Одно дело, когда делаешь админку и используешь десятки компонент, другое - когда тебе надо всего пару компонент.Я провел исследование - взял три HTML элемента: Button, Input и Select, и посмотрел, насколько увеличатся js и css бандлы если использовать для них одну из 10 распространенных UI библиотек для Vue 3. Читать далее
https://habr.com/ru/articles/745012/?utm_campaign=745012&utm_source=habrahabr&utm_medium=rss

Как я переписал свой проект на Svelte

Приветствую всех. Уже как неделю я переписываю свой проект, который был на Vue options api с использованием Quasar и перевожу его на Svelte-Sveltkit-DaisyUI. Скажу сразу, он мне очень понравился, особенно в если учитывать что Vue composition api стал больше похож на React, нежели чем на самого себя. Складывается впечатление что Svelte это то к чему должен был прийти Vue, но он пришел к реакту))) (ты должен был бороться...)Итак, тот код, который я писал на вью(вуй в простонародье) 10 месяцев на свелт был написан за 9 дней, и то успел добавить дополнительные функции. Кое-что еще не реализовано, но это легкая часть, которая займет дня 3-4, не больше. Затем привязка к бэкенду и тестирование и через 2-3 недели все должно быть в целом готово. Справедливости ради стоит отметить что не все время из этих 10 месяцев было использовано на написание кода. Половина времени было потрачено на безрезультатные попытки(пытки) написать бэкенд самому. Прыгал с одной технологии на другую, но в основном пытался(пытал себя) написать на фшарп. Ничего не вышло, перешел на ноду-экспресс. Кое-что вышло, но в процессе написания понял что бэк не мое. Один бэкендер говорил что работа бэкендера это как 8 часов решать "судоку" на работе, а в остальное время решать судоку для отдыха. Полностью с этим согласен. Главное что вовремя осознал свою неспособность писать бэкенд, а заодно и нелюбовь решать судоку. Хотя когда был в школе любил, вероятно и бэк в то время зашел бы, но не факт. Отныне, если когда-нибудь я буду писать бэк для чего-то, то буду использовать лишь готовые вещи вроде strapi или directus. Читать далее
https://habr.com/ru/articles/745780/?utm_campaign=745780&utm_source=habrahabr&utm_medium=rss