VueJS *

Обновили кейс с Гринатом — и не просто освежили текст, а напомнили себе, насколько масштабный и значимый это проект.

Разработка Платформы доверенных сервисов (ПДС) продолжается, и вместе с АО «Гринатом» мы последовательно развиваем систему, которая стала цифровым фундаментом юридически значимого документооборота в атомной отрасли.

В рамках проекта мы реализовали:
— выпуск и учёт всех типов электронных подписей (УКЭП и УНЭП);
— автоматизированную систему управления сертификатами и СКЗИ;
— интеграцию с кадровыми базами, ЕСИА и СМЭВ;
— удобные API для других ИТ-систем;
— масштабирование до 100 000+ пользователей.

Впереди — новые этапы развития: интеграция с ЕБС и другими сервисами. Мы продолжаем делать ПДС удобным, масштабируемым и устойчивым решением для всей отрасли.

Прочитайте обновлённый кейс на сайте и посмотрите, как именно мы решаем нетривиальные задачи в высокорегулируемой среде.

➡️ Читать статью

AI-кодинг в 2025: Напарник, Фабрика или Облачная Песочница? Сравниваем Cursor, Replit, v0.dev и Harvi

Привет, Хабр!

Экосистема AI-инструментов для разработки разрастается с невероятной скоростью. Уже недостаточно просто иметь автодополнение кода; на сцену выходят полноценные среды разработки, способные понимать контекст, генерировать интерфейсы и даже самостоятельно проектировать архитектуру.

Я решил разобраться в четырех популярных, но идеологически разных подходах, чтобы понять, какой инструмент для каких задач подходит лучше всего. В нашем обзоре: Cursor (AI-напарник в IDE), Replit (облачная песочница), v0.dev (генератор UI-компонентов) и первая в России вайбкодинг студия Harvi.pro (AI-фабрика приложений).

1. AI как Напарник в вашей IDE (Cursor)

Cursor – это "VS Code на стероидах". Он не меняет ваш привычный воркфлоу, а глубоко интегрирует AI для помощи в написании и рефакторинге кода, отладке и поиске информации.

• Идеально для: работы с существующей кодовой базой, написания сложной бизнес-логики, точечных правок.

• Минус: Не проектирует приложение с нуля. Всю архитектуру и структуру вы держите в голове.

2. AI как Облачная Песочница (Replit)

Replit предлагает полноценную среду разработки прямо в браузере. Его главная фишка – возможность мгновенно запустить любой проект без локальных настроек. AI здесь выступает как мощное дополнение к этой облачной среде.

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

• Минус: Для больших и сложных локальных проектов может быть не так удобен. Мощность AI-ассистента, хоть и велика, но все же является частью общей платформы.

3. AI как Генератор UI-компонентов (v0.dev от Vercel)

v0 – это узкоспециализированный инструмент, который делает одну вещь, но делает ее отлично. Вы описываете интерфейс, а он генерирует готовые React-компоненты с использованием Tailwind CSS.

• Идеально для: фронтенд-разработчиков и дизайнеров, которым нужно быстро создавать красивые, адаптивные UI-компоненты.

• Минус: Это не полноценная среда разработки. Он не занимается логикой, бэкендом или структурой всего приложения.

4. AI как "Фабрика Приложений" (Harvi.pro)

Российский проект Харви предлагает иной подход, который можно назвать "вайбкодингом". Это веб-студия, где вы описываете общую концепцию, а AI генерирует всю структуру проекта – от фронтенда на Nuxt/Next.js до бэкенда на Node.js. Также интересно то, что это первопроходец, созданный нашими Русскими ребятами в России

• Идеально для: молниеносного создания MVP с нуля, проверки бизнес-гипотез, быстрого старта для фулстек-приложений.

• Минус: Как и любой генератор, AI может ошибаться, и сгенерированный код требует итеративной доработки в веб-редакторе, что может быть непривычно.

Выводы: нет "лучшего", есть "подходящий"

Как видим, идеального инструмента на все случаи жизни не существует. Выбор зависит от конкретной задачи:

• Нужно доработать сложный проект? Ваш выбор – Cursor.

• Хотите быстро проверить скрипт или поработать над проектом в команде? Replit к вашим услугам.

• Нужно быстро нарисовать красивый фронтенд? v0.dev сэкономит кучу времени.

• Нужно с нуля "родить" скелет целого фулстек-приложения для MVP? Harvi.pro может оказаться самым быстрым решением.

