Насколько актуален jQuery?

Question

[Johannes Cruijff]

Привет, Тостер! Объясните, пожалуйста, такой момент: почему в настоящее время всё чаще слышно, что jQuery – это устаревшая во всех смыслах библиотека, о которой следует забыть уже в 2018-2019?

Я начинающий разработчик, изучаю Javascript. В процессе поиска информации, регулярно вижу утверждения о ненужности jQuery. И напротив, внятно сформулированных альтернатив, пока не нахожу. Хотел бы выяснить для себя, уже наверняка:

1. Действительно ли jQuery устарел и почему?
2. Что вы используете в работе вместо jQuery?
3. Целесообразно ли для таких, как я, тратить сегодня время на его изучение?

Заранее благодарю за ответы.

Answer 1

[Владимир Проскурин]

1) Он устарел по той причине, что его возможности уже реализованы в JS
2) Когда надо склепать быстрый лендос со слайдером slick, я использую jQuery. Когда нужно что-то по серьезнее - зависит от задачи, как замена Vue
3) Нет, осваивайте JS, а jQuery сам придет, ничего в нем сложного нет, по мере работы будете разбираться, копаясь в документации.

Comments

[Crash]

прям все возможности уже реализованы? может я отстал от жизни

[Владимир Проскурин]

Crash, какие-то штуки делаются дольше, но из-за них нет смысла тащить jQuery. Есть пример?

[Crash]

Владимир Проскурин, те же анимации, например api.jquery.com/slideToggle
на нативном JS их делать по-любому более трудоемкая задача

[Владимир Проскурин]

Crash, простые анимации легко делать на css, а для сложных уже нужны специализированные либы.

[Anton Mashletov]

Владимир Проскурин, как сделать свой slideToggle c complete обработчиком на простой анимации css и js?

[Владимир Проскурин]

Anton Mashletov, а как сделали в jQuery? Они сделали таймером, а производительнее делать на css, плюс есть событие animationend

[Антон Спирин]

Владимир Проскурин, "нет смысла тащить jQuery" - необъективная мантра людей которые любят поспорить, не приводя объективных аргументов. JQuery не надо "тащить", эта библиотека с лаконичным интерфейсом, экономящая кучу времени в простых проектах, добавляется одной строчкой кода. И многие библиотеки вроде Bootstrap имеют JQuery в зависимостях.
Если вы не видите для себя смысла и осознано предпочитаете "какие-то штуки делать дольше", это не повод определять грани смысла для окружающих.

[Владимир Проскурин]

Антон Спирин,

2) Когда надо склепать быстрый лендос со слайдером slick, я использую jQuery.

хм?
а вот это

какие-то штуки делаются дольше, но из-за них нет смысла тащить jQuery. Есть пример?

я имел ввиду, что ради одного slickDown, тащить jQuery смысла нет. В jQuery есть смысл в его огромной базе плагинов, если их не использовать, то и смысл юзать jQuery тоже нет.

PS: Вы меня прям обожаете вижу :-)

[Антон Спирин]

Владимир Проскурин,

я имел ввиду, что ради одного slickDown, тащить jQuery смысла нет.

А по тексту, вы дополнили первый пункт своего ответа и в полном виде он теперь звучит так:
Он устарел по той причине, что его возможности уже реализованы в JS, какие-то штуки делаются дольше, но из-за них нет смысла тащить jQuery.
Или вы не имели ввиду то, что написали?

В jQuery есть смысл в его огромной базе плагинов, если их не использовать, то и смысл юзать jQuery тоже нет.

Снова не объективно и не аргумент отказываться от использования JQuery.

Вы меня прям обожаете вижу

ad hominem

[Владимир Проскурин]

Он устарел по той причине, что его возможности уже реализованы в JS, какие-то штуки делаются дольше, но из-за них нет смысла тащить jQuery.

Вы не дополнили "... но есть смысл тащить, если нужны определенные плагины от jQuery".
Какой смысл использовать селекторы, когда есть querySelector? Какой смысл использовать встроенные функции для массивов, когда все появилось в ES6? Какой смысл использовать всякие fadeIn, fadeOut, slideDown и прочие, когда transition тащит?
Разве не считается устаревшей штукой то, что уже делает определенные штуки хуже чем встроенная штука? Ну или давайте на делфи проги писать, зачем эти всякие C#, питоны.
Вы пытаетесь мне доказать то, что я написал.
jQuery - есть смысл, если у стоит задача быстро (не качественно) склепать просто сайт. Что-то чуть сложнее (калькуляторы, скрипты), то jQuery уже стоит под вопросом.

Снова не объективно и не аргумент отказываться от использования.

