Переход с jQuery на Vue.js

[Magister7]

У решения на Vue есть недостаток, который тут не упомянули: при отключённом Javascript пользователь не увидит ничего, в то время как с решением на jQuery — данные будут, но потеряется редактирование.

[neurocore]

Кто-то отключает js в 2018 году?

[Magister7]

Встречал в интернете таких.
Ну а если скрипт загружается со стороннего ресурса — то и я такое через uMatrix блокирую у себя, разрешаю только выборочно.

Вобщем, вопрос в ЦА конкретной задачи. Лендинг, например, с использованием Vue я бы не стал делать.

[Madeas]

Сейчас куда ни плюнь, попадешь в лендинг)

[EskakDolar]

Как раз в 2018 году стал отключать js на некоторых сайтах.
Майнеры оборзели, да и без майнинга сайты иногда завешаны скриптами как новогодние елки игрушками.

[KeyJoo]

А как узнать, что на сайте развели майнинг ферму?

[EskakDolar]

Не знаю как другие, я чисто по интуиции. Если броузер конкретно тормозит пока JS не отключишь на этом сайте то тут два варианта, либо майнеры, либо то с яндексдирект переборщили. Только, по моему, яндексдирект в последнее время стал чем то вроде майнинга.

[walkman7]

`Shift + Esc` в хроме (и хром подобных) открывает диспетчер вкладок, там и смотришь на аномальную загрузку ЦП.

[YakovSS]

Наверное самое просто нагрузкой на цп, хотя бывают хитрецы и делают ее совсем небольшой

[justboris]

Конечно, если иногда болит голова, то надо отрезать ее насовсем.

Про то что майнеры распространяются с конкретных доменов, которые можно добавить в блеклист — нет, не слышали.

[EskakDolar]

Не корректное сравнение.
На совсем никакой «головы» я не отрезаю.
Отключаю и включаю JS по необходимости.
Про блеклист в который Роскомнадзор уже два месяца помещает Телеграм я слышал.

[cyberly]

Ну… иногда при блокировании некоторых мессенджеров временно не работают некоторые CDN. Форс-мажор, но тем не менее…

[unclechu]

Да, кто-то также отключает выборочно, точнее включает выборочно только необходимое (см. NoScript, uMatrix). Зачем мне включать всякие аналитики и прочие зонды? Вот чтобы тот же хабр использовать, зачем мне яндекс.метрика, гугл-аналитика, мейл.ру, диджитлтаргет, и ещё что-то с cloudflare cdn-а? Зачем мне делать бесплатное одолжение всем этим компаниям и тратить ресурсы своего компьютера на слежку за мной и последующее впаривание мне всякого рода назойливой рекламы? Всё что я перечислил, — реально используется на хабре (причём этим список не ограничивается), а у некоторых ресурсов целые полотна подобных зависимостей, и каждый скрипт под непонятной лицензией. Если я захожу на ресурс раз-два, мне не надо никакой доп. функциональности. Я бы предпочёл, чтобы мне не приходилось смотреть что у него там за зависимости и включать их временно, чтобы попользоваться ресурсом, особенно если этот ресурс — поставщик статического текста и пары картинок.

[neurocore]

Зачем же так жёстко, есть же блокировщики рекламы. Многие из них умеют и счётчики отключать и слежку.

[unclechu]

Блокировщиком, естественно, тоже пользуюсь, но он далеко не такой всесильный как uMatrix к примеру.

[Fedcomp]

Скорее проблема с точки зрения поисковых систем.

[lllypynby]

Прекрптите вводить людей в заблуждение, уже всё работает.

[Fedcomp]

И яндекс и гугл поддерживают страницы с динамическим содержимым?

[evocatus]

Гугл is generally able (т.е. когда как, но в общем да), а Яндекс — однозначно нет.

[TheShock]

при отключённом Javascript пользователь не увидит ничего

Не знаю, как там в Vue, но в React это совершенно не проблема. Мы делали сайт и вы можете посмотреть его с отключенным JS или даже в Lynx. Просто тот же код, который рендерит на клиенте запускается на сервере и создает всё необходимое, когда открывается ссылка. Видит и поисковик и пользователи.

[Fedcomp]

Суть в том, что с jquery, изза того что оно как правило имеет начальный html — таких проблем нет. А то что все эти фреймворки стоит объединять с SSR в статье ни слова. И то что это резко становится не просто «заменить jquery на раз два».

[TheShock]

Суть в том, что с jquery, изза того что оно как правило имеет начальный html — таких проблем нет.

Не обязательно. Иногда важные вещи делаются так, что работают только на JQuery

[0whitewolf0]

На vue можно использовать Inline-templete для компонентов. кстати это еще один плюс который никак не помешает seo.

[Splo1ter]

Зачем эта статья? Практической ценности у нее ноль.
Лучше открыть документацию по Vue и все.

[vvzvlad]

Тем более, что у vue есть хорошая документация на русском языке: ru.vuejs.org/v2/guide/index.html

[Madeas]

Я все чаще встречаю в сети упоминания про Vue и его использование. Отсюда два итога:
1. Vuе вытеснит некоторые из используемых библиотек/фреймворков полностью
2. Vue как и прочие фреймворки просто займет свою нишу и будет использоваться среди n-тысяч разработчиков. Остальные тысячи будут работать как и раньше

Мне, как человеку, начавшему изучать js пока не ясно, куда двигаться потом… Вот и во что лучше верить?)

[SaturnTeam]

