DEV Community

sundaycoding
sundaycoding

Posted on

Что такое JavaScript-библиотека jQuery, почему её все ненавидят, и почему она так популярна среди начинающих программистов?

В современном мире, где царит безжалостная конкуренция в капиталистическом стиле, и стремительно развиваются технологии, программисты стремятся создавать продукты как можно быстрее. Скорость любой ценой - как бы печально это не звучало - доминирует в IT-сфере в последние десятилетия. И сказать чуть больше, иногда эта концепция трансформируется в "скорость в угоду качеству" - утром продукт, а вечером адекватная работа продукта. Так и живём! Но при чём же тут jQuery?

Веб-разработка не является здесь каким-то исключением, и так же попадает под общее правило. Сайты нужны заказчикам ещё вчера, позавчера, срочно, быстро, молниеносно, немедленно! И конечно же, адекватный программист который хочет заработать денег, ищет способы как ускорить свою деятельность, уложившись в заявленные сроки.

Но и не только заказчики любят поторопить разработчика - как гласят неумолимые цифры статистики, первые 2 компании в любом сегменте рынка быстро занимают порядка 70-80% этого рынка. Так что, концепция скорости, в некотором смысле, всё-таки имеет смысл.

Типичная ситуация при разработке веб-сайта или любого другого IT-проекта.
В инструментарии уважающего себя веб-программиста, есть много различных инструментов. Но один из них выделяется чуть ярче остальных - и это React универсальная библиотека jQuery. Эта библиотека сделана на языке JavaScript, и предназначена для придания сайту интерактивности. Всевозможные формы ввода, плавающие окна, блоки для просмотра фотографий и видео, различные виджеты и страницы обратной связи - всё это сделано в общем случае на JavaScript, и с некоторой долей вероятности на jQuery.

Фишка jQuery в том, что это инструмент веб-разработки, который помогает создавать веб-проекты очень быстро. Благодаря ей, удаётся значительно сократить выполнение рутинных и типовых задач. Нельзя сказать, что эта библиотека делает что-то волшебное (потому что большую часть того что она делает, можно сделать и на чистом JavaScript). Но определенно, благодаря своему необычному подходу, она позволяет быстро менять содержимое страницы, используя простые конструкции программного кода.

Вся суть jQuery в несколько строк 👌
В общем, представь себе что у тебя есть сайт, на котором есть веб- страница, на которой есть HTML-кнопка (обычная кнопка иными словами). Если что, про основы разработки сайтов на языке HTML у меня есть отдельная супер-подробная статья - вот тут. Так вот, всё-таки представим себе кнопку! И тебе например надо, чтобы при нажатии на эту кнопку что-то происходило - например показывалось какое-то сообщение в отдельном окне. В этом случае, тебе так или иначе придётся использовать JavaScript. И вот два принципиально разных подхода, которые будут решать одну и ту же задачу:

HTML-код страницы (кусок кода - непосредственно кнопка):

Кнопка

Подход чистого кода, на JavaScript (116 букв кода):

var button = document.querySelector("#my_button");
button.addEventListener("click", (event) => { alert("LOL"); });
А вот подход jQuery (56 букв кода):

$("#my_button").on("click", function(e) { alert("LOL"); });
Что это значит? Да то, что с помощью jQuery можно написать в два раза меньше кода, и получить точно такие же результаты. Да и вообще, можно выкинуть из головы кучу лишних операторов, и использовать конструкции вроде $("...") - которые будут возвращать ссылки на HTML-узлы - с которыми можно будет просто работать. Можно ещё и использовать множество других простых конструкций, которые предлагает библиотека jQuery, вместо того чтобы самому ручками писать каждый раз эти конструкции.

Вся суть jQuery в одной картинке.
Вот и весь фокус - вот и вся причина популярности. Банальная экономия примерно 50% трудозатрат на написание JavaScript-кода. Ну, и конечно не ограничиваясь только лишь этим.

Страх и ненависть в веб-разработке. Почему программисты не любят jQuery? 🤬
FunFact - 23% сайтов во всём мире на момент 2023 года используют jQuery. А всё почему?! Да потому, что это удобно - библиотека упрощает разработку, особенно для тех программистов, у которых пока небольшой опыт в разработке веб-проектов. И вот статистика, которая говорит об этом прямым образом (ха-ха, Node-js на втором месте, как тебе такое, ненавистник jQuery?!):

Статистика использования jQuery на 2023 год, в процентном соотношении.
Но почему же многие программисты не любят jQuery, и стараются избегать её применения? Если в двух словах - с точки зрения сферического программирования в вакууме, и снобско-высоких стандартов идейной чистоты кода, jQuery как бы делает код более "грязным".