Доброго времени суток уважаемые хабровчане. Сегодня, после того, как 100500й раз ответил на вопрос "а как отобразить svg иконку в приложении, да так, чтобы и эффекты применялись, и не слишком много заморочек было" твёрдо решил написать этот пост и поделиться с вами компонентом, который я написал сам и использую в своих приложениях, чтобы в дальнейшем можно было банально кинуть ссылку и не отвлекаться от текущих дел и мыслей.

https://www.npmjs.com/package/svgue

Легковесный компонент, без "лишнего багажа" и простой в использовании.

Обновил Блог!

Ушла эпоха, ушла первобытная романтика и подкупающая искренность прошлого дизайна.

Теперь он новый, свежий, минималистичный и с доработками.

Подробнее в статье

Также буду благодарен, если найдёте баги - пишите о них в комментариях.

Если у вас в Vite проекте есть данные в json файлах, то иногда удобней работать с json5 (+комментарии и переносы строк, как минимум)

Для этого надо:

1. Поставить Vite плагин vite-plugin-json5

2. Поставить расширение json5 для VS Code для подсветки синтаксиса

3. Чтобы не ругался TypeScript, прописать в index.d.ts:

declare module "*.json5" {
  const value: any;
  export default value;
}

Стало намного удобней.

Бандл не меняется.

Посчитай свой кредит!

Как и обещал в прошлом посте - чуть более серьезный проект:

Калькулятор Кредита

Иногда планирую крупную покупку и считаю кредит + проверяю предложения от кредиторов, чтобы знать не добавили ли они что-то.

Все инструменты для этого, которые находил, мне не нравились - поэтому сделал свой.

Самый быстрый, удобный и красивый калькулятор кредита!

Сохранение данных (даже в ссылке), диаграмма, таблица платежей и % переплаты - все на месте.

Наслаждайтесь)

Кнопка со счётчиком: React vs Fusor

Fusor это новый способ разработки вэб приложений https://github.com/fusorjs/dom

Производственный календарь

Мини-сервис, который позволит удобнее выяснить свою ЗП (аванс и оплату)

Открыт к предложениям по улучшению

Вышла Vue 3.5.0-beta.1

В ней уже есть useTemplateRef - функция, заменяющая нынешний способ определения шаблонного рефа (template ref).

Основные проблемы старой реализации - неочевидность привязки переменной в скрипте по имени к элементу в шаблоне и неудобство использования шаблонного рефа в composable функциях.

Теперь привязка будет по строковому ключу

При попытке пользователя уйти с сайта (exit-intent), можно показывать сообщение (просьба остаться, предложение сохранить сделанные изменения и т.п.)

Вот Vue 3 композабл для этого
------

_{Telegram-канал о Vue.js и фронтенд-разработке: @vuefaq, вебсайт: Vue‑FAQ.org}

Связи между компонентом и слотом во Vue 3

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

<!-- <MyComponent> template -->
<div>
  <slot :text="msg"></slot>
</div>

<MyComponent v-slot="{ text }">
  {{ text }}
</MyComponent>

Часто нужно и событие из слота переслать в ребенка. Напрямую сделать это нельзя, но можно также пропсом передать слоту ссылку на метод в ребенке, который тот и вызовет по событию:

<!--   FormField   -->
<script setup>
const touched = ref(false);
</script>

<template>
  <div class="form-field">
    <slot :touch="() => { touched = true }" />
    ...    
  </div>
</template>

<!-- использование -->
<FormField v-slot="{ touch }">
  <BaseInput @input="touch()" />
</FormField>

Этот хак бывает очень полезен и не выходит за рамки правила: "Пропсы вниз, события вверх".

Источник

Аргументация против глобальных автоимпортов (типа тех, что в Nuxt)

1. Это явно - ты всегда видишь, откуда взялся компонент и в один клик можешь провалиться в него, а не в *.d.ts ;)

2. Это наглядно видно не только в редакторе, но и на всяких гитхабах, когда смотришь там код, с автоимпортами тебе придется гадать, откуда взялся компонент

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

4. Не нужно генерировать портянку *.d.ts для того, чтобы редакторы видели их, и, как следствие, без них ты получаешь более качественный тулинг и анализ твоего кода

5. Ты уверен, что тришейкинг работает правильно и ты явно контролируешь загрузку каждого конкретного компонента в каком-либо месте, а не полагаешься на то, что за тебя это каким-то магическим образом сделает автоимпорт

