jQuery - у світі JavaScript-бібліотека. Спільнота веб-розробників створила її наприкінці 2000-х, що призвело до виникнення багатої екосистеми сайтів, плагінів та фреймворків, які використовують під капотом jQuery.
Але останніми роками її статус головного інструменту для веб-розробки похитнувся. Давайте подивимося, чому jQuery стала популярною і чому вона вийшла з моди, а також у яких випадках її ще доцільно використовувати для створення сучасних сайтів.
Коротка історія jQuery
Джон Резіг () створив першу версію бібліотеки у 2005-му, а -м, на заході під назвою BarCampNYC. на автор написав:
jQuery - це Javascript-бібліотека, в основі якої лежить девіз: Програмувати Javascript має бути приємно. jQuery бере часті завдання, що повторюються, витягує всю непотрібну розмітку і робить їх короткими, елегантними і зрозумілими.
У jQuery дві головні переваги. Перше – це зручний API для маніпулювання веб-сторінками. Зокрема, він надає потужні методи вибору елементів. Вибирати можна не тільки за ID або класами, jQuery дозволяє писати складні вирази, наприклад, щоб вибирати елементи на основі їх взаємозв'язків з іншими елементами:
// Select every item within the list of people within the contacts element
$('#contacts ul.people li');Згодом механізм вибору перетворився на окрему бібліотеку. .
Другою перевагою бібліотеки було те, що вона абстрагувала різницю між браузерами. У ті роки було складно писати код, здатний надійно працювати у всіх браузерах.
Відсутність стандартизації означала, що розробникам потрібно враховувати численні різницю між браузерами і прикордонні випадки. Погляньте на та пошукайте по jQuery.browser. Ось один із прикладів:
// If Mozilla is used
if ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) {
// Use the handy event callback
jQuery.event.add( document, "DOMContentLoaded", jQuery.ready );
// If IE is used, use the excellent hack by Matthias Miller
// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited
} else if ( jQuery.browser == "msie" ) {
// Only works if you document.write() it
document.write("<scr" + "ipt id=__ie_init defer=true " +
"src=javascript:void(0)></script>");
// Use the defer script hack
var script = document.getElementById("__ie_init");
script.onreadystatechange = function() {
if ( this.readyState == "complete" )
jQuery.ready();
};
// Clear from memory
script = null;
// If Safari is used
} else if ( jQuery.browser == "safari" ) {
// Continually check to see if the document.readyState is valid
jQuery.safariTimer = setInterval(function(){
// loaded and complete are both valid states
if ( document.readyState == "loaded" ||
document.readyState == "complete" ) {
// If either one are found, remove the timer
clearInterval( jQuery.safariTimer );
jQuery.safariTimer = null;
// and execute any waiting functions
jQuery.ready();
}
}, 10);
}А завдяки jQuery розробники могли перекласти турботи про всі ці підводні камені на плечі команди, що розвиває бібліотеку.
Пізніше jQuery полегшило впровадження більш складних технологій, таких як анімації та Ajax. Бібліотека фактично перетворилася на стандартну для веб-сайтів залежність. І сьогодні вона забезпечує роботу величезної частки інтернету. W3Techs вважає, що .
Контроль за розвитком jQuery також став формалізованішим. 2011-го команда . А 2012-го jQuery Board.
У 2015-му jQuery Foundation влився в Dojo Foundation,, який потім об'єднався з Node.js Foundation у-м для створення, в рамках якого jQuery була одним з».
Змінні обставини
Однак останніми роками jQuery . GitHub. Bootstrap v5 , тому що це його «»(на даний момент розміром 30 Кб, мініфікована та запакована). Декілька тенденцій у веб-розробці послабили позицію jQuery як необхідного інструменту.
Браузери
Через низку причин, відмінності та обмеження браузерів стали менш важливими. По-перше, покращилася стандартизація. Основні розробники браузерів (Apple, Google, Microsoft та Mozilla) спільно розробляють у рамках.
Хоча браузери ще відрізняються один від одного в ряді важливих моментів, у вендорів хоча б є засіб для пошуку та створення спільної бази замість один з одним. Відповідно, API браузерів набули нових можливостей. Наприклад, здатний замінювати Ajax-функції з jQuery:
// jQuery
$.getJSON('https://api.com/songs.json')
.done(function (songs) {
console.log(songs);
})
// native
fetch('https://api.com/songs.json')
.then(function (response) {
return response.json();
})
.then(function (songs) {
console.log(songs);
});Методи и дублюють засоби вибору з jQuery:
// jQuery
const fooDivs = $('.foo div');
// native
const fooDivs = document.querySelectorAll('.foo div');Маніпулювати класами елементів тепер можна за допомогою :
// jQuery
$('#warning').toggleClass('visible');
// native
document.querySelector('#warning').classList.toggle('visible');На сайті перераховано ще кілька ситуацій, у яких код jQuery можна замінити нативним кодом. Деякі розробники завжди дотримуються jQuery, тому що просто не знають про нові API, але коли дізнаються, починають рідше використовувати цю бібліотеку.
Використання нативних можливостей дозволяє підвищити продуктивність сторінок. багато тепер можна реалізувати за допомогою CSS.
Друга причина полягає в тому, що браузери оновлюються набагато швидше ніж раніше. У більшості з них застосовується , крім Apple Safari. Вони можуть оновлюватися у фоновому режимі без залучення користувача та не прив'язані до оновлень ОС.
Це означає, що нові можливості браузерів та виправлення багів поширюються набагато швидше, і розробникам не потрібно чекати, доки частка досягне прийнятного рівня. Вони можуть впевнено використовувати нові фічі та API без завантаження jQuery чи поліфілів.
Третя причина полягає в тому, що Internet Explorer наближається до стану повної неактуальності. IE вже давно є бичем веб-розробки у всьому світі. Характерні для нього баги були поширені, а оскільки IE домінував у 2000-х і не використовував «вічнозелену» стратегію оновлення, досі часто зустрічаються його старі версії.
У 2016-му Microsoft прискорила виведення IE з експлуатації, десяту і раніше версії, обмежившись підтримкою IE 11. І все частіше веб-розробники можуть дозволити собі розкіш ігнорування сумісності з IE.
Навіть jQuery перестав підтримувати IE 8 і нижче, починаючи з , що вийшла 2013-го. І хоча в деяких випадках ще потрібна підтримка IE, наприклад, на старих сайтах, проте ці ситуації виникають все рідше.
Нові фреймворки
З моменту появи jQuery було створено безліч фреймворків, у тому числі сучасні лідери , и . Вони мають дві важливі переваги перед jQuery.
По-перше, вони дозволяють легко розділяти інтерфейс користувача на компоненти. Фреймворки спроектовані так, щоб обробляти малювання та оновлення сторінки. А jQuery зазвичай використовується лише для оновлення, покладаючи на сервер завдання надання початкової сторінки.
З іншого боку, компоненти React, Angular та Vue дозволяють тісно зв'язати HTML, код і навіть CSS. Як ми поділяємо кодову базу на багато самодостатніх функцій і класів, так і можливість розділити інтерфейс на компоненти, що повторно використовуються, спрощує складання і супровід складних сайтів.
Другою перевагою є те, що свіжіші фреймворки дотримуються декларативної парадигми, в рамках якої розробник описує, як має виглядати інтерфейс, а виконання всіх необхідних змін для досягнення бажаного покладає на фреймворк. Цей підхід суперечить імперативному підходу, характерному для jQuery-коду.
У jQuery ви явно прописуєте кроки для здійснення будь-яких змін. А в декларативному фреймворку ви кажете: «Згідно з цими даними, інтерфейс має виглядати так». Це може полегшити написання коду без багів.
Розробники використали нові підходи до розробки сайтів, через що популярність jQuery знизилася.
Коли використовувати jQuery?
Так коли ж випливає використовувати jQuery?
Якщо складність проекту зростатиме, то краще почати з іншою бібліотекою чи фреймворком, який дозволяє осмислено керувати складністю. Наприклад, розділяти інтерфейс на компоненти. Використання jQuery в таких сайтах спочатку може виглядати прийнятно, але це швидко призведе до виникнення спагетті-коду, коли ви не будете впевнені в тому, який фрагмент на яку частину сторінки впливає.
Я бував у такій ситуації, при спробі зробити будь-яку зміну виникає відчуття важкого завдання. Не можна бути впевненим, що нічого не зламаєш, тому що селектори jQuery залежать від структури HTML, створеної сервером.
На іншому кінці шкали знаходяться прості сайти, яким потрібно лише трохи інтерактивності або динамічного контенту. У таких випадках я також не став би за замовчуванням використовувати jQuery, тому що з нативними API можна зробити набагато більше.
Навіть якщо мені знадобиться щось потужніше, я шукаю спеціалізовану бібліотеку, наприклад, для Ajax або для анімацій. Це буде простіше, ніж завантажувати всю jQuery заради невеликої функціональності.
Думаю, найкращим обґрунтуванням використання jQuery буде те, що вона надає всеосяжну функціональність для роботи фронтенду сайту. Замість того, щоб вивчати різноманітні нативні API або спеціалізовані бібліотеки, ви можете прочитати лише документацію jQuery і відразу станете продуктивними.
Імперативний підхід погано масштабується, але освоїти його простіше, ніж декларативний підхід інших бібліотек. Для сайту з явно обмеженими можливостями краще застосувати jQuery та спокійно працювати: бібліотека не потребує складного складання чи компіляції.
Крім того, jQuery хороша в тих випадках, якщо ви впевнені, що сайт не з часом ускладнюватиметься, і якщо вас не хвилює нативна функціональність, яка, безумовно, вимагатиме написання більше коду, ніж jQuery.
Також ви можете використовувати цю бібліотеку, якщо потрібно підтримувати старі версії IE. Тоді jQuery буде служити вам як у ті часи, коли IE був найпопулярнішим браузером.
Погляд у майбутнє
jQuery ще не скоро зникне. Вона , і багато розробників вважають за краще використовувати її API, навіть за доступності нативних методів. Бібліотека допомогла цілому покоління розробників створювати сайти, що працюють на будь-яких браузерах. І хоча в багатьох аспектах її замінили нові бібліотеки, фреймворки та парадигми, jQuery відіграла величезну позитивну роль у створенні сучасного Інтернету.
Якщо функціональність jQuery суттєво не зміниться, цілком імовірно, що в найближчі кілька років використання бібліотеки продовжуватиме повільно, але неухильно знижуватись. Нові веб-сайти, як правило, з самого початку створюються з використанням більш сучасних фреймворків, і відповідні сценарії використання jQuery виникають все рідше.
Комусь не подобається інтенсивність старіння інструментів для веб-розробки, але для мене це є свідченням швидкого прогресу. jQuery дозволила нам багато робити краще. Те саме вірно і для її наступників.
Джерело: habr.com