Case study о вреде Nuxt и ошибках в архитектуре

VueStorefront, предлагавший услуги Frontend-as-a-Service, а именно, фронтенд для онлайн магазинов для подключения к headless e-commerce решениям, так и не смог за 4 года апгрейднуть Nuxt со второй на третью версию и в расстроенных чувствах решил переехать на React и Next.js, попутно сменив название на Alokai

При выборе технологий для магазина Arty-Crafty я долго изучал VueStorefront, но так и не понял, что это за зверь и с чем его едят. Теперь это проблема реактовцев.

#nuxt #ecommerce #vuestorefront

Nuxt 4 собираются выпустить к 14 июня 2024, обгоняя версионность Vue.js

#nuxt

Для накстовцев наконец тоже придумали свою сертификацию

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

#nuxt #certification

Самое время узнать, за счет чего главная лендинговая статичная страница GitLab смогла набрать 13Мб в скриптах

На скриншоте бандлофобии разрезолвились не все пакеты

Первая тройка тяжеловесов:

1. @nuxtjs/i18n - 2.5Mb
2. slippers-ui (GitLab's Marketing Design System) - 1.8Mb
3. vue-mermaid-string (построение диаграмм) - 1.1Mb

#gitlab #optimization #nuxt #i18n

Немного OSINT-a в ленту.

Давайте еще поизучаем результаты исследования бандла лендинга GitLab, потому что это интересно и познавательно.

Первая тройка тяжеловесов:

1. @nuxtjs/i18n - 2.5Mb
2. slippers-ui (GitLab's Marketing Design System) - 1.8Mb
3. vue-mermaid-string (построение диаграмм) - 1.1Mb

На третьем месте хорошая библиотека для генерации налету диаграмм по тексту mairmaid . Я тоже хотел поставить её на Vue-FAQ, поставил, посмотрел насколько она просадила размер бандла и производительность в браузере, убрал и заменил генерацию налету на статичные заранее сгенеренные ею картинки ради UX.

На втором - slippers-ui, это гитлабовский относительно небольшой (20 компонент) UI kit. Без какого- либо тришейкинга и оптимизации, естественно. Очень много, с учетом того, что любая современная UI библиотека весит в несколько раз меньше.

Ну и победитель - то, за что так любят Nuxt. Это когда он берет что-то хорошее и делает его еще лучше. В этот раз он взял vue-i18n, естественно, для интернационализации.

Используя pkg-size.dev смотрим сперва на vue-i18n, отключив учет peer dependencies:

Install size: 2.8MB / 6 packages
Bundle size: 73KB minified (23KB gzip) / 9 modules

Очень неплохо для i18n библиотеки

То же с @nuxtjs/i18n:

Install size: 61MB / 239 packages
Bundle size: Не собрался (ошибки)

Error: Process exited with code 1
✘ [ERROR] No matching export in "node_modules/unicorn-magic/default.js" for import "toPath"

Bundlephobia тоже дала ошибки при сборке

Самая простая реализация i18n пишется в один composable. Но на Nuxt-e всё намного серьезней.

#nuxt #optimization #i18n #gitlab

Сегодня Nuxt 2 всё

End-of-Life

#nuxt

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

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

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

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

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

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

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

#architecture #bestpractices #tip #nuxt

Nuxt славится своей агрессивной маркетинговой политикой, Vue на фоне его идет тихой сапой.

Но если посмотреть на NPM статистику скачивания пакетов для того и другого, то видно, что проектов на Vue где-то в 6-7 раз больше, чем проектов на Nuxt

#nuxt #vuejs #stats

К Дурову можно по-разному относиться, но людей, у которых руки растут не из жопы, он умеет находить

Chrome DevTools -> Memory -> Total JS heap size

#benchmark #telegram #nuxt

Web WhatsApp - 170MB
Slack - 125MB
VK.com - 120MB
Dzen.ru - 70MB
Nuxt.com - 40MB
Google Calendar - 40MB
Google.com (пустой) - 30MB
Web Telegram - 25MB
Vuejs.org, vue-faq.org - 5-10MB

Кратко, о чем нам поведал безвременно ушедший

В мире фронтед мета-фреймворков крутятся огромные деньги в виде рекламы, спонсорства и донатов - сотни миллионов долларов. Деньги просто так никто давать не будет. Смысл в том, чтобы втянуть молодых (18-20 лет) разработчиков в работу на этих фреймворках, чтобы потом стричь деньги со стартапов и компаний, которые будут нанимать подобных разработчиков, потому что размещать эти проекты будут на платформах типа Vercel, стоимость хостинга на которой в тысячи раз больше обычного хостинга.

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

При этом огромные деньги тратятся на продажных ютюберов и прочих инфлюенсеров, агрессивно впаривающих тебе эту шнягу из каждого утюга. Убеждающих, что если ты не используешь их "современные технологии", то ты какой-то ущербный. Часто это работает наподобие сетевого маркетинга типа продаж БАДов или продукции Avon.

В частности, следствием этого является, также, многолетняя ложь, что SEO без SSR невозможно, что Web Vitals с ними лучше и прочая маркетинговая ахинея.

Так что Nuxt, ребята, это не про свободу open source-а и лучшие практики.

Лучшие практики - это когда ты как пастушок с дудочкой пасешь коровок на экологически чистых горных альпийских лугах.

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

#nuxt #verсel #ssr

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

Кот ангулярщика вываливает миску на пол, раскладывает корм ровными прямоугольниками, глядит некоторое время на них удовлетворенно, съедает корм и тихонько ложится спать довольный.

Кот реактера также высыпает корм, раскладывает из него какой-то архитектурный план, долго что-то двигает, думает, меняет детали местами, наконец съедает всё и чинно ложится спать.

Кот накстовца высыпает еду на пол, напряженно смотрит на нее, начинает неистово долбить корм миской, раздалбывает его в пыль, раскладывает из этой пыли три дороги, вынюхивает их, трахает первых двух котов, падает на спину и колошматя лапами по полу в истерике орет - "Бл.дь, я не могу так работать!"

#humor #nuxt

Интересная табличка

Google проверяет какие сайты проходят их тест на Web Vitals

Как видим, у Vue результаты значительно лучше, чем и SSR-ного Nuxt, одним из заманивающих доводов которого вроде бы и является хорошие веб метрики.

Также очень точно подтвердился наш подсчет по npm пакетам о соотношении сайтов на Vue и Nuxt - Vue примерно в 6-7 раз больше.

Ну и если отмотать на статистику 2020 года, то можно увидеть, что React превалировал над Vue в 10 раз. Сейчас - примерно в 2.

Script setup - this is how it's done.

#vuejs #nuxt #react #stats

Никто не заметил, что Svelte быстро догоняет Nuxt на гугловской статистике?

На сайте есть ссылка на методику подсчета, выглядит вполне убедительно.

#svelte #nuxt #stats

Pinia Colada появилась и как Nuxt модуль

Сколько в Nuxt уже [неправильных] способов заменить fetch(), включая Tanstack?

#pinia #nuxt

В команде Nuxt-а при выводе Nitro на внешний рынок внезапно осознали, что автоимпорты - плохо. И попытались их сделать опциональными. Но вход - рубль, выход - два.

Дело настолько деликатное, что ветку даже закрыли для просмотра посторонними.

Автоимпорты имеют существенные проблемы:
- не весь тулинг (IDE, Volar etc) их понимает, не всегда будут подсказки;
- код с ними выглядит гораздо менее явным, чем с обычными импортами в IDE;
- полная нечитабельность на площадках типа GitHub;

#goodpractices #nuxt

Люди мигрируют с SSR и удивляются.

Но Nuxt это, конечно, другое...

#ssr #next #nuxt

К хорошим новостям

Год назад я делал испытания по индексации поисковиками SPA на Vue, и тогда Google справился, а Яндекс не потянул

За прошедшее время Яндекс подучился и поумнел (скриншот)

Итого, Vue SPA:

1. Индексируются поисковиками
2. Дают лучшие показатели Web vitals, чем SSR Nuxt

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

Чем там ещё SSR фреймворки хвалились?

Всегда говорил, что BFF SSR - тупиковая ветвь развития фронтенда, усложняющая архитектуру и загрязняющая код веб приложения без необходимости. Те самые "фокусы". Видимо, доходит и до других, потому как в последнее время что-то часто встречаются статьи типа: "Nuxt это не только SSR"

#ssr #seo #nuxt