Стоит ли в 2017 году использовать jQuery?
Более двух лет назад я уже обращал внимание на эту проблему в переводе статьи "Is jQuery Too Big For Mobile?" за авторством VanToll'а.
Прошло два года, мобильный интернет стал гораздо доступней, даже в провинциальных российских городах почти везде можно включить 3G и не ждать загрузки сайта по 2-3 минуты (при условии конечно, что это не костыльное single page application с подключаемым скриптом на несколько мегабайт, но это уже тема для другой статьи). Значит ли все это, что можно использовать jQuery для любых проектов без оглядки?
Прошло два года, мобильный интернет стал гораздо доступней, даже в провинциальных российских городах почти везде можно включить 3G и не ждать загрузки сайта по 2-3 минуты (при условии конечно, что это не костыльное single page application с подключаемым скриптом на несколько мегабайт, но это уже тема для другой статьи). Значит ли все это, что можно использовать jQuery для любых проектов без оглядки?
Раньше практически все использовали jQuery и если у них спрашивали о преимуществах которые дает библиотека по сравнение с использованием нативного JavaScript'а, то они перечисляли примерно следующее:
- - Быстрый доступ к DOM
- - Кросбраузерность
- - Простая работа с AJAX
- - Встроенные визуальные эффекты
Сразу оговорюсь, я не агитирую поголовный отказ от jQuery везде и всюду, но когда вы создаете новый лендинг или небольшой сайт, подумайте действительно ли необходимо подключать для этого целую библиотеку?
Перед началом разбора хочу еще раз привести некоторые статистические данные. Обратимся к одному из крупнейших интернет-сервисов - Amazon. Они утверждают, что за каждые 100 мс задержки они теряют 1% продаж. Думаю нет смысла объяснять насколько это значимая сумма в валютном эквиваленте, так что начнем анализ.
Встроенные визуальные эффекты
Первое мое знакомство с jQuery привело меня в восторг отчасти из-за наличия множества эффектов, которые воспроизводились одной строчкой, вместо тонны кода на CSS и JavaScript, причем все было кросбраузерно из коробки! Но в дальнейшем я стал все меньше и меньше использовать встроенные эффекты, они мне надоели или не давали необходимых возможностей. Кросбраузерность стала менее актуальна (но об этом ниже) и даже если приходилось использовать несколько функций, большинство из них лежали мертвым грузом, тем самым занимая память и увеличивая время загрузки.
Возможно для быстрого прототипирования шаблона или для панели администратора, которую будут видеть только узкий круг людей, можно использовать jQuery и особо не париться. Но стоит учесть, что в этом случае вы увеличиваете загружаемый контент, в прошлой статье мы узнали что это может стоить вам от 100 до 1500 мс, есть над чем подумать.
Первое мое знакомство с jQuery привело меня в восторг отчасти из-за наличия множества эффектов, которые воспроизводились одной строчкой, вместо тонны кода на CSS и JavaScript, причем все было кросбраузерно из коробки! Но в дальнейшем я стал все меньше и меньше использовать встроенные эффекты, они мне надоели или не давали необходимых возможностей. Кросбраузерность стала менее актуальна (но об этом ниже) и даже если приходилось использовать несколько функций, большинство из них лежали мертвым грузом, тем самым занимая память и увеличивая время загрузки.
Возможно для быстрого прототипирования шаблона или для панели администратора, которую будут видеть только узкий круг людей, можно использовать jQuery и особо не париться. Но стоит учесть, что в этом случае вы увеличиваете загружаемый контент, в прошлой статье мы узнали что это может стоить вам от 100 до 1500 мс, есть над чем подумать.
Простая работа с AJAX
Можно особо не углубляться в дискуссии, а просто сказать, что на данный момент сложность в обработки AJAX запросов с помощью jQuery и с помощью нативного JavaScript - одинаковая. Тянуть для этого целую библиотеку - бессмысленно.
Можно особо не углубляться в дискуссии, а просто сказать, что на данный момент сложность в обработки AJAX запросов с помощью jQuery и с помощью нативного JavaScript - одинаковая. Тянуть для этого целую библиотеку - бессмысленно.
Кросбраузерность
В те времена, когда существовали пользователи, использующие ИЕ8 и ниже, это было особо актуально, jQuery использовал собственный движок Sizzle для выбора селекторов и позволял это делать одинаково успешно во всех браузерах. Сейчас же jQuery это просто надстройка над обычными querySelector и другими нативными функциями языка, которые поддерживают подавляющее количество браузеров.
В те времена, когда существовали пользователи, использующие ИЕ8 и ниже, это было особо актуально, jQuery использовал собственный движок Sizzle для выбора селекторов и позволял это делать одинаково успешно во всех браузерах. Сейчас же jQuery это просто надстройка над обычными querySelector и другими нативными функциями языка, которые поддерживают подавляющее количество браузеров.
Быстрый доступ к DOM
Это было весомым аргументом в то время, когда браузеры не поддерживали выше упомянутый querySelector. В качестве примера приведу два выражения выбирающие все указанные элементы на странице: var allElemJQuery = $('.element:hover'); var allElemJS = document.querySelectorAll('.element:hover'); Тут, конечно, следует уточнить, что эти методы возвращают разные объекты, но нативные возможности языка последние несколько лет развиваются быстрыми темпами и, если раньше выбрать определенный селектор было большой проблемой, то сейчас все стало гораздо проще.
Это было весомым аргументом в то время, когда браузеры не поддерживали выше упомянутый querySelector. В качестве примера приведу два выражения выбирающие все указанные элементы на странице: var allElemJQuery = $('.element:hover'); var allElemJS = document.querySelectorAll('.element:hover'); Тут, конечно, следует уточнить, что эти методы возвращают разные объекты, но нативные возможности языка последние несколько лет развиваются быстрыми темпами и, если раньше выбрать определенный селектор было большой проблемой, то сейчас все стало гораздо проще.
Расскажу личный пример, побудивший меня отказаться от использования jQuery в большом количестве проектов. Разрабатывая очередной лендинг, в котором присутствовала только асинхронная отправка формы и несколько стилей, подгружаемые через JavaScript, я задумался, зачем мне ради кода размером в 4 Кб тянуть зависимость в виде библиотеки на почти 80 Кб? Я переписал весь код на нативный JavaScript, потратив на это почти столько же времени, сколько на написание этого кода на jQuery, но при этом сократил размер подгружаемых скриптов в 16 раз!
Многие разработчики не хотят выходить из зоны комфорта и используют освоенные инструменты везде где это только можно, эта проблема касается как старых технологии, так и новых. Необоснованное использование React в небольших проектах, также плохо как подключение jQuery ради доступа к визуальным эффектам. Принцип "Работает - не трожь" конечно имеет место, но необходимо с умом подходить к выбору стека технологий при разработке проекта и если есть возможность пробовать что-то новое.