Особенность библиотеки в том, что она обращается к элементам через оператор $ или jQuery, превращая один-единственный выбранный объект в массив. В результате, добрая половина прикладного кода начинает обращается к элементам напрямую (через стандартные методы веб-браузера), а вторая половина кода - через обёртку jQuery. Получается что-то вроде спагетти-кода, в котором смешиваются два подхода к работе с элементами страницы.

Типичная ситуация применения jQuery в разработке веб-проектов.
Ну и напоследок статья на Habr - там чуть более вдумчиво раскрывают аспекты идейной ненависти к этой библиотеке. Что же лично до моего мнения? Я пробовал делать большие проекты как с использованием jQuery, так и без него. По личным ощущениям, подход к написанию кода идейно без библиотек, слишком переоценён.

Личный опыт. В течение двух лет я писал JavaScript Vanilla-код (принципиально без каких-либо сторонних библиотек) старался всё идейно и максимально оптимизировать и вдумчиво экономить ресурсы. А потом психанул, и вернулся обратно на jQuery и другие готовые решения. Причина? Концепция "фанатичная экономия ресурсов" и концепция "идейная чистота кода" себя не оправдали. На код уходит гораздо больше времени, и в конечном итоге со временем он всё равно падает в качестве по разным причинам.

История создания jQuery 👨‍💻
Библиотека jQuery была создана Джоном Ресигом в 2006 году, со слов автора, чтобы преодолеть разрыв между сложным функционалом JavaScript и необходимой простотой веб-разработки.

Джон Резиг, создатель библиотеки jQuery. Счастливый человек, не стесняющийся создавать проекты с использованием jQuery.
Джон Ресиг родился 8 мая 1984 года и с ранних лет проявил интерес к программированию, который подкрепило его образование. Он получил степень бакалавра в Рочестерском технологическом институте, где специализировался на компьютерных науках.

jQuery в лице его автора прославился тем, что упростил обход HTML-документа, анимацию, обработку событий и Ajax-взаимодействие для быстрой веб-разработки. Благодаря адаптивности и простоте jQuery библиотека быстро стала инструментом, который расползся практически на весь интернет, и в некоторые годы безжалостно доминировал над голым JavaScript.

Ресиг опубликовал две версии книги под названием Pro JavaScript Techniques - в 2006 и 2015 годах. Позже, в 2008 году, он написал еще одну книгу под названием Secrets of the JavaScript Ninja, в которой излагаются техники JavaScript. Помимо написания книг, он выступал в качестве спикера и ведущего на многочисленных конференциях по всему миру, делая акцент на инструментах и техниках JavaScript.

После создания jQuery Резиг в 2011 году перешел на работу в Khan Academy, некоммерческую образовательную организацию. В Khan Academy он работал с JavaScript и сопутствующими технологиями, чтобы облегчить интерактивную среду обучения для пользователей. Роль Ресига заключалась в основном в разработке инструментов обработки JavaScript для сайта, что позволило ему повлиять на миллионы учеников и разработчиков по всему миру.

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

Основные возможности jQuery 🚀
В двух словах, основная задача jQuery - быстрая работа с содержимым веб-страницы. Когда надо сделать интерактивность, добавить какие-то кнопки которые будут что-то делать, создать анимацию и так далее. При этом, вторая часть "концепции" - когда всё это надо сделать быстро, с минимальными трудозатратами. Вот за этим и нужна jQuery. Ну а теперь небольшой список.

Быстрая работа с HTML-элементами на странице, подписка элементов на клики, перетаскивание, наведение мышки и так далее.
AJAX-запросы к серверу (взаимодействие пользовательской части интерфейса и серверной части проекта)
Анимация и интерактивность элементов на странице. Всевозможные слайдеры, листалки фотографий, и так далее.
Работа с JSON данными и данными в разных других форматах
Некоторое упрощение работы с циклами
Итак, что же в итоге? 🤨
Неважно, только начинаешь ли ты заниматься веб-разработкой или работаешь в этой сфере уже много лет, jQuery - ценный навык, который стоит освоить. Он предоставляет множество инструментов для добавления сложного функционала с минимальным количеством кода, обеспечивая достойную работу твоих проектов на различных платформах.

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

Даже если через 5-10 лет jQuery брезгливо выкинут на помойку и идейно перестанут внедрять в новые сайты, на текущий момент эта технология более чем актуальна. И вероятно, бесчисленные сайты, которые её сейчас используют - вряд ли в один миг исчезнут. Такие дела.

Qodo Takeover

Introducing Qodo Gen 1.0: Transform Your Workflow with Agentic AI

While many AI coding tools operate as simple command-response systems, Qodo Gen 1.0 represents the next generation: autonomous, multi-step problem-solving agents that work alongside you.

Read full post

Top comments (0)

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay