jQuery

Keling, veb texnologiyalaridagi ba’zi muammolarni React paydo bo’lishidan oldin qanday hal qilinganligini ko’rib chiqaylik va nega React muhimligini tushunamiz. Biz dastlab jQuery bilan boshlaymiz va oldingi Like tugmasi misolimizni qayta ko’rib chiqamiz.

jQuery’ning yechim bo’lishi

Qisqacha eslatma, bu yerda biz brauzerdagi Like tugmasinni interaktiv qilishni xohlaymiz:

<button id="likeButton">Like</button>

jQuery yordamida bu buttonga “like” funksiyasini quyidagicha qo’shamiz:

$("#likeButton").on("click", function () {
  this.prop("disabled", true);
  fetch("/like", {
    method: "POST",
    body: JSON.stringify({ liked: this.text() === "Like" }),
  })
  .then(() => {
    this.text(this.text() === "Like" ? "Liked" : "Like");
  })
  .catch(() => {
    this.text("Failed");
  })
  .finally(() => {
    this.prop("disabled", false);
  });
});

Ushbu misoldan ko’rinib turibdiki, biz ma’lumotlarni foydalanuvchi interfeysiga bog’laymiz va bu ma’lumotlar orqali interfeysni yangilaymiz. jQuery bir vosita sifatida foydalanuvchi interfeysini to’g’ridan-to’g’ri boshqarishda juda faol.

jQuery’ning kamchiliklari

jQuery o’z nazorati ostida bo’lmagan state bilan o’zaro aloqada bo’ladi va tashqaridan doimiy ravishda o’zgartirib turadi, bu esa og’ir “side-effect”larga olib keladi. Biz buni “side-effect” deb ataymiz, chunki kodning boshqa joylaridan, hatto masofaviy skriptlar orqali ham sahifaning strukturasini bevosita va global ravishda o’zgartirish mumkin. Bu esa oldindan bilib bo’lmaydigan xatti-harakatlarga va kuzatish qiyin bo’lgan murakkab o’zaro ta’sirlarga olib kelishi mumkin. Sahifaning bir qismidagi o’zgarishlar boshqa qismlarga kutilmagan ta’sirlarni ko’rsatishi mumkin, bu esa kodni maintain(davom ettirish) qilish va xatolarni tuzatish(debug)ni qiyinlashtiradi.

Zamonaviy freymvorklar bu muammolarni to’g’ridan-to’g’ri DOM bilan ishlashdan voz kechish orqali hal qiladi. O’sha davrda bu o’zgaruvchan va tuzilmaga ega bo’lmagan yondashuv keng tarqalgan edi, va dastur holati har doim o’zgarib turishi sababli, kodning ayni damdagi holatini aniqlash va test qilish qiyin bo’lgan. Ba’zi paytlar bo’lardiki, biz o’zimizga-o’zimiz savol berishimiz kerak edi:“hozir dasturimizning brauzerdagi holati qay ahvolda?” - bu savolga javob berish dasturimizni murakkabligi oshgani sayin qiyinlashib ketardi.

jQuery’ni test qilishning qiyinchiliklari

Bundan tashqari, jQuery bilan tugmani test qilish ham qiyin, chunki bu faqat event handler’dan iborat. Agar test yozadigan bo’lsak, u quyidagicha ko’rinadi:

test("LikeButton", () => {
  const $button = $("#likeButton");
  expect($button.text()).toBe("Like");
  $button.trigger("click");
  expect($button.text()).toBe("Liked");
});

Bu yerda yagona muammo shundaki, $('#likeButton') test muhitida null qiymat qaytaradi, chunki bu haqiqiy brauzer emas. Ushbu kodni test qilish uchun brauzer muhitini sun’iy ravishda yaratish kerak bo’ladi, bu esa juda ko’p mehnat talab qiladi. Bu jQuery bilan bog’liq keng tarqalgan muammo: uni test qilish qiyin, chunki u qo’shadigan xatti-harakatlarni izolyatsiyalab, ajratib olish qiyin. jQuery, shuningdek, brauzer muhiti bilan kuchli bog’liq bo’lib, brauzer foydalanuvchi interfeysiga egalik qilsa-da, jQuery shunchaki mehmon hisoblanadi. Bu “bir tomonlama ma’lumot oqimi”(one-way data flow) paradigmasidan og’ish jQuery va o’sha davr uchun keng tarqalgan muammolardan biri edi.

jQuery’ning ommaviyligini yo’qotish sabablari