Я бы с вами поспорил начиная с выводов. Частое упоминание, с вашей точки зрения не означает, что для всех vue тоже часто упоминается, и уж тем более это не означает что vue закрепится и займет стойкую нишу. до vue часто упоминали CoffeScript и ActionScript, и широко использовали. Теперь же они канули в лету.
Лично я верю и делаю ставку на Angular, так как за ним стоит гугл, и то, как движется эта платформа (ага, даже не фреймворк, а именно платформа) внушает веру в счастливый мир фронтенд разработки как на бекенде. Я верю что он задавит vue и несоклько позже — react. но это лишь мое мнение.

[nexus478]

Еще есть пункт 3 — WebAssembly (лет через 5 наверное). Но скорее всего этого срока хватит, чтобы выйти раньше, чем какой-то JS-фреймворк станет монополистом.

[neurocore]

Нет, vue не вытеснит, скорее займёт какую-то долю среди фреймов. Как человеку, начавшему изучать js, советую вам продолжить его изучением именно vue.js. Он прост в понимании, не требует особой подготовки. Этот опыт в последствии существенно облегчит переход на любой другой фреймворк, если потребуется.
Не в качестве рекламы, а обучения для
www.youtube.com/watch?v=NtlVno8igVQ
мне очень понравились эти лекции — ёмко, коротко и по делу.

[nemilya]

Спасибо за перевод. Хорошая статья для начинающих, на практическом примере jQuery и Vue — чтобы сориентироваться в основах.

Единственно замечание: "Нередко в подобных учебных примерах используют всяческие списки дел." — тут "списки дел" мне кажется можно смело заменить на "ToDo")

[SergeRod]

Этот замечательный и нестандартный пример довольно прост. Давайте усложним задачу. Добавим условие, что заказчик чудесного приложения-инвойса требует, чтобы приложение было расширяемое путем добавления внешних модулей, без пересборки основного кода приложения. Ну, например, добавлением дополнительных скриптов в html код. С целью дополнения основного функционала — показ отдельной строчкой "налог с продаж" или, там, добавление колонки "единица измерения".

На jQ такое реализуется довольно просто и создание таких дополнений не вызовет трудностей. У Vue добавление дополнительных свойств в модель, инспекторов, методов уже после создания объекта приложения — дело куда более затратное, насколько я понимаю.

[justboris]

Расширяемые компоненты можно сделать на любом фреймворке, хоть на vanilla.js. Получится такое API:

// создаем таблицу
const table = new InvoiceTable();
// расширяемся
table.addColumn(...);

Что там под капотом и какой фреймворк используется — неважно. Какие именно преимущества здесь дает jQuery?

[RSalo]

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

[KeyJoo]

Пусть будет здоровая конкуренция среди либ/фреймвоков, и коммьюнити — дружелюбным. Мир меняется и вэб тоже(технологии).

[maxfox]

Vue — это замечательно, но в той части, где про недостатки jQuery (почему не Vanilla JS?), все выглядит так, будто для хранения состояния нам обязательно нужна либа/фреймворк. Но это не правда, состояние может быть обычным js объектом, а отображение в html — обычной функцией. Такое решение будет весьма компактным и при этом хорошо структурированным, разобраться в нем не составит труда. Если интерфейс становится сложнее, то можно использовать Redux, к примеру. Да и Vue — не единственное решение, Preact, к примеру, весит всего 3kb, отличный вариант для встраивания в классические, не-SPA сайты.

[Fess_blaga]

Но это не правда, состояние может быть обычным js объектом, а отображение в html — обычной функцией.

Следующим шагом добавим в объект состояния get и set на каждое свойство, чтобы отслеживать изменения и реактивно менять отображение, и через n-ное количество улучшений напишем свой Vue))

[maxfox]

Ну, мне больше Redux нравится… Но речь не об этом, а о том, что если вам нужно сделать одну форму, или еще что-нибудь такое же простое, то можно обойтись безо всяких библиотек. Просто возьмите основную идею — глобальное состояние, которое отображается в html разметку или в наличие/остутствие определенных классов у определенных DOM элементов.

[remeder]

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

[Fess_blaga]

Кстати, да.

Хотя сделать это можно буквально в несколько строчек.

Vue.directive('focus', {
  inserted: function (el, binding) {
    if (binding.value) {
        el.focus()
    }
  }
})

//.........

methods: {
    addRow() {
      this.items.push({ description: "", quantity: 1, price: 0, focus: true });
    }
  },

<tr class="item" v-for="item in items">
  <td><input v-model="item.description" v-focus="item.focus" /></td>
  <td>$<input type="number" v-model="item.price" /></td>
  <td><input type="number" v-model="item.quantity" /></td>
  <td>${{ item.price * item.quantity | currency }}</td>
</tr>

[agentx001]

Ну прекратите вы уже сравнивать JQuery с фреймворками для SPA! Достоинства первого — это тысячи различных плагинов на любой цвет и вкус — колорпикеры, календари, слайдеры, кроперы картинок и все такое. Конкретно данный пример вообще не показывает преимущества Vue, все тоже самое можно за пол часа на ваниле сделать. Ну серьезно, кто-то в 2018 году пользуется джикверей ради манипуляций с DOM?

[ht-pro]

Почему все делают мануалы на самые банальные вещи, которые легко осваиваются через документацию?
Почему бы не сделать более интересные руководства, например, что лучше использовать при отправке AJAX-запросов, как обрабатывать отправленные данные на сервере и возвращать их и т.д.
ИМХО, сегодня это было бы более полезно.