Причины популярности Vue

@marlin jquery это библиотека, vue это js фреймворк.
По факту для vue от php нужно только получение данных из бд. Все остальное пишется на vue.
То есть сравнивать jquery и vue смысла ноль.
У vue есть свой роутер.

Мое личное мнение почему он так популярен.
1. Стандартизация, писать код нужно одинаково, по другому там ничего не напишешь, есть определенная структура. В обычном js или jquery можно писать как угодно, хранить свои функции где угодно. происходит бардак. Поэтому и популярны js фреймворки.
2. Ты фиг отпарсишь какой нибудь сайт с товарами написанный с помощью vue, если они его таким образом напишут.

 

да ну? Данные то все равно поступают... их и будешь парсить, другой вопрос насколько это более трудоемко и удобно

 

Причина популярности Vue в том, что он идёт в комплекте к популярному Laravel. Если бы Тейлор вместо Vue выбрал React или что-то ещё, то тысячи ларавельщиков массово использовали бы React.

А Angular мощнее, сложнее и тяжеловеснее Vue и React. Поэтому подключать сложную махину к типовым проектам на попсовом Laravel нет никакого смысла.

Изначально jQuery мы использовали для поиска элементов по селекторам через $('.class p'), делали анимацию через $(...).show(), навешивали слушатели через $(...).on('click', ...) и делали запросы через $.ajax(). Это было удобно в старых Internet Explorer. Теперь в новых браузерах это всё есть и так. Для поиска есть querySelector('.class p'), есть анимация через CSS, для Ajax есть нативный fetch() или сторонний axios. Для избавления от куч асинхронных коллбэков придумали промисы. Так что jQuery становится всё менее полезной библиотекой.

А так да, как уже сказали, Angular и подобные - это уже фреймворки. Когда всем надоело велосипедить и костылить на голом PHP программисты придумали backend-фреймворки. Аналогично когда JS-кода стало много и на jQuery он стал превращался в кашу придумали более удобные frontend-фреймворки.

Да, в Vue много магии. В этом плане React прямолинейнее и понятнее, но... без магии всё это же приходится программировать вручную.

Да, на фронтенде нас интересует именно построение интерактивного пользовательского интерфейса. Из виджетов, взаимодействующих с данными в реальном времени по настоящему циклу MVC. Поэтому Vue и React - это как раз инструменты для программирования виджетов.

Здесь имеем не процедурное, а именно более удобное для рендеринга и вычислений функциональное программирование с однонаправленным потоком:

Код (Javascript):

1. newData = modify(oldData);
2. newDom = renderApp(newData);
3. sync(newDom, body);

чтобы не приходилось по $(...).remove() вручную вычищать старый DOM и чтобы можно было навесить перерендер на onChange данных.

На бэкенде можно один раз всё отрендерить и вернуть. А на фронтенде помимо первоначального рендеринга нужна именно реактивность и перерендер элементов по каждому видимому действию. Поэтому и подход отличается.

Если рассматривать эти фремворки:

- Angular
- Vue+Vuex+VueRouter
- React+Redux+ReactRouter

то только Angular изначально идёт как целиковый фремворк. Остальные, как видно из списка, становятся ими только в комплектах. Поэтому костяк и не обнаруживается.

Если дойдёте до Vuex или Redux и вынесете туда состояние, то увидите, что в проекте Vue и React по сути останутся UI-шаблонизаторами (View), а компоненты Vuex и Redux будут хранить данные и управлять ими через экшены (Model и Controller).

 

И я вставлю свои 5 копеек, касательно vue, помимо того что его пиарит laravel, это еще и китайский фреймворк, если посмотреть в тот же awesome, неожиданно окажется, что там половина всего написано китайцами, которых миллиарды, оно и не странно, что у него столько звезд, ну и плюс для быстрого старта, nuxt vuetify vuex выглядит очень привлекательным, а если копнуть по глубже, попытаться добавить typescript, который уже практически становится стандартом, увы окажется, что шаблоны живут своей жизнью, их никак в реалтайме не проверишь, да и отсутсвие хоть какой либо структуры, никакого тебе ооп, никакого солида... и т.д. Это печаль. React в этом плане выглядит привлекательнее. Ну а Angular вообще топ. А если мы еще берем нест под апи, создаем монорепу, шарим интерфейсы, или генерим типы на основе граф схем.. тут уж совсем красота получается. На счет невозможности спарсить контент, так себе аргумент, если не делать ssr, это во первых медленно, во вторых пс тоже ничего не увидит. Да и гугл уже давно позаботился о добросовестных контент мейкерах и создал puppeter.

 

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

в этом нет никаких проблем
а еще скажу, что стандартом он не станет уж точно никогда, потому как это не язык а транслятор. Верьте Microsoft который похоронил vbs который по первоначальным возможностям был круче js
и вы должны понимать, что где идет борьба за производительность то он уж точно не должен быть использован

 

@marlin ну вот смотри, цикл в vue. Ты когда верстку делаешь, пишешь цикл прямо в верстку. И по другому ни как.
А на js множество вариантов. Скорее всего ты запихнешь свой цикл в какую то функцию, в рандомный файлик. Или запихнешь ее прям в этот же файл где верстка. И выглядеть твой цикл может как угодно. Найди его потом. Обзовешь свою функцию как угодно. Да и кода будет в разы больше:
Можно так:

Код (Javascript):

1. for (i = 0; i < 5; i++) {
2.    var newDiv = document.createElement("div");
3.         newDiv.innerHTML = "<h1>Привет!</h1>";
4.     my_div = document.getElementById("org_div1");
5.     document.body.insertBefore(newDiv, my_div);
6. }

Можно тоже самое так:

Код (Javascript):

1. var newDiv ="";
2. for (i = 0; i < 5; i++) {
3.         newDiv += "<div id='org_div1'><h1>Привет!</h1></div>";
4. }

Еще так:

Код (Javascript):

1. arraySparse.forEach((element) => {
2. });

Код будет делать одно и то же, написать его можно множество разных способов.
--- Добавлено ---

https://learn.javascript.ru/traversing-dom
@marlin на голом js можно тоже самое.

 

Нет. Вся бизнес-логика, cервисы и валидация так и остаются в API. Фронтенд лишь рендерит форму, отсылает запрос в API и просто выводит под полями ошибки, которые ему вернулись в JSON. Только такой подход безопасен, когда вся логика на сервере, а фронт только рендерит и посылает Ajax-запросы.

В первом же абзаце во вступлении обрисовывают:

Так что Vue - это именно фреймворк для view. Для построения интерфейсов из компонентов-виджетов, а не фрейморк для всего проекта. Поэтому в его документации и написано только про его анимацию, реактивность и рендеринг, но ничего нет про организацию бизнес-логики, запросы к API и всё остальное. Если добавить роутер, то с ним комплект Vue+Router уже станет микрофреймворком для разработки приложений из нескольких псевдостраниц. Если добавить хранилище, то данные и бизнес-логику можно будет вынести из виджетов туда.

В экосистеме React есть сайт с документацией по самой библиотеке React и есть отдельный второй сайт с документацией по разработке целикового приложения с маршрутизацией, бизнес-логикой и тестированием. Поэтому там программисты не путаются.

 

Ну так можно и совмещать при желании. Добавить клиентскую как в документации нативно или библиотеками, если помимо серверной хочется это по onChange делать. Но при этом основная так и будет на сервере, а клиентская лишь для красоты.

Пользователь в браузере контактирует с DOM. С тегами и событиями. Это всё Vue предоставляет. А что программист по onClick будет делать - это уже его дело.

 

Обернуть v-for в v-if:

HTML:

1. <div v-if="products">
2.     <div v-for="product in products">...</div>
3. </div>
4. <div v-else>
5.     Loading...
6. </div>

И пока поле products пустое будет выводиться Loading.

Это виджет корзины со всеми методами для кнопок корзины. Здесь выделением бизнес-логики не заморачивались.

Вы так говорите, как будто в Yii программисты в слое представления на jQuery такого не делают.

 

Оригинальный валидатор так и будет в бэке. Если же захотелось для красоты добавить ту же самую валидацию реактивно на фронт, то придётся копировать регулярку. Либо самому вписать if по onKeyUp или onChange, либо подключить библиотеку для клиентской валидации.

Эта логика используется для отображения или сокрытия кнопки:

HTML:

1. <button v-on:click="addToCart(product)" v-if="canAddToCart(product)">Add to cart</button>

чтобы в корзину не накликали больше товаров, чем есть в наличии.

Если в примере корзина хранится только в LocalStorage браузера, а не на бэке, то бэк это сейчас никак не посчитает.

А здесь такой же человек на Vue написал простой скрипт как он его на чистом JS бы написал, просто используя Vue как обертку. Накатав вывод товаров и корзину в одном файле для простоты без структуры из доки. Тоже может быть новичок.

Я про то, что как в моём примере мешанина в одном файле без структуры на Yii, так и в вашем примере такая же мешанина в одном файле без структуры на Vue.

Так что либо ваш автор книги пока сильно упрощает и потом всё исправит, либо вам просто с автором не повезло.

 

Из Yii тот китаец ушёл в 2015-ом. Но этого никто не заметил, так как уже была команда из нескольких человек.

Также в Vue можете ознакомиться с его командой. Так что будущее у Vue есть. А понравится оно вам или нет - это уже другой вопрос.