После выхода крайней и достаточно революционной в плане добавления Composition API версии Vue 3.0 более чем три года назад, каких-либо серьезных изменений от команды Evan You в самом фреймворке больше не было. Только стандартные багфиксы, оптимизация и робкие попытки стать с TypeScript ближе. Основное внимание переключилось на экосистему - Vite, Nuxt, VitePress, Pinia и другие.
В то же время, отчетливо заметно масштабирование работы не вглубь, а вширь. Интересы команды уже давно явно выходят за пределы фреймворка.
Vite
Основной таран экосистемы - Vite. Его экспансия за пределы Vue проектов - уже свершившийся факт, достаточно посмотреть на статистику загрузки npm пакетов:
Vite как инструмент уже используется при разработке на других JavaScript фреймворках и чистом js. Его грандиозный успех привел к переключению команды Vue именно на него. На этот раз разработка пошла не только вширь (расширение функционала), но и вглубь - портирование Rollup на Rust. Уже даже есть название нового сборщика - Rolldown.
На данный момент Vite использует два разных сборщика - esbuild для запуска на dev сервере (скорость) и Rollup для билда (экосистема плагинов), что даёт некоторые проблемы в совместимости их результатов. Rolldown предполагается использовать и для того, и для другого.
Anthony Fu
Первый человек по активности в команде Vue Anthony Fu ведет атаку с флангов. Создатель Vitest, Slidev, VueUse, UnoCSS, Elk, Type Challenges и многого другого и один из основных разработчиков Nuxt вместе с его автором Pooya Parsa выделил из фреймворка некоторые удачные модули и продвигает их в JavaScript мир независимо. Таким модулем является, например, Nitro, библиотеки unjs и unplugin (префикс "un" означает unified или universal, если что).
Очень часто подобные системы являются не просто библиотеками, а комбайном, позволяющим "легко" создавать что-то и сразу деплоить на частные хостинг решения, типа Vercel или AWS, что вызывает законные претензии у опытных разработчиков, привыкшим к стандартам, слабой связности сервисов и открытым технологиям, но, очевидно, притягивает начинающих.
По другому флангу Anthony Fu повел тяжелую кавалерию на ESlint в виде пакета @antfu/eslint-config , который существует уже больше года, но за последние три недели рванул с версии 0.43.1 до 2.1.0, получив в последней "Optional react support". Нужно сказать, что данный конфиг действительно очень сильно упрощает настройку линтера на js проектах и рекомендуется к применению.
Кроме линтера Anthony подобрал задеприкеченные ESbuild-ом правила по форматированию текста и создал новый проект - Stylistic. Почему Prettier не подходит иногда для форматирования он объясняет отдельно.
VitePress
VitePress, последователь VuePress, SSG фреймворк, де-факто стандарт для внутри-экосистемных документаций. Представляет собой законченный продукт, позволяющий создать приятную справочную систему разработчику, даже не знакомому с Vue. Кастомизация же с помощью Vue компонент позволяет сделать если не всё, то очень многое, включая как персональный блог, так и онлайн магазин.
Я бы сказал, что VitePress сильно пока ещё недооценён, и у него огромный потенциал на своём поле битвы. Anthony Fu, кстати, недавно и там сделал коммиты, оптимизируя рендеринг блоков кода.
Идеологическая работа
Выше рассмотрены всего три момента, которые однако ясно показывают текущую стратегию команды Vue.js. Недавние выступления Evan You, например THINKING ACROSS THE FRAMEWORK BARRIER - RenderATL 2023 и Nuxt Nation 2023: Evan You - Vue.js and Vite Updates подтверждают это.
Anthony Fu также является открытым проповедником по агностицированию и расширению экосистемы Vue и аннексиям чужих территорий, выпуская для своих адептов обучающие видео подобно этому - Anthony's Road to Open Source: The Set Theory | ViteConf 2023.
Рынок вакансий и вебсайтов
Теперь посмотрим на рынок вакансий. Еще совсем недавно Vue назывался младшим братом React и Angular. На данный момент:
Хабр Карьера, открытых вакансий:
React - 131
Vue.js - 77
Angular - 40
Upwork, предложения, опубликованные за последние 5 дней:
React - 800
Vue 120
Angular - 70
Тренды
Ну и напоследок заглянем на trends.builtwith.com, показывающий статистику сайтов, использующих те или иные технологии:
Примечание: временные шкалы на всех графиках не являются линейными и не дают представления о сравнительном росте графиков. Рост Vue.js происходит быстрее.
Обратим внимание на второе место в списке стран по популярности Vue. Будем надеяться, что в этом заслуга и нашего блога )
Из вышеуказанной статистики видно, что Vue "в среднем" на данный момент отстает от React примерно в два раза. За последние 4 года Vue сократил отставание от React по загрузке основного npm пакета с 7 до 4 раз. Ну и надо учитывать инерционность рынка - доминирование React 5-10 лет назад было, всё-таки, подавляющим, а вебсайты не переписываются каждый год на новый фреймворк.
Тренды Ангуляра удручающи для Google, что, наверное, как-то связано с его менеджментом. Падение в 2021 году очевидно было вызвано стратегическими решениями топ-менеджеров компаний отказаться от Ангуляра еще за 2-3 года до этого. Так что из вопроса: "Смогут ли гиганты Facebook и Google остановить китайского самородка?" второго гиганта можно уже вычёркивать, и всего два бойца остаются в Mixed Frontend Arts октагоне в схватке между свободным разумом опен сорса и кровавыми деньгами корпораций.
Узнать интересную и полезную информацию о Vue.js, а также изучить фреймворк по переводу лучшего учебника по данной теме "Vue.js 3 Design Patterns and Best Practices" можно на нашем сайте: Vue-FAQ.org.
Также у нас появился Телеграм-канал: https://t.me/vuefaq
P.S. Как правильно заметил @format1981 в комментариях, результаты опросов ниже мало о чем говорят, кроме как косвенно о статистике заинтересовавшихся материалом данной статьи.
Комментарии (26)
jenesius
28.11.2023 17:50+1Уже несколько раз сталкиваюсь с тем, что разработчик делает свою тему для `Vitepress` и использует её как полноценный онлайн продукт, а не как простой набор md файлов. В своё время сам столкнулся с задачей написания документации и этот проект упростил жизнь своей лёгкостью и простотой https://modal.jenesius.com.
Отличная статья!
format1981
28.11.2023 17:50+8Результаты голосования показывают какой фреймворк используют разрабы открывшие статью и пролиставшие до опроса. А зашли в статью в основном те, кто интересуется Vue. Так что большой перевес Vue - это ошибка выжившего.
P.S. Я сам голосовал за Vue.
hello_my_name_is_dany
28.11.2023 17:50+4На вряд ли много разработчиков на React и Angular зайдут на статью, где в названии только Vue
mrobespierre
28.11.2023 17:50+6Спасибо за статью.
щутка
Крайней бывает мера, необходимость и плоть, а версия - последняя
nin-jin
28.11.2023 17:50+2Я, наверно, что-то пропустил, но можно подробности про планы по отказу от Ангуляра в 2021?
ogregor
28.11.2023 17:50+1Вью хорош темплейт движком. Реакт возможностью работы с mobx. Мне не нравится во Вью что доступ к свойству идёт через .value приходилось переписывать много бизнес логики с вью фронтенда на react native mobx и честно .value добавляет ненужных движений. Как по мне идеально это темплейт вью + стейт mobx. (Это если абстрагироваться от внутренних реализаций реактивности и рендеринга.)
DmitryOlkhovoi
28.11.2023 17:50Дело в том, что вью с коробки, это реакт с mobx и ещё кучей либ.
Можно обойтись и без .value если там объект. Ну а если подумать про реакт без mobile, то там вообще на одно реактив вейлю две переменных, одна ещё и функция. Сам работаю с двумя фреймворками, вью просто приятней в мелочах. Скоупед стили из коробки, ивенты на компоненты и так далее
zede
28.11.2023 17:50В целом уверен что сдружить их возможно. Но как писали ниже, то есть реактивные примитивы как Reactive которые могут прятать все эти .value. Однако, если вам не переписывать с React на Vue, то лучше принять .value. От нее пытались избавиться на этапе сборки но это порождало слишком много магии и дополнительных корнер кейсов проблемного вида
gmtd Автор
28.11.2023 17:50+1У Vue самый правильный, самый удобный вариант обращения с реактивными данными. Нужно понять, что переменная с реактивным состоянием - это не то же самое, что обычная переменная. К реактивному состоянию доступ должен быть через интерфейс - это и есть .value. Я не знаю библиотек, в которых бы было более правильней и в то же время проще обращение с реактивными данными. Нужно просто осознать эту философию.
Даже svelte долго терпел, но тоже переходит на раздельное обращение с данными в новой версии
c01nd01r
28.11.2023 17:50Вот бы ещё шаблоны знали про это (в частности пропсы дочерних компонентов), а не разворачивали рефы в реактивные свойства.
Понятно зачем оно так сделано, но хочется более явных вещей, тем более и так уже через .value работаем.
zede
28.11.2023 17:50+2Сюда же можно отнести как оперативно vitest захватывает поле еще одного "монополиста" в виде Jest-а активно смещая его позиции. Да, фокус команды в этом году был явно не на стороне Vue (что понятно по отсутствию обещанного Vapor Mode)
Так же недооценено влияние языкового туллинга как Volar который тоже выходит за пределы Vue уже. Например языковой туллинг Svelte уже на нем.
Итого по векторам суммируя:
Frontend Framework - Vue
SSR Framework - Nuxt
SSG / Static Sites - Vitepress
STM - Pinia / @vue/reactivity
Builder - Vite
Test - Vitest
CSS framework - UnoCSS (убийца тейлвинда)
Linting / Formating - Stylistic / antfu-eslint-config
Language Tools - Volar
Презентации - Slidev
common web tasks - unjs
И уверен что я много чего еще пропустил
Чего же тут не хватает?
Как по мне дико не хватает качественной UI-библиотеки. Вот чтоб от создателей со всей той любовью к DX-у что и в других продуктах от этих ребят. Именно в области UI-библиотек сейчас САМОЕ слабое место у Vue. Пока пытается это исправить только Nuxt со своим Nuxt UI, но он завязан на Nuxt экосистему и вне Nuxt не жизнеспособен сейчас, поэтому пользы мало.
Если появится что-то по кач-ву близкое или превосходящее условный Mantine, то это даст невероятный буст всей экосистеме
gmtd Автор
28.11.2023 17:50Еще члены core team Vue и Vite работают над Cypress и Astro.
Исходники Vapor mode на днях открыли, так что работа там идет. Хотя это уже полировка оптимизации, на среднем проекте разницы заметно не будет.
С UI библиотеками тоже не вижу проблем. Дизайнерские проекты с Фигмы все равно свою стилизацию используют, а для стандартных админок хватит стандартных Quasar или PrimeVue
При желании можно взять что угодно и перенести соответствующие стили компонентов Mantine, если уж так хочется
Вообще в проекте обычного вебприложения не так уж и много визуальных компонент используется. Можно ручками сделать красиво.
За напоминание о UnoCSS - спасибо, действительно забыл это важное направление.
c01nd01r
28.11.2023 17:50В плане UI библиотек Vue действительно не так хорошо выглядит на фоне React, но тем не менее, есть те же AntD и Radix UI.
Fragster
28.11.2023 17:50Лично я использую quasar.dev и почти все нормально. Правда это чуть больше, чем ui библиотека, но это часто даже удобнее, тем более что есть вариант использования компонентов отдельно от всего комбайна.
sentbegemot
28.11.2023 17:50+1И все таки я бы не стал упоминать план Барбароса просто так. Уж очень нехороший был план...
gmtd Автор
28.11.2023 17:50Не проводя прямых аналогий и абстрагируясь от того, что мне нравится Vue, из его экосистемы вышли реально крутые продукты, вы считаете подобную активность по расширению и используемые его командой методы правильными?
Google is not evil?
axelmaker
Судя по графику и информации с https://trends.builtwith.com/javascript/Vue , популярность Vue выходит на плато, и фреймворк наиболее популярен в России, чем в остальном мире
gmtd Автор
Там есть сноска про разные масштабы и нелинейность шкал времени
Кроме того, по какой-то причине на моих скриншотах он нарисовал иные временные метки, нежели на текущих. Поэтому правая часть видится более пологой.
В любом случае, данные графики имеет смысл анализировать в масштабе, а не в деталях.
gmtd Автор
Что касается распределения по странам, то там, скорей всего, имеется ввиду страна размещения сервера вебсайта, что объясняет гегемонию США. При этом значимыми факторами могут являться не технические - внутреннее законодательство страны, регламентирующее хранение и обработку персональных данных, например.