Зачем Pinia, если можно написать свой стор?

Захотелось ответить на очень однобокий взгляд вот здесь - https://t.me/vuejs_ru_feed/37

Во-первых, это не велосипед, а решение под нужды своего проекта.

1. "Унификация и единый API". А давайте всех побреем и будем ходить строем. Сперва под Options API ходили, под Mixins API, под Vuex API, а теперь под Pinia API. Все, что было раньше и теперь на свалке, очевидно, было сразу плохо и временно, а вот Pinia API - это круто и навсегда, конечно

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

3. Кроме ES модулей реализовать паттерн Singleton можно еще несколькими способами, если в этом есть необходимость по архитектуре приложения.

4. BFF SSR - зло и труп. Оставьте его врагам.

5. Какая-то надуманная проблема. Вы пишете сайты на десятки тысяч DOM элементов, а потом беспокоитесь, очистит ли GC покупательскую корзину, на которую [не] осталось ссылок?

6. А зачем очищать "глобальный стор"? Что под этим имеется ввиду, и как часто это надо делать? user = null; - это очищение стора? Свой стор не очищается при необходимости одной строчкой?

Еще раз, если у тебя в реактивных переменных столько данных, что они съедают значительную часть памяти веб-приложения и тормозят его - значит ты делаешь что-то не так. Эван для этого и придумал Reactivity API, возможности которого Pinia сильно обрезает.

И, нет, память это не освободит, а пометит для GC, который вряд ли на этом сработает в большинстве случаев.

7. Почему они должны быть объединены?

9. Реклама чужих велосипедов, таких же порой неправильных, тормозных и ненужных, как и во VueUse, в попытке сделать из Vue конструктор для вкатунов

10. Такое пишут люди, которые привыкли к Pinia и к её формату. Никаких проблем в работе в DevTools с обычными ("глобальными") реактивными переменными нет.

Ну и определять архитектуру приложения на основе своих предпочтений работы в DevTools - такое.

—

У не-Pinia решений есть плюсы. Ты не ходишь строем, а ходишь, как тебе удобно, используя в полной мере Vue Reactivity API.

—

На самом деле в оригинальном посте пропущен главный пункт, такой же как с Накстом:

11 . Когда в команде много слабо квалифицированных программистов, которые могут написать дичь, удобно всем ходить строем.

Ответ:

11. Повышайте уровень своих джунов до уровня проекта, а не опускайте проект до уровня джунов.

#pinia #reactivity

Лафхак: в Cursor можно подключить модели из OpenRouter

Функционал у них в режиме Агента поменьше, но править файлы могут

Может быть полезно потому, что:

1) На OpenRouter огромное количество разных моделей, в том числе, специфичных
2) Можно подобрать неплохие бесплатные
3) Платные на небольших и средних заданиях могут выйти раз 5-10 дешевле курсоровских
4) OpenRouter можно оплатить криптой

Настраивать в OpenAI разделе

#ai #cursor #openrouter

Вчера устроил небольшой AI батл.

На бэкенде надо было разгрести код (PHP), разбить по модулям. Несколько десятков классов. Запросил мнения 4 LLMs

- horizon-beta
- o3
- sonnet 4
- gpt4.1

Gemini-2.5 Pro начала работать, но сломалась. Такое с ней бывает в Cursor-e

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

horizon-beta понравилась быстротой и легкостью (в хорошем смысле) рассуждений. Непонятно, откуда она взялась. В кодинге не очень хорошо видит контекст.

o3 выдала очень полезное точечное решение.

sonnet подходит ко всему обстоятельно, но сидит в своих фиксированных рамках. Вот только так он хочет делать, а по-другому плохо. И код твой он так же перелопачивает под свою дудку, если дать волю.

В итоге сделал компиляцию первых двух, и зашлифовал sonnet-ом.

#ai #cursor

Давно Минина не было

Вышло сегодня "собеседование" на senior позицию Vue (React) разработчика

Два чувака не стесняясь несут откровенную пургу
Не стесняясь - потому что работают исключительно на свою безмозглую вкатунскую аудиторию

Немного потыкал
Особенно понравилось вот это - "Особенности использования FSD в Vue"
Не смотрите, что там всего 18 секунд, они смогли осветить всё, что vue fsd-эшники так хотели знать

Видео: Youtube | Rutube

#minin

В Cursor появился GPT 5

Попробовал - по-моему, прям ощутимо лучше Sonnet 4

Когда надо было сделать модульный стор с запретом использовать Pinia, сгенерил такое:

/**
 * RecordingsRepository provides a single facade for listing and mutating
 * recordings, hiding the origin (client/server) and orchestrating syncing.
 * It is intentionally simple and uses module-level reactive state.
 */
class RecordingsRepositoryImpl {
  private storage = useStorageManager();
  private api = useRecordingApi();

  recordings = ref<Recording[]>([]);
  error = ref<string | null>(null);

  ...

}

export const recordingsRepository = new RecordingsRepositoryImpl();

export function useRecordingsRepository() {
  return recordingsRepository;
}

Кажется, это решение решает проблему цикличных импортов, который бывает с export a = ref(); на уровне JS модуля

#ai

Триллер

Скоро во всех кинотеатрах

#video #vite #evanyou

Чат @vuejs_ru разродился еще двумя чатиками

Новая группа @vuejs_careers для обсуждения работы и трудоустройства на ниве Vue.js

И еще одна группа @vuejs_careers_feed с вакансиями и резюме соискателей Vue.js направленности

#job

10 вопросов проверить свою CSS грамотность

Ответы тут

#css

Невзлетевший стейт менеджер - Vaxee

С неплохими идеями и плохим маркетингом и связями

Есть какой-нибудь получивший распространение Vue продукт, сделанный не бандой Nuxt-a и Ко?

#reactivity #pinia

Composables-first подход

Это когда:

1. Сперва проектируешь модели данных (ts типы и js классы)
2. Затем создаешь composables и модульные сторы, которые самостоятельно имплементируют всю бизнес логику
3. И только после создаешь компоненты, которые используют эти композаблы

(В противовес сперва созданию компонентов, и затем выделению из них композаблов.)

Получаем более лучшее переиспользование, тестируемость, масштабируемость, и из формошлёпов превращаемся во фронтенд-архитекторов.

P.S. Термин и концепцию "сomposables-first" предложил `sonnet 4`. На момент предложения в Гугле ничего похожего не нашлось.

#architecture #ai

Случайно обнаружил, что pnpm понимает package.json5

Дилбрейкер

npm явно отвергла идею нативной поддержки JSON5 в package.json. Их аргументация заключается в том, что это вызовет слишком большие потрясения в экосистеме, поскольку множество инструментов ожидают строгого JSON, и в Node.js отсутствует встроенный парсер JSON5 .

#pnpm #npm #json

Откуда логотип `Apple`?

Алан Тьюринг (1912–1954) — британский математик, логик и криптограф, один из основателей современной информатики. Его работы заложили основы теории алгоритмов и искусственного интеллекта. Во время Второй мировой войны Тьюринг сыграл ключевую роль в расшифровке сообщений немецкой машины «Энигма», что значительно сократило продолжительность войны и спасло тысячи жизней.

В 1952 году Тьюринг был осуждён по обвинению в «грубой непристойности» из-за своей гомосексуальности, которая в Великобритании тогда считалась уголовным преступлением. Вместо тюремного заключения он подвергся принудительной гормональной терапии («химической кастрации»), что повлекло потерю доступа к секретным проектам и серьёзные последствия для его здоровья.

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

В 2013 году Тьюринг был посмертно помилован королевой Елизаветой II.

#history #apple

Cursor выпустил CLI версию себя

Теперь им можно пользоваться в любом другом IDE или в терминале. Выглядит забавно.

Еще из приятных новостей - в нем убрали ограничение на max 25 tool calling за раз. Теперь он может исправить 60 ошибок линтера и сделать еще кучу всего за один вызов. Очень удобно и экономно.

—

