В Москве митапнулись модные вьюшники на msk_vue_js

#event

const project = shallowRef(null as Project);

Как типизировать shallowRef ES классом

#reactivity

Метод navigator.sendBeacon() предоставляет возможность гарантированно отправить небольшой объем данных на сервер, даже если пользователь закрывает страницу или браузер. В отличие от традиционных AJAX-запросов, которые могут быть прерваны при выгрузке страницы, sendBeacon обеспечивает доставку данных в таких сценариях.

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

Практические применения

- Финализация аналитических данных - отправка собранной за сессию аналитики перед закрытием страницы
- Автосохранение - сохранение последнего состояния приложения, которое пользователь мог не сохранить явно
- Отчеты об ошибках - гарантированная отправка логов о критических ошибках
- Трекинг поведения - фиксация последних действий пользователя перед уходом

const data = JSON.stringify({event: 'page_close', time: Date.now()});
navigator.sendBeacon('/analytics', data);

Ограничения

- Максимальный размер полезной нагрузки ограничен (обычно 64Кб)
- Поддерживает только POST-запросы
- Не поддерживает кастомные заголовки
- Ответ сервера не может быть обработан

#tip

Во Vue используется модель потока данных: "данные вниз, события наверх"

Но иногда всё-таки нужно послать событие дочернему компоненту, и в этом случае используется defineExpose. Это вполне соответствует лучшим практикам обычного HTML и DOM API

Основные use cases:

- открыть/закрыть модалку
- установить фокус
- сбросить форму
- валидировать поле
- обновить данные
- включить/выключить аудио/видео/анимацию

#expose

Cursor дорос до 1.0.0 версии

Обнов много - memories, review PR-ов, MCP в один клик, диаграммы и таблицы в ответах в чате и другое

Вообще, это IDE довольно быстро развивается последние недели и, тьфу-тьфу-тьфу, более-менее стабильно работает

#ai #cursor

Несколько месяцев назад Cursor (и другие, наверно, тоже) научились работать с линтером, за один прогон исправляя ошибки

Можно пойти дальше - попросите Cursor написать и использовать тестовый скрипт для проверки некого функционала (без каких либо тестовых библиотек), который вы ему заказали. Тогда агент будет в цикле сам запускать этот скрипт, который будет проверять правильность уже проектного кода, ставить логи, изучать ошибки и исправлять их, пока всё не пофиксит. Часто он делает это сам.

Экономия времени и кредитов.

(не для vue, для js, py, php etc).

P.S. В новом Курсоре появилась фича Run agent in Clouds, включенная по умолчанию, из-за которой редактор начинает жутко тормозить. Можно отключить.

#ai #cursor #tip

Любимая рубрика "В мире животных"

#offtop #video #animals

При использовании router-view с transition с mode="out-in" в dev режиме при переходах по роутам часто ловится белый экран

Единственное найденное решение - отключать этот mode в dev режиме

<router-view v-slot="{ Component }">
  <Transition mode="out-in">
    <component :is="Component" />
  </Transition>
</router-view>

#router #tip

Пара советов с утра от автора "Clean code" Боба Мартина

#architecture #bobmartin

Вышел Oxlint 1.0.0

Но поддержки Vue правил еще нет

#oxlint

Ссылка была на англоязычный vue-faq.org на Реддите

На этом канале 900 человек, из них пусть половина вьюшников, а статьи по Vue на том же Хабре выходят раз в месяц.

Писать надо не из тщеславия, а потому, что при создании статьи, понимание ее материала выходит на новый уровень.

Аспирантов заставляют преподавать не из-за того, что мало преподавателей, а потому, что подготавливая материал, они сами узнают его намного лучше. Это как включить у AI режим thinking - "дай ответ и покритикуй его"

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

#article #learning

Дал порассуждать о Vue разным LLM

ChatGPT: Давайте сразу к делу. Vue.js выделяется благодаря мягкому порогу вхождения и интуитивно понятному синтаксису. Это делает его идеальным как для новичков, так и для опытных разработчиков, которым нужна быстрая прототипизация или интеграция в существующие проекты. Его компонентная архитектура также способствует поддержанию кода.

Llama: Согласен, его реактивная система — это еще один большой плюс, позволяющий эффективно и автоматически обновлять данные, что делает Vue сильным конкурентом React и Angular.

DeepSeek: Добавлю, что однофайловые компоненты Vue (.vue-файлы) — это настоящий прорыв: шаблон, логика и стили собраны вместе, но при этом соблюдается разделение ответственности. Такая элегантная инкапсуляция улучшает опыт разработчика по сравнению с JSX в React или тяжелыми декораторами Angular.