Oxir-oqibat, veb-texnologiyalar rivojlanishi bilan jQuery o’z ommaviyligini yo’qota boshladi, chunki kuchliroq va kengaytiriladigan yechimlar zarur bo’lib qoldi. jQuery hali ham ko’plab foydalanish(production) dasturlarida qo’llanilsa-da, zamonaviy veb-dasturlarni yaratishda endi asosiy yechim emas. Quyida jQuery’ning mashhurligi pasayishiga sabab bo’lgan ba’zi omillarni keltiramiz:

Yuklama va tezlik

jQuery’ga bo’lgan muhim tanqidlardan biri uning hajmi edi. jQuery kutubxonasini to’liq integratsiya qilish veb-loyihalarga qo’shimcha yuklama keltiradi, bu esa ayniqsa tez yuklanishni maqsad qilgan saytlar uchun ortiqcha yuklama bo’lishi mumkin. Bugungi mobil internet davrida, ko’plab foydalanuvchilar sekin yoki cheklangan ma’lumot ulanishiga ega bo’lishi mumkin, shuning uchun har bir kilobayt muhimdir. jQuery kutubxonasini to’liq qo’shilishi mobil foydalanuvchilar uchun saytning ishlashiga salbiy ta’sir ko’rsatishi mumkin.

React paydo bo’lishidan oldin, jQuery va Mootools kabi kutubxonalar uchun konfiguratsiya variantlarini taklif qilish keng tarqalgan edi, bu foydalanuvchilarga faqat kerakli funksionalliklarni tanlay olish imkoni berardi. Bu kamroq kodni yuklashga yordam bergan bo’lsa-da, dasturchilar uchun qaror qabul qilishni va umumiy development jarayonini murakkablashtirgan.

Zamonaviy brauzerlarda ortiqchalik

jQuery birinchi paydo bo’lganida, u turli brauzerlar o’rtasidagi noaniqliklarni bartaraf etishda va elementlarni tanlash va o’zgartirishda dasturchilarga yagona yo’lni taqdim etishda katta yordam bergan. Veb rivojlanib borgan sari brauzerlar ham rivojlandi. jQuery bo’lishini zarur qilgan ko’plab imkoniyatlar, masalan, DOM manipulatsiyasi yoki ma’lumot olish uchun tarmoqqa yo’naltirilgan(network-oriented) funksiyalar, hozirda zamonaviy brauzerlarni o’zi tomonidan qo’llab-quvvatlanmoqda. Bugungi veb ishlab chiqishda jQuery’dan foydalanish ortiqcha, keraksiz murakkablik qo’shishi mumkin.

Masalan, document.querySelector jQuery’ning ichki $ selector API’sini o’rniga osonlik bilan ishlatilishi mumkin.

Performance bo’yicha mulohazalar

jQuery ko’plab vazifalarni soddalashtirsa-da, bu ko’pincha performance’ni pasaytirishi hisobiga amalga oshadi. Zamonaviy brauzerlarda JavaScript’ning o’zini “Native runtime-level” metodlari har bir yangilanishi bilan yaxshilanib takomillashadi va shu sababli ba’zi hollarda jQuery’dan ko’ra tezroq ishlashi mumkin. Kichik loyihalarda bu farq sezilmasligi mumkin, lekin yirik va murakkab veb-dasturlarda bu murakkabliklar to’planib, sezilarli darajada performance’ni susayishiga yoki javob berish tezligining pasayishiga olib kelishi mumkin.

Yuqoridagi sabablar tufayli, jQuery veb evolyutsiyasida muhim rol o’ynagan va dasturchilar duch kelishi mumkin bo’lgan ko’plab muammolarni soddalashtirgan bo’lsa-da, zamonaviy veb dunyosida jQueryga endi kamroq ish tushyapti. Dasturchi sifatida biz jQuery’ning ijobiy va salbiy tomonlarini solishtirib ko’rishimiz kerak, ayniqsa, zamonaviy veb loyihalar kontekstida.

jQuery’ning inqilobiy roli

jQuery’ning kamchiliklariga qaramay, u o’sha paytda DOM bilan ishlashda haqiqiy inqilob bo’lgan. Bu shunday darajaga chiqdiki, boshqa kutubxonalar ham jQuery’ni qo’llab, lekin unga ko’proq prognoz qilishlik va qayta foydalanishlik imkoniyatlarini qo’shgan holda paydo bo’la boshladi. Bunday kutubxonalardan biri Backbone edi, bu kutubxona React bugungi kunda hal qilayotgan muammolarni o’z vaqtida hal qilishga harakat qilgan. Keling, bunga yanada batafsil kirishamiz.

React’dan oldingi davr Backbone