Меж тем MCP сервера, о которых совсем недавно я писал как о какой-то новинке, захватили AI мир. Их уже тысячи, если не десятки тысяч.

Пример, которыми пользуюсь я:

1) Ark-UI - MCP сервер используемой мной UI библиотеки. Содержит документацию и примеры кода по компонентам. Раньше приходилось скармливать IDE ссылку на доку, она часто ошибалась при генерации и исправлении ошибок, а сейчас сказал - "мне надо BaseSelect как обертку над ark select", и сразу получаешь рабочий код.

2. MySQL MCP сервер позволяет IDE работать с БД, - например, читать таблицу логов. Теперь она может тестируя свою работу в одном запросе писать тестовые файлы и сразу проверять гипотезы по логам и приходить к нужному результату быстрее.

3. Context7 - содержит актуальные документации к большому количеству библиотек. Включая Vue, естественно.

#ai #cursor #mcp

На чем они учат Sonnet?

Скоро матерится начнёт...

#ai

Cursor выпустил курс (с русским переводом) как работать с AI агентами
Вполне годный материал.

А я тут неожиданно понял, что работать в Cursor полезно для здоровья
С обычным IDE как? Сидишь и пашешь, сконцентрировавшись, голову поднять некогда. А тут загрузил ему промпт на 10 пунктов минут на 5 работы, и пошел, походил, отжимания поделал.
Пробовал одновременно с двумя агентами работать, но чревато коллапсом.

Меж тем с ужасом интересом жду, когда Cursor поменяет свою тарифную модель. Сейчас за $20 они дают 500 запросов. Но хотят (и уже пытались) брать по цене Антропика, которая в табличке справа. 500 запросов в $2K выйдут

#ai #cursor

После каких-то изменений в SFC шаблоне перестали разворачиваться рефы для TS

Хочет добавления .value

У кого-то еще такое есть?

#ts

Написал статью, как получить бесплатно облачные ресурсы стартапу (и не только).
Может кому пригодится

#article #startup #money

CSS продолжает развиваться в сторону языка программирования

Начиная с Chrome 140 и Safari 18.2 стала возможна арифметика с разными единицами размерности

Источник

.container {
  position: relative;
  
  i {
    --angle: calc(sibling-index() * 10deg);
    --distance: calc(var(--angle) / 360deg * 180px);
    
    position: absolute;
    inset: -0.5em;
    background-color: #fff;
    border-radius: 50%;
    transform: rotate(var(--angle)) translateX(var(--distance));
  }
}

<div class="container">
  <i></i>
...
  <i></i>
</div>

#css

Как делается статистика

Наткнулся на сайт wmtips.com, типа собирающий подробную статистику по инету.
Причем, запустивший этот сервис в январе 2025 года. Самый свежачок.

Ну там красивые цифры, Vue за React-ом, в Китае и Казахстане первые, и много других деталей
Выглядит доверительно
Вниз по странице опускаюсь - и тут такая картинка версий Vue в интернете

После такого Росстат зауважаешь...

#stats

В media queries нельзя использовать CSS свойства, но есть обходные пути через container queries

@property --inline-size-s {
  syntax: "<length-percentage>";
  inherits: true;
  initial-value: 100vi;
}

:root {
  --breakpoint-s: 48em;
  --inline-size-s: min(var(--breakpoint-s), 100vi);
}

body {
  background-color: var(--bg-color);

  --bg-color: oklch(0.94 0.01 99);
  
  @container style(--inline-size-s: var(--breakpoint-s)) {
    --bg-color: oklch(0.87 0.21 95.82);
  }
}

#css

В проекте число иконок перевалило за 150, а их объем в JS бандле занимает пятую часть.

Поэтому задумался, как оптимизировать это дело. Стандартных решений не нашел. Решил вынести все иконки для кэширования через service worker. SVG спрайт слишком тяжелый для клиента, поэтому засунул всё в JSON, который считываю в JS и делаю Map по HTML кодам иконок.

На первой загрузке сайта получается лишний запрос. Потом норм.

Есть что-то более оптимальное?

#svg #optimization