Улучшение производительности Vue.js приложений

В современном мире web-разработки все сводится к скорости работы и загрузки приложений, пользователи не хотят ждать по 5-10 секунд пока грузится сайт, даже если дело не в самом сайте а в скорости подключения к интернету.Исследования показывают что время в течении которого пользователь готов ждать загрузки сайта составляет примерно от 0.3 до 3 секунд. Если сайт требует значительного количества времени для загрузки то велик шанс что человек просто покинет такой сайт.Существует ряд причин по которым время загрузки сайта может быть долгим. Вообще это может быть что угодно, начиная от плохо оптимизированного сайта заканчивая большой нагрузкой на сервер.Но мы здесь не для того чтобы обсуждать причины долгой загрузки а для того чтобы оптимизировать компоненты Vue.js приложений и даже немного ускорить загрузку приложения. Читать далее
https://habr.com/ru/articles/719378/?utm_campaign=719378&utm_source=habrahabr&utm_medium=rss

Подготовка шаблона приложения на Typescript с Nest, Nuxt 3 и Docker

Решил описать свой подход построения окружения на Typescript с Nest на бекенде, Nuxt (SPA) на фронтенде. Все заворачивается в один docker‑образ и запускается как standalone приложение c nginx, healthcheck»ами, тестами и ш…широкой сферой применения. Читать далее
https://habr.com/ru/articles/720000/?utm_campaign=720000&utm_source=habrahabr&utm_medium=rss

[Перевод] Улучшение реактивности с помощью 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