Cohere: Также стоит отметить прогрессивность Vue — его можно внедрять постепенно, от добавления реактивности на статические страницы до создания полноценных SPA. В отличие от подхода Angular «всё или ничего», эта гибкость делает Vue идеальным для миграции устаревших проектов. Однако его экосистема меньше, чем у React, что может быть важно для сложных корпоративных приложений.

Llama: Развивая мысль Cohere, постепенное внедрение Vue и его гибкость делают его отличным выбором для легаси-проектов, а реактивная система, как я уже говорил, обеспечивает эффективные обновления, давая ему преимущество перед конкурентами.

Cohere: Точно! Vue находит редкий баланс между мощью и доступностью. Структура .vue-файлов гениальна — это как компонентная модель React, но с читаемостью HTML. Хотя поклонники JSX могут не согласиться, синтаксис шаблонов Vue часто оказывается более удобным для поддержки в командах с разным уровнем навыков.

Llama: Развивая мысль Cohere, баланс Vue между мощью и простотой, а также структура .vue-файлов делают его идеальным для команд с разным уровнем подготовки, укрепляя его позиции как одного из лучших фронтенд-фреймворков.

system:
Ключевые аргументы:
- Vue.js обладает мягким порогом вхождения и понятным синтаксисом, что идеально для новичков и опытных разработчиков.
- Его компонентная архитектура и реактивная система обеспечивают удобство поддержки и эффективные обновления.
- Постепенное внедрение и гибкость Vue делают его подходящим для легаси-проектов и команд с разным уровнем навыков.

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

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

#ai #react #vuejs

Вопрос: что лучше, React или Vue?

ChatGPT: Хорошо, уважаемые коллеги. На мой взгляд, понятие «лучше» субъективно. Мощная экосистема React и большое сообщество обеспечивают непревзойденную поддержку, тогда как Vue.js выделяется своей простотой и легкостью интеграции. Идеальный выбор во многом зависит от потребностей проекта и опыта команды.

DeepSeek: Я бы сказал, что прогрессивная природа Vue дает ему преимущество в большинстве проектов. Мягкий порог вхождения позволяет командам внедрять его постепенно, без серьезных переделок. JSX в React, хоть и мощный, добавляет ненужную сложность во многих случаях. Однофайловые компоненты Vue находят лучший баланс между мощью и простотой.

Gemini: Согласен с DeepSeek. Прямолинейная структура Vue ускоряет разработку, особенно для небольших команд или проектов, где важен быстрый прототипинг. Хотя экосистема React обширна, ориентироваться в ней может быть трудоемко. Vue предлагает более плавный вход.

ChatGPT: Поддерживаю DeepSeek и Gemini. Постепенное внедрение Vue и его простая структура дают преимущества, особенно для небольших проектов или команд, ценящих скорость. Хотя экосистема React мощнее, удобство Vue может быть серьезным плюсом.

Llama: Я по-прежнему считаю, что обширная экосистема React — важное преимущество для крупных и сложных проектов, но в большинстве случаев простота и легкость освоения Vue делают его более привлекательным выбором, как отметили DeepSeek и Gemini.

DeepSeek: Однонаправленный поток данных React действительно обеспечивает более предсказуемое управление состоянием в масштабе. Но Composition API во Vue 3 значительно сокращает этот разрыв, сохраняя преимущество в доступности. Какие мысли?

Cohere: Ты поднимаешь справедливый вопрос, DeepSeek. Хотя Composition API Vue улучшает масштабируемость, зрелые подходы React к управлению состоянием (например, Context + useReducer) все же дают ему преимущество в сложных приложениях. Однако в 80% проектов более мягкий порог вхождения Vue и его «всё включено» приносят больше пользы сразу.

system:
Ключевые аргументы:
1. Экосистема React выгодна для крупномасштабных проектов.
2. Vue.js предлагает простоту, легкость интеграции и мягкий порог вхождения.
3. Идеальный выбор зависит от потребностей проекта и опыта команды.

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

Итог:
Для большинства проектов Vue.js — более привлекательный выбор благодаря простоте и легкости освоения, тогда как экосистема React полезна для сложных и крупномасштабных приложений.

#ai #react #vuejs

Для синхронизации или передаче данных между разными вкладками можно использовать LocalStorage

Во Vue можно даже сделать реактивную обертку.

Но можно гораздо проще и эффективней - через Broadcast Channel API. C помощью него можно создавать канал, постить в него сообщения и слушать сообщения приходящие в этот канал.

// Создаем канал
const bc = new BroadcastChannel("share_channel");

// Посылаем сообщение в канал
bc.postMessage("Сообщение какое-то");

// Ловим событие в канале
bc.onmessage = (event) => {
  console.log(event);
};

Также postMessage можно использовать для связи открытых окон ( login ) с родительским окном - window.opener.postMessage()

#js

Доклад Дениса Чернова про композаблы с митапа MskVue.js #13

Канал московского vuejs бомонда

#event