Можно ли использовать jquery

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

Полезные ресурсы урока:

• Сниппеты YDNjQ на Github
• Урок по редактору Visual Studio Code
• Урок по редактору Sublime Text
• Урок по созданию сниппетов для Sublime Text

В конце выпуска мы познакомимся с коллекцией сниппетов You Don’t Need jQuery, которую я подготовил для редакторов Visual Studio Code и Sublime Text. Эта коллекция послужит отличным помощником, если вы вдруг проснулись и поняли, что жизнь слишком проста и нужно писать код исключительно на ванильном JS. Кроме того, в грядущем большом курсе Джедай вёрстки 8, в качестве академического примера, мы будем верстать без использования jQuery, на чистом JS и представленная коллекция будет очень кстати.

jQuery – это самая популярная в мире JS библиотека, позволяющая значительно упростить процесс взаимодействия с элементами DOM, а также предоставляющая удобный API для работы с событиями и AJAX.

Здесь я не буду защищать ни одну из сторон, так как это бессмысленно. Это не конкуренция и сокращение «vs» (versus) ставить между jQuery и нативным JS просто некорректно. Когда надо, я использую jQuery, когда не надо, не использую. jQuery — это инструмент, созданный для того, чтобы максимально сократить время разработки. Здесь я даже не говорю о краткости записи, ведь нативный JS не стоит на месте, стандарты ES развиваются и нативный код становится короче. Дело не в этом.

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

Но, давайте по-порядку рассмотрим все аргументы «за» и «против» использования jQuery, а затем перейдём к примерам проектов, в которых целесообразно использовать эту библиотеку.

Аргументы в пользу jQuery

1. Кроссбраузерность. jQuery учитывает особенности работы со всеми возможными браузерами (с поддержкой JS, конечно-же), имеет все необходимые фолбеки и запасные варианты реализации. Ваш код будет работать везде. В противовес, НЕ использование jQuery потребует от вас больше временных затрат и усилий для написания и тестирования вашего кода.
2. Вариативность. Функции jQuery включают огромное количество вариантов и возможностей использования, что делает их максимально универсальными и лаконичными. Использование ванильного JS предполагает написание намного большего количества кода, условий и проверок для реализации аналогичного функционала, даже если речь идёт о какой-то специфической задаче, где не требуется особая универсальность.
3. Расширения. Тысячи готовых плагинов, расширений, примеров, сниппетов готовы к использованию. Вам не придётся писать свой велосипед для решения типовой задачи. Можно сказать, что это самое важное преимущество jQuery. Писать плагины для jQuery также легко, как писать любой другой код с использованием этой библиотеки. Именно поэтому jQuery так нравится многим веб-разработчикам. Сейчас можно найти абсолютно любой плагин, который поможет быстро решить любую задачу в условиях коммерческого проекта. А в заказной разработке, если вы фрилансер или студия, время — деньги.
4. Сообщество. Огромное количество уроков, примеров кода, решений на сайтах QA. Можно очень быстро найти решение любой задачи, моментально найти ответ на любой вопрос и продолжить работу.
5. Краткость записи. Нативный JS, не смотря на своё развитие, пока что не может предложить такие-же возможности краткой записи. jQuery – это простой, лаконичный код, понятный даже начинающим и довольно простой в изучении.
6. CMS. Практически все популярные CMS, такие, как OpenCart, Joomla, WordPress, используют библиотеку jQuery. Это огромный плюс, ведь возможности этой библиотеки как во фронтенде, так и в бэкенде любой CMS, как правило, реализованы по максимуму и вопроса — подключать jQuery для десяти кастомных строк кода или нет, не стоит. Пользуйтесь в своё удовольствие.

Аргументы против jQuery

1. Библиотека jQuery загружается в проект как дополнительный ресурс. Можно много спорить относительно того, стоит ли загружать файл, весом 100кб к проекту, чтобы написать всего 5 строчек кода, в то время, когда каждая из картинок на странице весит гораздо больше, а их там, на минуточку, могут быть сотни. Также, следует учитывать и все подключённые плагины, сниппеты и другие ресурсы, использующие jQuery, чтобы понять целесообразность подключения библиотеки.

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