Давайте, расскажите мне, в каких проектах вы используете jQuery. Я послушаю. Если напишите о простых сайтиках и лендосиках, автоматически подтвердите, что я прав и на этом закончим. Если напишите про средние магазы, калькуляторы, скрипты, приложения, я расскажу вам о чудесном мире Vuejs и ES6

[Антон Спирин]

Владимир Проскурин,

Он устарел по той причине, что его возможности уже реализованы в JS, какие-то штуки делаются дольше, но из-за них нет смысла тащить jQuery, но есть смысл тащить, если нужны определенные плагины от jQuery.

Утверждение объективней не стало. Оно ложно и способно ввести в заблуждение, хотя бы учитывая тот факт, что далеко не "все его возможности реализованы в JS". То, что эти возможности можно реализовать самому, уже другой вопрос.

Какой смысл использовать селекторы, когда есть querySelector

Тут уж каждый решает для себя. Объективно, вызов JQuery гораздо лаконичней querySelecrorAll с последующей итерацией и не требует сторонних функций хелперов или изворотов для итерации по коллекции. Это снижает когнитивную нагрузку с человека сопровождающего код, особенно если человек его видит впервые. Пример:
$('.select').click(handler);
Никто не мешает вам написать и использовать вагон хелперов. Тут уж каждый решает сам, что ему удобней.

Какой смысл использовать всякие fadeIn, fadeOut, slideDown и прочие, когда transition тащит?

Повторите с transition эту простую анимацию, при условии, что высоту списка вы не знаете.

Разве не считается устаревшей штукой то, что уже делает определенные штуки хуже чем встроенная штука?

Объективно нет. Сам проект не deprecated, поддерживается и активно используется.
В JQuery то же делегирование реализовано очень удобно, альтернативу надо писать самому.

Вы пытаетесь мне доказать то, что я написал.

Плохая идея рассказывать оппоненту о его мыслях и мотивах. Я вам прямо написал, что ваше утверждение не объективно и отчасти ложно.

jQuery - есть смысл, если у стоит задача быстро (не качественно) склепать просто сайт. Что-то чуть сложнее (калькуляторы, скрипты), то jQuery уже стоит под вопросом.

Снова ваша субъективная оценка. Тут каждый сам для себя решает. Бизнесу зачастую гораздо дешевле обходится разработка и поддержка модулей на JQuery, а студиям дешевле обходятся специалисты со знанием этой библиотеки и дефицита в них обычно нет.

Давайте, расскажите мне, в каких проектах вы используете jQuery. Я послушаю.

То, что лично я использую в проектах никак к вопросу дискуссии не относится.

[Denis Popov]

Владимир Проскурин, зачем тогда вообще yii, lavarel и прочие? на чистом php же можно все реализовать...

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

[Владимир Проскурин]

Denis Popov,

на чистом js легко получить доступ к атрибутам или выбрать нужный элемент DOM?

Да, querySelector/querySelectorAll и getAttrubute

я и гляжу что код на js чистом вообще нихрена не читабелен

Проблема конкретного кода, на который вы смотрите. Лапша на jQuery еще чаще нечитабельна.

Вообще, я не хочу возвращаться к этому спору. Спустя 2 года он еще более неактуален.

Answer 2

[Crash]

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

Comments

[Кирилл Несмеянов]

Анимашки и прочее делаются на чистом css с помощью одной-двух строчек кода (transition as example). Запрос по аяксу делается одной функцией из 5ти буковок.

Как-то не слишком убедительно. А ещё аргументы будут?

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

А если будут аргументация в сторону кроссбраузерности, то могу посоветовать изучить то, как подключаются полифиллы. Хотя можно не изучать, достаточно просто воспользоваться дефолтным стеком, от которого сейчас не убежать никуда: babel + webpack/gulp/etc. Ну или просто подумать на тему того стоит ли вообще поддерживать тот стек браузеров, на котором половина сайтов в интернете нынче не воспроизводится корректно.

[Антон Спирин]

Кирилл Несмеянов, в том-то и дело, что JQuery не устарел хотя бы потому, что активно используется, поддерживается и еще долго будет. Причину по которой его до сих пор активно используют вы не раскрыли. Ваше утверждение о причинах не умнее: лопата давно устарела, ее активно используют малограмотные индивиды у которых не хватает мозгов получить права на трактор, отсюда столько сопутствующего инвентаря: тележки, перчатки и прочее. Если не брать во внимание последние, то сам феномен лопаты давно как не актуален.

[Кирилл Несмеянов]

Антон Спирин, наоборот же. Все тащат трактор туда, где он не нужен, просто удосужевшись изучить принцип работы этой самой лопаты. А по дороге ещё и колят этим самым трактором дрова ;)

