Предлагаю поделиться в комментариях тремя вещами, которые делают вашу работу комфортной и эффективной. Что-то неординарное, а не такое банальное и мастхэвное, как
Начну:
1. Remote разработка на мини пк
2.
3. @sxzz/eslint-config
#dx
Vite
, например.Начну:
1. Remote разработка на мини пк
2.
Cursor IDE (AI помощник)
3. @sxzz/eslint-config
#dx
Кто занимается микрофронтендами - познавательная статья Micro Frontends на сайте Мартина Фаулера
#microfrontends #architecture #bestpractices
#microfrontends #architecture #bestpractices
martinfowler.com
Micro Frontends
How to split up your large, complex, frontend codebases into simple, composable, independently deliverable apps.
Примеры файловых структур Vue проекта для плоской, атомарной, модульной и FSD архитектур
Предпочитаю всегда модульную с небольшими вариациями
#architecture #fsd
Предпочитаю всегда модульную с небольшими вариациями
#architecture #fsd
Комментарии к прошлому посту ярко показывают, стоит ли тащить в свой проект чудо природы под названием
Модульная архитектура даёт понятную четкую декомпозицию проекта, хорошо разделяя
Общие элементы типа
Между модулем и однофайловым компонентом есть промежуточные структуры - виджеты типа
Довольно сложный вопрос, где держать и как наименовать файлы с бизнес-логикой - как реактивной, так и обычной. Однозначного совета пока нет. Скорей тут надо использовать программерские подходы из обычного ООП.
#architecture
FSD
.Модульная архитектура даёт понятную четкую декомпозицию проекта, хорошо разделяя
ShoppingCart
от UserAccount
, например. Позволяя видеть в файловой панели только относящиеся к нужному модулю ресурсы, и работать над модулями независимо.Общие элементы типа
BaseButton
можно держать в App
, а можно выделить под них отдельный проект (вроде своей дизайн системы) и подключать папкой ui
через git submodules
. Так же, как и объекты типа api
.Между модулем и однофайловым компонентом есть промежуточные структуры - виджеты типа
FileUploader
, например, в которых есть чисто их композаблы, утилиты, компоненты, типы. Их удобно держать в своих папках без разделения по поддиректориям.Довольно сложный вопрос, где держать и как наименовать файлы с бизнес-логикой - как реактивной, так и обычной. Однозначного совета пока нет. Скорей тут надо использовать программерские подходы из обычного ООП.
#architecture
Одна из проблем при разработке нативных
Это довольно сложно реализовать, и
#rolldown #rspack
js
бандлеров типа Rolldown
и Rspack
- они должны работать в WASM
для возможности их запуска в браузере ( StackBlitz
, Bolt.new
и т.п.)Это довольно сложно реализовать, и
Rspack
отказался от этого. Но Rolldown
, по словам Эвана Ю
, будет поддерживать билд в браузерных средах и уже показывает хорошую производительность в них.#rolldown #rspack
Мэйнтенер
Уверяют, что она самая быстрая, и пытаются встроить ее везде где могут - в системы стейт менеджмента для
Пока наталкиваются на "непонимание".
Также хотят встроить ее во
Но по поводу увеличения скорости на проценты хотелось бы спросить Эвана - зачем же он тогда перешел на
#vuejs #performance #reactivity
Volar
Джонсон со своим помощником последние недели носятся с alien-signals
- своей реализацией Signals
в JSУверяют, что она самая быстрая, и пытаются встроить ее везде где могут - в системы стейт менеджмента для
Solid.js
, Dart
, Lua
. Движение unjs
выходит за рамки js
.Пока наталкиваются на "непонимание".
Также хотят встроить ее во
Vue
. Эван, вроде, одобряет.Но по поводу увеличения скорости на проценты хотелось бы спросить Эвана - зачем же он тогда перешел на
js
Proxy
в своей системе реактивности и ухудшил производительность в десятки и сотни раз, если скорость так важна?#vuejs #performance #reactivity
Попалось полезное
На больших проектах вместо того, чтобы выносить часто используемые файлы в
От автора React SFC
#vscode
VS Code
расширениеНа больших проектах вместо того, чтобы выносить часто используемые файлы в
Favorites
, можно прятать редко используемые в Hide filesОт автора React SFC
#vscode
Visualstudio
Hide files - Visual Studio Marketplace
Extension for Visual Studio Code - Exclude files that are occasionally used from being displayed in the explorer
Раскрывающиеся аккордеоны удобно делать через стандартный
Чтобы сделать группу (раскрытым может быть только один элемент единовременно), нужно добавить атрибут
Также
(Небольшая часть этого работает пока только в
#html #accordion
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
codepen.io
Styling <details>: Horizontal Accordion
...