Само по себе понятие «библиотека» в программировании довольно простое для понимания. В процессе работы с каким-либо языком программирования, разработчики сталкивались с определёнными задачами, однотипными проблемами, решения которых в результате были объединены в библиотеки для удобного повторного использования. Отсюда и возникают все плюсы и минусы использования библиотек. Плюс — проверенный код на любой случай жизни, минус — много того, что не используется здесь и сейчас также подтягивается в проект.

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

Использовать или не использовать jQuery?

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

Вообще, jQuery можно использовать практически в любых проектах, если вы уверены, что будет задействована достаточная часть библиотеки и не используется какой-либо JS-фреймворк. Конечно, никто не запретит подключить библиотеку к проекту и написать пресловутые 5 строк кода. Осудить вас может, пожалуй, только вышеупомянутый кодер-перфекционист, если случайно заглянет в ваши исходники. Ему лучше на глаза не попадаться, чтобы не случился очередной приступ паранойи и неконтролируемого гнева. А если серьёзно, то в таких случаях библиотеку можно и не использовать, а посмотреть вариант решения задачи в сниппетах для редакторов кода, которые я подготовил к данному выпуску (см. Полезные ресурсы урока).

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

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

Коллекция сниппетов для Visual Studio Code и Sublime Text.

Для того, чтобы облегчить написание нативного JS, если до этого вы использовали только jQuery, я подготовил коллекцию сниппетов для редакторов Visual Studio Code и Sublime Text, основанную на популярных примерах You Don’t Need jQuery (см. Полезные ресурсы урока). Сниппеты устанавливаются и работают с редакторами кода штатным образом. В коде каждого сниппета есть закомментированный пример, написанный с использованием jQuery и его альтернатива в нативном исполнении:

Установка в Sublime Text

Для установки сниппетов в редактор Sublime Text достаточно скачать архив с GitHub и распаковать папку «YDNjQ — Sublime Text Snippets» в директорию «ПОЛЬЗОВАТЕЛЬ AppData Roaming Sublime Text 3 Packages User», которую можно открыть из редактора: Меню «Preferences > Browse Packages…», затем перейти в папку User:

Установка в Visual Studio Code

Процесс установки сниппетов в кодовый редактор Visual Studio Code не на много сложнее. Скачиваем тот-же самый архив с GitHub и выгружаем содержимое папки «YDNjQ — Visual Studio Code Snippets» в папку «ПОЛЬЗОВАТЕЛЬ AppData Roaming Code User snippets». Обратите внимание, что необходимо выгрузить именно содержимое папки «YDNjQ — Visual Studio Code Snippets», то-есть весь список файлов:

После установки сниппеты доступны по ключевым словам jQuery-функций. Например, «hide», «fade», «load» и т. д. Для использования в Sublime Text достаточно набрать нужное сокращение и нажать Tab, или нажав Ctrl+Shift+P, ввести ключевое слово и выбрать нужный сниппет с префиксом YDNjQ. В редакторе Visual Studio Code достаточно нажать F1 > Insert Snippet, ввести ключ сниппета и выбрать нужный.

И в заключение. Хотите использовать jQuery или какую-либо другую библиотеку в вашем проекте — используйте на здоровье. Грамотно и рационально.

От автора: многие люди выступают за «просто используйте vanilla JavaScript, вам не нужен jQuery». Ну, многие вещи мне не нужны, но, тем не менее, их приятно иметь. Мне не обязательно нужен JQuery в 2019 году, у него есть не только плюсы, но и минусы. Но его, конечно, приятно иметь!

Такие страницы, как You might not need jQuery, пытаются продвигать идею, что вы можете легко отказаться от jQuery, но самый простой пример того, почему — это хорошая идея использовать jQuery: одна строка обычного кода jQuery заменяет 10 строк vanilla JS!

Большая часть JavaScript API — особенно DOM API — оскорбляет мое чувство эстетики, и это просто вежливый способ сказать, что я думаю, что JavaScript — это отстой.

el.insertAdjacentElement(‘afterend’, other) несомненно работает, но $(el).after(other) на самом деле более приятно. Хотя я никогда не был большим поклонником того, как выглядит функция $(), она намного лучше, чем то, что дает нам DOM.

Простой пример: как вы получаете элемент одного уровня? Это nextSibling или nextElementSibling? Какая разница? Какие браузеры поддерживают что? Пока вы заняты тем, что пытаетесь свериться с MDN, я просто буду использовать в jQuery next() или prev().

Многие обычные операции в стандартных API-интерфейсах JavaScript неудобны; я мог бы привести целый список, но страница You might not need jQuery (YMNJQ) уже сделала это.

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

Хотя совместимость браузеров является гораздо менее существенной проблемой , но она все еще актуальна, особенно если вы не принадлежите к типу людей «если это работает для 85% всего мира , то это достаточно хорошо для меня».

Вы всегда должны использовать JQuery? Нет, конечно нет. Добавление любой зависимости сопряжено с увеличением сложности и размера файла, но jQuery не так уж велик: сборка по умолчанию составляет 30 КБ, сжатая, пользовательская сборка без ajax и необычных вещей 23 КБ, а сборка, использующая querySelector вместо SizzleJS, составляет 17 КБ. И оригинальные 30K, и оптимизированные 17K кажутся мне вполне приемлемыми для многих целей.

Вы можете посмотреть на Bootstrap удаляет jQuery, чтобы увидеть пример того, как много усилий может потребоваться для использования vanilla JS: они написали свои собственные хелперы, пришлось отказаться от поддержки IE, так как ее было слишком сложно добавить, сделали API несовместимым («мы сломали все») и потратили на это полтора года. Если я посмотрю на конечный результат, я не могу сказать, что это намного лучше.

Я понимаю, почему они это сделали; люди хотят использовать Bootstrap с Vue.js и еще много чего, а использовать и Vue.js, и jQuery немного глупо. Я за то, чтобы уменьшить «веб-раздутие», но мы должны быть прагматичными и реалистичными. Включение ~17K jQuery действительно так плохо? Когда я упоминаю, что вам нужен более чем мегабайт JavaScript для такого сайта, как Medium или New York Times, то что, 17 КБ jQuery такое уж невыносимое бремя?

Есть несколько веских причин не использовать jQuery: если вы пишете код, который хотите использовать повторно, или если вы пишете только небольшую функцию. Но делать что-то, просто чтобы избежать jQuery? Просто используйте jQuery! «JQuery для всего», вероятно, не была такой уж хорошей идеей, но и «jQuery ни для чего» не лучше.

Я не зациклен на jQuery, и я с радостью использую «jQuery light», который соединяет JS API с чем-то более привлекательным. YMNJQ рекомендует bonzo и $dom, а также несколько других для AJAX и тому подобного, но многие из них, кажется, не поддерживаются достаточно. Кроме того, все уже знают jQuery. Зачем заменять его чем-то другим, если для этого нет веских причин?

Некоторые читатели могут задаться вопросом «а как же Vue.js, React или какой-либо другой современный фреймворк?» Цель этого поста — сравнить vanilla JavaScript с jQuery, а не предлагать Великую унифицированную теорию развития веб-интерфейса.

При этом, я думаю, есть несколько причин придерживаться простого JavaScript; прежде всего потому, что я хочу создавать быстрые веб-страницы, использовать простейший из возможных кодов и быть доступным как можно большему количеству людей. По моему опыту, сгенерированные на стороне сервера шаблоны, слегка присыпанные «прогрессивным улучшением», часто являются лучшим способом сделать это в стиле JavaScript. Зачастую это легче разрабатывается, быстрее, меньше подвержено ошибкам, и вентилятор вашего ноутбука не разбудит соседей.

Означает ли это, что эти веб-фреймворки всегда плохи? Нет, не так уж много вещей плохи «всегда» (или хороши), чаще всего это набор компромиссов (как, впрочем, и в случае jQuery).

По сути, я думаю, что Интернет — это система для просмотра документов, а не операционная система. Даже для многих «веб-приложений» (что бы вы ни имели ввиду) подход к документам работает достаточно хорошо (эта тема заслуживает отдельной публикации… может, когда-то в будущем).

Автор: Martin Tournoij

Источник: //arp242.net

Редакция: Команда webformyself.