JS всё же на порядок быстрее и проще JQuery. Ну и для анимаций стоит использовать css, а не трактор.

[Антон Спирин]

Кирилл Несмеянов,

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

Не нужен почему? По какой методике целесообразность определяли? И вы знаете всех, чтобы делать такие смелые заявления? Думаю нет.

JS всё же на порядок быстрее и проще JQuery.

Для примера вот вам выборка по слектору.
Никаким порядком тут и не пахнет, даже наоборот. На моей машине JQuery справляется с конкретной задачей в 2-4 раза быстрей.
Ясно, что нативную выборку по классу сделать быстрей. Это просто пример типовой задачи.
А как много задач в типовых проектах где используется JQuery, для решения которых эта скорость важна? Особенно на небольших сайтах.
Напишите этот вызов проще:
$('.select').click(handler);

для анимаций стоит использовать css

Зачем, например, фрилансеру тратить время, что-то там придумывать писать, если он сделал вызов slideDown и заработал денег, решив задачу?

[Кирилл Несмеянов]

Зачем, например, фрилансеру тратить время, что-то там придумывать писать, если он сделал вызов slideDown и заработал денег, решив задачу?

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

Для примера вот вам выборка по слектору. Никаким порядком тут и не пахнет, даже наоборот.

Оба варианта - печаль с точки зрения качества кода. Почему:
1) Ориентировка на классовые селекторы, которые предназначены для CSS. Для JS существуют id и дата-атрибуты. Рекомендуется же именно первый вариант, т.к. с точки зрения производительности - это просто ураган против улитки.
2) Ориентировка на классы запутывает код, т.к. модификация вёрстки в этом случае становится слабоподдерживаемой.
3) Для оперирования элементами непосредственно из вёрстки крайне рекомендуется либо обратная модель взаимодействия (вроде MVVM), либо локальный скоуп с возможностью контроля данных и вызова локальных методов (MVC и MVP).

Т.е. тут скорость JQuery бесспорна, только этот код пахнет. Что нивелирует весь профит за счёт последующего запутывания лапши.

[Антон Спирин]

Кирилл Несмеянов,

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

А теперь попробуйте привести хоть один аргумент почему его решение не адекватно и не поддерживаемо?
Он эффективно выполнил задачу одной строчкой кода.

Оба варианта - печаль с точки зрения качества кода. Почему:

Причем тут вообще качество кода в абстрактном примере? Вы куда-то далеко от темы ушли.
Да и к классам, к слову, можно написать префикс js- этот вариант будет более гибкий в использовании чем, рекомендованные вами, id.
А data-атрибуты существуют, вы удивитесь, для данных.

Т.е. тут скорость JQuery бесспорна, только этот код пахнет. Что нивелирует весь профит за счёт последующего запутывания лапши.

Вот вам к примеру весь код маленького проекта:

$('.js-select').click(someHandler);
$('.js-slider').slideshow();
$('.js-contact-us-form').submit(submitHandler);

Чем этот код по-вашему пахнет?
Как он в последствии будет запутан, да и будет ли?
Какое альтернативное архитектурное решение вы лично посоветуете дабы спасти проект?

Простите, конечно, но ваши суждения не объективны. Это понятно, что для реализации более-менее сложного проекта стоит использовать фреймворки. Но вопрос не в этом.

[Кирилл Несмеянов]

Окок, убедили. Используйте, наслаждайтесь)

Answer 3

[netrox]

1)По-прежнему используется на большинстве сайтов (ещё куча плагинов на нём).
2)Можно заменить на чистый js.(Фреймворки не подходят для типичной манипуляции DOM)
3)Много времени его изучение не займёт. Попробуйте и решите подходит ли он вам.

Answer 4

[DeniSidorenko]

Все зависит от задачи. Если к примеру вы работайте с высоко высоконагруженными проектами, для разработки крупной сети, jquery использовать не стоит , ибо там и так нагрузки хватает. А если вы создаете лендинг на заказ, есть смысл его использовать по несколько причин
1) Быстрее код написать на jQuery
2) Есть множество плагинов что использует jquery(Mask, Popup, Sliders )
3) При грамотной разработке, минификации и оптимизации скорость загрузки с Jquery и без, будет незаметной

Но если проект серьезнее и в будущем он будет много дополняться лучше отказаться от jQuery

Comments

[Denis Popov]

как это связано вообще? от использования чистого js число ajax запросов уменьшится?))

Answer 5

[frees2]

jQuery полностью заменён JS
localStorage
fetch
Ну и много чего прямо туда не вставить.
Vue для крупных проектов, где работают отдельно всякие дизайнеры.

Comments

[Anton Mashletov]

