Vue-FAQ
923 subscribers
561 photos
90 videos
556 links
Канал сайта https://vue-faq.org
Информация о Vue.js, фронтенд разработке и не только

Contacts: @RuslanMakarov
Download Telegram
1. Утром пришло "письмо счастья"

2. Кликнул на ссылку

3. Вспомнилось...

#ai
Кто занимается микрофронтендами - познавательная статья Micro Frontends на сайте Мартина Фаулера

#microfrontends #architecture #bestpractices
Примеры файловых структур Vue проекта для плоской, атомарной, модульной и FSD архитектур

Предпочитаю всегда модульную с небольшими вариациями

#architecture #fsd
Комментарии к прошлому посту ярко показывают, стоит ли тащить в свой проект чудо природы под названием FSD.

Модульная архитектура даёт понятную четкую декомпозицию проекта, хорошо разделяя ShoppingCart от UserAccount, например. Позволяя видеть в файловой панели только относящиеся к нужному модулю ресурсы, и работать над модулями независимо.

Общие элементы типа BaseButton можно держать в App, а можно выделить под них отдельный проект (вроде своей дизайн системы) и подключать папкой ui через git submodules. Так же, как и объекты типа api.

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

Довольно сложный вопрос, где держать и как наименовать файлы с бизнес-логикой - как реактивной, так и обычной. Однозначного совета пока нет. Скорей тут надо использовать программерские подходы из обычного ООП.

#architecture
Одна из проблем при разработке нативных js бандлеров типа Rolldown и Rspack - они должны работать в WASM для возможности их запуска в браузере ( StackBlitz, Bolt.new и т.п.)

Это довольно сложно реализовать, и Rspack отказался от этого. Но Rolldown, по словам Эвана Ю, будет поддерживать билд в браузерных средах и уже показывает хорошую производительность в них.

#rolldown #rspack
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Как AI заменит программистов

#ai #humor #video
Мэйнтенер Volar Джонсон со своим помощником последние недели носятся с alien-signals - своей реализацией Signals в JS

Уверяют, что она самая быстрая, и пытаются встроить ее везде где могут - в системы стейт менеджмента для Solid.js, Dart, Lua. Движение unjs выходит за рамки js.

Пока наталкиваются на "непонимание".

Также хотят встроить ее во Vue. Эван, вроде, одобряет.

Но по поводу увеличения скорости на проценты хотелось бы спросить Эвана - зачем же он тогда перешел на js Proxy в своей системе реактивности и ухудшил производительность в десятки и сотни раз, если скорость так важна?

#vuejs #performance #reactivity
Попалось полезное VS Code расширение

На больших проектах вместо того, чтобы выносить часто используемые файлы в Favorites, можно прятать редко используемые в Hide files

От автора React SFC

#vscode
Присоединяюсь к трём китам современной эпохи.

Наш ответ всем мудакам.

#qoute
Раскрывающиеся аккордеоны удобно делать через стандартный details HTML элемент.

Чтобы сделать группу (раскрытым может быть только один элемент единовременно), нужно добавить атрибут name с одним и тем же значением.


<details name="some-group">
<summary>1</summary>
<p>…</p>
</details>
<details name="some-group">
<summary>2</summary>
<p>…</p>
</details>
<details name="some-group">
<summary>3</summary>
<p>…</p>
</details>


Также details поддерживает хорошую стилизацию - пример
(Небольшая часть этого работает пока только в Chromium)

#html #accordion
Мы уже писали об Ark UI библиотеке

На днях видный член vuejs core team и VitePress maintainer
Divyansh Singh назвал их лучшей альтернативой React Aria во Vue экосистеме

Unstyled, хорошая поддержка A11y. Vue версия еще неполная. Документация скудная, не для вкатунов. Нужно думать. Основана библиотека на zag.js, документацию можно смотреть там.

Выглядит очень хорошей альтернативой radix/reka/shadcn|vue, только без встроенных tailwind-ов, vueuse-ов, unjs-ов, tanstack-ов и других скрытых зависимостей и обмана типа "copy-paste и всё".

Попробовал на своем проекте. Сперва заменил FilePond на FileUpload - (-100Kb; +30Kb). Стало значительно красивей и намного кастомизируемей (стили генерил AI). Затем добавил Tabs (+20Кб). Затем - Combobox с тэгами и выпадающим меню, которое во многих UI библиотеках тащит 200-400Кб из-за позиционирования - (+70Кб). В общем, вполне экономично и удобно для создания своего небольшого UI kit с требованиями к A11y.

Ну и правильный DatePicker можно собрать.

#ui #lib #headless #arkui