6. Импорты может проставлять сама IDE, а еще их можно сворачивать в 1 строку, если визуально отвлекают

Источник

Разница между адаптивностью (слева) и отзывчивостью (справа)

Во Vue 3, чтобы выделить из компонента отдельно некий функционал с реактивным состоянием, были созданы composable функции (называемые "функциями", хотя по сути это объект созданный через js замыкание - closure).

Чтобы использовать функционал с реактивным состоянием между несколькими компонентами, можно задействовать js модули либо Pinia/Vuex сторы.

Иногда нужно нечто среднее - подобную сущность с реактивным стейтом и функционалом на нем, но используемую в нескольких связанных компонентах (например, в Tabs или каких-то виджетах), - то есть, в некотором локальном контексте. Для этого можно в общем родительском компоненте создать composable, который передать потомкам - либо через provide/inject (лучше), либо через props (не надо).

В этом случае данный реактивный объект будет жить в своем ограниченном контексте и не будет конфликтовать с оставшейся частью проекта.

// Vue 3
const app = createApp(App);
app.config.errorHandler = (err) => {
  alert(err);
};

Во Vue можно создать собственный обработчик ошибок и ворнингов для лучшей обработки ошибок для улучшения UX.

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

Обработчик ворнингов работает только в dev режиме.

29 и 30 июня 2024 года Certificates.dev бесплатно на 48 часов откроет доступ к тренировочным материалам на соискание ученой степени Certified Vue.js Developer.

Включает в себя теорию, задачи по кодированию и пробный экзамен.

------

Наш Telegram-канал о Vue и фронтенд-разработке: @vuefaq и вебсайт: Vue‑FAQ.org.

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

Но:

1. Это не композабл по определению

2. Там не обязательно рефы

3. Они не "глобальны"

В общем случае структура данного объекта - экспортируемые из ES модуля реактивные данные и функции для работы с ними.

Функционально они заменяют "сторы" Pinia. Называть их тоже stores - двусмысленно и нелогично. Вообще, молиться на "глобальный стейт" после появления идеи JavaScript signals и их всевозможных реализаций, включая Vue Reactivity API, архаично.

Мне кажется, самое подходящее название для данной конструкции - [реактивный] бизнес объект (РБО) или Vue Business Object (VBO). В них инкапсулируется логика предметной области и приложения, они не привязаны к конкретным компонентам, и по аналогии с другими языками и фреймворками, этот паттерн - Business Object, - выглядит вполне подходящим.

Техническая реализация может быть через ES классы, ES модули, closures, Pinia stores, с использованием singleton или DI.

Кроме того, позиционирование именно как "бизнес объект" будет требовать явного отделения от него презентационного и инфраструктурного слоев - работы с Backend API, например. То есть, стимулировать использование лучших практик и наработок из других сфер разработки ПО, еще более переводя Vue.js из фреймворка для небольших проектов в разряд enterprise level решений.

--------------

Telegram-канал о Vue и фронтенд-разработке: @vuefaq и вебсайт: Vue‑FAQ.org.

Состоялся выпуск второй мажорной версии инструментария vue-ray. Исходный код проекта опубликован на GitHub под лицензией MIT.

Предыдущая стабильная версия проекта vue-ray v1.17.4 вышла в мае 2023 года.

Проект vue-ray позволяет проводить отладку кода Vue с помощью Ray, чтобы быстрее устранять проблемы. Установите этот пакет в любой проект Vue 3, чтобы отправлять сообщения в приложение Ray.

Q-OTP - двухфакторная аутентификация на VueJS.

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

Компонент подключается как Quasar App Extension:

quasar ext add q-otp

Пример подключения:

<template>
  <QOtp
      field-classes="q-ml-xs q-mr-xs"
      @complete="(code) => alert(code)"
  />
</template>
<script lang="ts" setup>
  import QOtp from 'quasar-app-extension-q-otp'
</script>

Исходный код доступен на Гитхаб под лицензией MIT.

Продолжается перевод книги Vue.js 3 Design Patterns and Best Practices

На данный момент переведено 6 глав:

• Глава 1, Фреймворк Vue 3

• Глава 2, Принципы и шаблоны проектирования программного обеспечения

• Глава 3, Создание рабочего проекта

• Глава 4, Композиция пользовательского интерфейса с помощью компонентов

• Глава 5, Одностраничные приложения

• Глава 6, Прогрессивные веб-приложения