полностью

slideToggle?

fetch

Уже работает в IE/Safary?

localStorage

У JQuery был какой-то аналог этого?

[Владимир Проскурин]

slideToggle

Серьезно?

[Кирилл Несмеянов]

Anton Mashletov,

slideToggle

el.classList.toggle('slide')

.el {
    transition: transorm .3s ease;
    &.slide { transform: scale(0, 1); }
}

Вжух! И причём полностью настраивается до мелочей переходов добавлением обычных стилей.

[Anton Mashletov]

Владимир Проскурин, что "серьёзно"? да.

[Владимир Проскурин]

Anton Mashletov, просто это не та штука, из-за которой стоит ставить jQuery.

[Anton Mashletov]

Кирилл Несмеянов,
Вжух и я просто написал slideDown() вместо этих твоих строчек. А дополнительно настраивать такое ни разу в жизни не понадобилось.

[Anton Mashletov]

Владимир Проскурин, суммарно $('#id'), slideToggle, ajax, toggle, click заменяют мне длинные addEventListener / querySelector, возню с XMLHttpRequest и экономят мое время.
PS: Разумеется речь идет не о сложных сайтах, где лучше использовать Vue/React.

[Владимир Проскурин]

Anton Mashletov, в чем и суть, вы ставите jQuery ради пару функций, а можно ставить эти функции по надобности через npm. Например вместо ajax я ставлю fetch-polyfill, и для остальных ваших примеров тоже можно найти либы. Но это дело каждого конечно, если нужно быстро, и это привычно, то лучше jQuery

[Кирилл Несмеянов]

Anton Mashletov, настраивать не приходилось, т.к.
1) Либо у вас на проекте не было ни разу нормального дизайнера, который сразу зарубит идею с пропорциональным сжатием, ибо это полное дерьмо с точки зрения визуальной составляющей.
2) Либо проекты уровня лендингов, где просто плевать как это всё работает, сколько памяти жрёт и как сильно забивает канал сервера )

[Кирилл Несмеянов]

Владимир Проскурин, суммарно $('#id'), slideToggle, ajax, toggle, click заменяют мне длинные addEventListener / querySelector, возню с XMLHttpRequest и экономят мое время.

Предлагаю поставить IDE и внезапно это время перестанет тратиться. С другой стороны - нормальный разработчик экономит время пользователей, а не своё. Но это уже другая история)

[Anton Mashletov]

Кирилл Несмеянов, сложилось впечатление, что вы лишь надуманно докапываетесь: то дизайнер не тот, то сайт примитивный, то ide-не стоит. Возможно. Я далеко не топ прогер. Но суди дела это совсем не меняет — код на jquery получается короче, лаконичней (как по мне), библиотека много не весит, для мелких проектов весьма сгодится. Не вижу смысла дальше мусолить эту тему.

[Кирилл Несмеянов]

код на jquery получается короче

Не факт ;)

[Антон Спирин]

Вжух! И причём полностью настраивается до мелочей переходов добавлением обычных стилей.

Вжух и получили каую-то чачу но не slideToggle.

[Кирилл Несмеянов]

webdev341, ок:

JQuery:

$.ajax({
    type: 'POST', 
    url: "path/to/api",
    data: "banana=yellow",
    success: function (data) {
        alert(`Success: ${data}`);
    },
}); 
// 157 символов

Vanilla:

let response = await fetch('path/to/api', {
    method: 'POST',
    body: 'banana=yellow'
});

alert(`Success: ${await response.body}`);
// 138 символов

Но при этом у нативного JS куча преимуществ. Например, можно отправить несколько параллельных запросов одновременно, в отличии от JQ:

let [result1, result2] = await Promise.all([fetch('a'), fetch('b')]);

Answer 6

[ThunderCat]

Уже было сто раз

Comments

[Johannes Cruijff]

Единственный ответ годичной давности. О да, это было сотню раз, спасибо.

[ThunderCat]

Johannes Cruijff, нихрена не поменялось, вообще.

Answer 7

[Андрей К]

3. Если специализация js, то учить его в 2018 просто бессмысленно.
Если какой-то бэк-энд, то есть вероятность, что его придется использовать.
2. JS, Vue/React.
1. jQuery появился в темные времена, когда было куча браузеров несовместимых между собой, потом они начали брать функции, которые нужны были разработчикам и делать их удобные реализации, типа тех же Аякс-функций.
Сейчас есть стандартный js, который это все умеет, в принципе, во многом именно благодаря jQuery, не нуждается в нем.
Получается, или нужны простые манипуляции и в jQuery нет смысла, или нужно что-то сложнее и уже нужен какой-то нормальный фреймворк.

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