Кто занимается микрофронтендами - познавательная статья 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.
👍2❤1🔥1👏1
Примеры файловых структур Vue проекта для плоской, атомарной, модульной и FSD архитектур
Предпочитаю всегда модульную с небольшими вариациями
#architecture #fsd
Предпочитаю всегда модульную с небольшими вариациями
#architecture #fsd
👍22❤1🐳1
Комментарии к прошлому посту ярко показывают, стоит ли тащить в свой проект чудо природы под названием
Модульная архитектура даёт понятную четкую декомпозицию проекта, хорошо разделяя
Общие элементы типа
Между модулем и однофайловым компонентом есть промежуточные структуры - виджеты типа
Довольно сложный вопрос, где держать и как наименовать файлы с бизнес-логикой - как реактивной, так и обычной. Однозначного совета пока нет. Скорей тут надо использовать программерские подходы из обычного ООП.
#architecture
FSD.Модульная архитектура даёт понятную четкую декомпозицию проекта, хорошо разделяя
ShoppingCart от UserAccount, например. Позволяя видеть в файловой панели только относящиеся к нужному модулю ресурсы, и работать над модулями независимо.Общие элементы типа
BaseButton можно держать в App, а можно выделить под них отдельный проект (вроде своей дизайн системы) и подключать папкой ui через git submodules. Так же, как и объекты типа api.Между модулем и однофайловым компонентом есть промежуточные структуры - виджеты типа
FileUploader, например, в которых есть чисто их композаблы, утилиты, компоненты, типы. Их удобно держать в своих папках без разделения по поддиректориям.Довольно сложный вопрос, где держать и как наименовать файлы с бизнес-логикой - как реактивной, так и обычной. Однозначного совета пока нет. Скорей тут надо использовать программерские подходы из обычного ООП.
#architecture
👍8👎6❤2🔥1
Одна из проблем при разработке нативных
Это довольно сложно реализовать, и
#rolldown #rspack
js бандлеров типа Rolldown и Rspack - они должны работать в WASM для возможности их запуска в браузере ( StackBlitz, Bolt.new и т.п.)Это довольно сложно реализовать, и
Rspack отказался от этого. Но Rolldown, по словам Эвана Ю, будет поддерживать билд в браузерных средах и уже показывает хорошую производительность в них.#rolldown #rspack
👍6😭1
Несколько цитат о
Источник
#typescript #quote
TypeScript«TypeScript - это куча лишней работы для решения проблем, которых у меня нет, способами, которые мне не нравятся».
Kyle Simpson, автор очень влиятельной серии книг «Вы не знаете JS».
«Мы переписали нашу кодовую базу на TypeScript и стали получать на 30 % больше багов».
«Если у вас уже есть очень строгий линтинг и высокое тестовое покрытие, то время, потраченное на попытки заставить TypeScript работать хорошо, принесет только убытки. Идите по этому пути, только если стиль кодирования очень нравится команде».
«95 % того, что дает TypeScript, можно сделать с меньшими усилиями и инструментами, просто используя строгий линтинг и JSDocs».
«Я просмотрел всего около 10 кодовых баз TypeScript, но ни в одной из них я буквально не смог прочитать код. Он настолько уродлив и плохо продуман. Какое чудовище придумало это?»
«У JavaScript есть проблемы. Если вы работаете с ним достаточно долго, вы столкнетесь с ними, и вам нужно будет найти способ их решить. TypeScript решает большинство из этих проблем «из коробки». Поэтому он может хорошо подойти тем, кто пришел с другого языка и не заинтересован в глубоком изучении JavaScript»
«Я беспокоюсь, что те новые разработчики, которые хотят со временем стать JavaScript-разработчиками, будут лишены возможности научиться обходить опасности JavaScript, имея при этом доступ к возможностям свободно типизированного языка. Я вижу, как они находят TypeScript и используют его как костыль, не понимая, на что способен JavaScript в полной мере.»
Источник
#typescript #quote
💩29👍10💯2❤1🤮1🤡1
Мэйнтенер
Уверяют, что она самая быстрая, и пытаются встроить ее везде где могут - в системы стейт менеджмента для
Пока наталкиваются на "непонимание".
Также хотят встроить ее во
Но по поводу увеличения скорости на проценты хотелось бы спросить Эвана - зачем же он тогда перешел на
#vuejs #performance #reactivity
Volar Джонсон со своим помощником последние недели носятся с alien-signals - своей реализацией Signals в JSУверяют, что она самая быстрая, и пытаются встроить ее везде где могут - в системы стейт менеджмента для
Solid.js, Dart, Lua. Движение unjs выходит за рамки js.Пока наталкиваются на "непонимание".
Также хотят встроить ее во
Vue. Эван, вроде, одобряет.Но по поводу увеличения скорости на проценты хотелось бы спросить Эвана - зачем же он тогда перешел на
js Proxy в своей системе реактивности и ухудшил производительность в десятки и сотни раз, если скорость так важна?#vuejs #performance #reactivity
🤡5💩4🥴3
Попалось полезное
На больших проектах вместо того, чтобы выносить часто используемые файлы в
От автора 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
💩6
Раскрывающиеся аккордеоны удобно делать через стандартный
Чтобы сделать группу (раскрытым может быть только один элемент единовременно), нужно добавить атрибут
Также
(Небольшая часть этого работает пока только в
#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
...
👍23
В начале ноября Эван обещал к концу года
Кто-то их отвлекает...
Также интересно посмотреть на вклад Эвана в
#rolldown #evanyou
Rolldown v1.0.0-beta, но обманул. Пока v0.15Кто-то их отвлекает...
Также интересно посмотреть на вклад Эвана в
Rolldown#rolldown #evanyou
Telegram
Vue-FAQ
Вот такие новости. Опять новогодние подарки обещают
Возможно для небольших проектов можно будет полноценно использовать Rolldown уже совсем скоро
P.S. EOY - конец года
#rolldown
Возможно для небольших проектов можно будет полноценно использовать Rolldown уже совсем скоро
P.S. EOY - конец года
#rolldown
👍2❤1😁1🤡1
Vue-FAQ
В начале ноября Эван обещал к концу года Rolldown v1.0.0-beta, но обманул. Пока v0.15 Кто-то их отвлекает... Также интересно посмотреть на вклад Эвана в Rolldown #rolldown #evanyou
npm
npm: rolldown
Fast JavaScript/TypeScript bundler in Rust with Rollup-compatible API.. Latest version: 1.0.0-beta.33, last published: a day ago. Start using rolldown in your project by running `npm i rolldown`. There are 53 other projects in the npm registry using rolldown.
👍9
Мы уже писали об Ark UI библиотеке
На днях видный член
Выглядит очень хорошей альтернативой
Попробовал на своем проекте. Сперва заменил FilePond на
Ну и правильный
#ui #lib #headless #arkui
На днях видный член
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
🔥11👎1