# de ce discutăm chiar viitorul jQuery?

Nu ratați videoclipul de deasupra articolului!

deoarece jQuery rulează în continuare majoritatea logicii web frontend! Acesta alimentează aproximativ 70% din paginile web de top și 20% din întregul web (sursă). Asta e imens!

dar aceasta face ca întrebarea cu privire la viitorul său să fie și mai ciudată.

jQuery are probleme. Este peste tot și nu este cu adevărat rezistent la viitor. A fost un instrument uimitor când a fost lansat în 2006, dar problemele de bază pe care le-a rezolvat în acel moment nu mai sunt probleme. În schimb, acum Puteți rula în mod mai multe probleme atunci când se utilizează jQuery.

pentru a înțelege acest lucru, să ia în considerare problemele jQuery fix înapoi în 2006.

JavaScript a fost un fel de rupt și browsere implementat foarte diferit

acesta a fost unul dintre lucrurile majore jQuery ajutat cu. Dintr-o dată, ai avut un API ușor de utilizat, care a permis să manipuleze DOM. Și chiar mai bine decât atât: același API a funcționat în toate browserele majore!

$('h1').text('Awesome!')

JavaScript și web – ul ca întreg au fost mult mai puțin mature

jQuery permis dezvoltatorilor să pur și simplu „face mai mult” pe web-pe frontend pentru a fi precis. Crearea de interfețe de utilizator captivante (pentru care aveți nevoie de JavaScript) a fost mai ușoară, deoarece ați putea utiliza un API bine documentat. Animarea elementelor, adăugarea și eliminarea conținutului, schimbarea stilurilor și reordonarea articolelor a fost semnificativ mai ușor de realizat decât cu JavaScript vanilla. jQuery a adăugat, de asemenea, un API Ajax puternic și totuși accesibil, care a făcut trimiterea cererilor de fundal ușor, de asemenea. Acesta este un bloc de bază al UI-urilor bazate pe JavaScript, deoarece nu trebuie să încărcați o pagină nouă la fiecare acțiune a utilizatorului și puteți încărca sau manipula datele din partea serverului în culise.

    aflați Vue.js

    Vue.js face construirea pagini web reactive simplu. O sintaxă frumoasă + caracteristici puternice-acesta nu este cel mai rău pachet pe care l-ați putea obține.

    aflați React

    React este o alternativă excelentă la Vue.js. Este extrem de popular și nu trebuie să-l pierdeți absolut!

    aflați Angular

    Angular a început totul! Aflați cadrul care este mama lui React.js și Vue!

# ce s-a schimbat?

problemele fixate de jQuery nu mai sunt probleme.

JavaScript a ajuns la scadență, compatibilitate browser-ul luat mult mai bine. Avem un ecosistem vibrant de dezvoltare frontend cu mii de pachete și instrumente, putem folosi biblioteci Ajax mult mai puternice, cum ar fi Axios, dacă vrem.

asta nu înseamnă că totul e grozav, dar problemele de bază care au fost rezolvate de jQuery nu mai există cu adevărat.

în schimb, jQuery acum este un instrument care este de multe ori (nu întotdeauna, desigur) folosit de dezvoltatori web mai puțin experimentați, care nu a făcut trecerea la vanilie JavaScript sau cadre, cum ar fi Angular sau React.

și asta este important să înțelegem apropo: nu vorbim doar despre jQuery vs Angular. Vanilie JavaScript este o alternativă reală!în timp ce DOM traversal și manipulare a fost mult mai dificil în 2006, avem multe funcționalități, cum ar fi querySelector construit în vanilie JavaScript acum. Aceste lucruri funcționează și chiar funcționează în browsere.

Dacă aveți posibilitatea de a utiliza JavaScript vanilla în loc să obțineți practic același lucru cu jQuery, este evident mai bine să utilizați opțiunea vanilla. Salvați descărcarea pachetului suplimentar și nu trebuie să învățați o sintaxă suplimentară.

# nu este doar vanilie JavaScript…

nu este doar vanilie JavaScript, deși. Pur și simplu avem alternative mai bune în aceste zile.

Vanilla JavaScript are în mod clar limitele sale. Dacă construiți o interfață complexă cu o mulțime de logici implementate prin JavaScript, ajungeți rapid în situații în care, în esență, trebuie să scrieți un fel de cod spaghetti. Gestionarea statului DOM este dificilă până la urmă.

și nu doar atât. Vă confruntați în mod regulat cu situații în care logica TRAVERSALĂ DOM se rupe dacă decideți vreodată să vă reordonați codul HTML (sau să introduceți elemente noi).

<div> <h1>What's new?</h1> <div> <p>An interesting discussion over the future of jQuery evolved over the last days.</p> </div></div>
$('#news') .find('div') .find('p') .text('This replaces the paragraph text - hopefully')

acest cod va înceta să funcționeze dacă modificați codul HTML astfel.

<div> <h1>What's new?</h1> <p>An interesting discussion over the future of jQuery evolved over the last days.</p></div>

și același lucru ar fi valabil și pentru tehnicile de traversare JavaScript Vanilla.

evident, puteți scrie cod care ar funcționa în continuare în scenariul de mai sus. Dar s-ar putea rupe apoi în circumstanțe diferite. Sau veți ajunge cu un lanț destul de lung de metode de traversare pentru a selecta în siguranță orice intenționați să manipulați. Și acest lucru devine mai dificil doar dacă creați manual sau eliminați elemente DOM prin jQuery.

Dacă ați avut vreodată un caz de utilizare în cazul în care aveți nevoie pentru a adăuga și elimina elemente dinamic-să spunem pe baza unor date care dețin matrice JavaScript – știi durerea care este asociat cu faptul că, atunci când se utilizează jQuery sau vanilie JavaScript. Lăsați în pace dacă doriți să lucrați cu aceste elemente (de exemplu, atașați ascultătorii de clicuri sau stiluri).

# cadre pentru salvare!

există o soluție pentru asta!

cadre JavaScript cum ar fi Angular, React (oh, asta e o bibliotecă de fapt – iartă-mă React oameni buni) sau Vue, de exemplu.

toate aceste cadre au o diferență fundamentală în comparație cu jQuery (și vanilie JavaScript): nu scrie cod pentru a naviga manual DOM.

folosiți în schimb o abordare declarativă.

ce înseamnă asta?

Ei bine, iată cum puteți selecta și manipula în siguranță conținutul HTML de la începutul acestui articol – de data aceasta folosind Vue:

<div> <h1>What's new?</h1> <div> <p>{{ myText }}</p> </div></div>
new Vue({ el: '#news', data: { myText: 'This never fails to hit its target', },})

după cum puteți vedea, Vue urmează în mod clar o filozofie diferită de jQuery. Același lucru ar fi valabil și pentru React și Angular apropo.

pentru restul acestui articol, voi folosi Vue pentru exemple – pur și simplu pentru că are o sintaxă foarte frumoasă și este ușor de început. Importați Vue în pagina dvs. web și sunteți bine să mergeți.

dar Angular și React urmează, de asemenea, abordări comparabile. Dacă doriți să aflați mai multe despre acestea, am resurse utile pentru dvs.:

  • Angular – Ghidul complet
  • React – Ghidul complet
  • Angular vs React vs Vue

și, desigur, în cazul în care doriți să vă scufundați mai adânc în Vue, am resurse și pentru asta: Vue – Ghidul complet.

toate se concentrează pe a vă permite să marcați pur și simplu locurile din DOM unde ar trebui afișat conținutul. Nu trebuie să descrieți calea către acel loc-cadrul vă va da seama!

# dar soluția Vue este mai lungă!

dacă comparați soluția jQuery cu soluția Vue, vedeți clar că abordarea Vue este puțin mai lungă (în ceea ce privește liniile de cod scrise).

dar acesta a fost un exemplu foarte simplu! Exemple mai complexe cresc rapid în dimensiune și, chiar mai rău, complexitate atunci când vine vorba de codul jQuery necesar. Dar nu pentru Vue (sau celelalte cadre).

asta pentru că abordarea generală este atât de diferită. Dacă descrieți doar structura datelor, logica și modul în care vă conectați datele la DOM (șablonul dvs. ca să spunem așa), nu trebuie să scrieți atât de mult cod suplimentar atunci când codul HTML sau logica de afaceri devin mai complexe.

pentru jQuery, asta e un lucru diferit, deși. Dacă aveți nevoie pentru a ajunge la elemente care sunt profund imbricate sau dacă aveți nevoie pentru a face lucruri complexe, cum ar fi looping prin elemente care urmează să fie create, va termina rapid cu mai complexe (și, de asemenea, predispuse la erori) codul ați văzut mai devreme.

Acest lucru va produce:

<div> <div>Apples</div> <div>Bananas</div> <div>Milk</div></div>

elementele imbricate<div> pot fi făcute clic șihighlighted clasa CSS va fi adăugată la orice element la clic.

luați în considerare fragmentul Vue (și HTML) care ar realiza același lucru:

new Vue({ el: '#output', data: { shoppingList: , },})

este încă o linie de coduri de care aveți nevoie aici, dar este mult mai ușor de înțeles, întreținut și editat! Declarați cum ar trebui să arate codul HTML în cele din urmă, descrieți datele și gestionați starea selected în codul JS.

magia se întâmplă cu ajutorul așa-numitelor directive – v-for (pentru looping),v-on (pentru ascultarea evenimentului) șiv-bind (pentru schimbarea elementului HTML) fac toată munca aici. React și Angular au obținut în general soluții comparabile, deși React nu folosește directive. Încă nu vă va forța să scrieți manual tot codul pentru selectarea și crearea elementelor.

pe măsură ce aplicația dvs. web (frontend) crește și construiți UI-uri și mai complexe, vă va plăcea o astfel de abordare declarativă care nu vă forțează în lanțuri interminabile, care nu pot fi întreținute decss()$(...) șiappendTo() apeluri.

# jQuery este cel puțin mai mic?

Vue oferă o sintaxă distinct diferită – face o mulțime de ridicare grele în ceea ce privește accesul DOM și manipulare pentru tine.

asta trebuie să vină cu un preț, nu-i așa? jQuery cu siguranță este mai mic, nu?

Ei bine … nu. Nu e cazul.în martie 2018, jQuery cântărește 29kb minified și gzipped, în timp ce Vue vine la 30KB minified și gzipped.Ce zici de React și Angular?

React constă de fapt din două pachete: ReactDOM și React în sine. Combinat, trebuie să descărcați aproximativ 34kb minified + gzipped pentru a-l pune în funcțiune.

Angular este mult mai mare decât cea, deoarece Angular este un cadru mod mai mare, care este potrivit în special pentru aplicații de întreprinderi mari. Pentru astfel de tipuri de aplicații, va câștiga împotriva jQuery nu din cauza dimensiunii pachetului, ci din cauza durerii pe care o salvează.

# deci … nu mai folosiți niciodată jQuery?

întrebarea acum, desigur, este dacă ar trebui să utilizați întotdeauna Vue, Angular sau React then. Sau există cazuri de utilizare în care utilizarea jQuery are încă sens?

în general, cred că timpul lui jQuery se apropie de sfârșit. Cel puțin în forma sa actuală.

ai putea alege în continuare pentru cazuri triviale, dar de ce nu ai folosi doar vanilie JavaScript pentru că și de a salva 30kbs suplimentare + sintaxa suplimentar trebuie să intre în? Vei fi un dezvoltator web mai bun dacă știi vanilla JS oricum.jQuery, evident, vede încă o mulțime de utilizare în multe aplicații web vechi și va rămâne acolo de ceva timp.

dacă aveți nevoie pentru a lucra la astfel de aplicații web, probabil că nu va găsi o cale în jurul jQuery Pentru acum și de învățare, prin urmare, ar putea fi încă ceva în valoare de timpul tau.

o mulțime de pachete populare terțe părți, de asemenea, încă se bazează pe jQuery-Bootstrap, cadrul CSS, face acest lucru, de exemplu (din păcate, chiar face acest lucru în cea mai recentă versiune – 4.x). A trebui să adăugați dependența suplimentară din cauza unui astfel de pachet este enervant, de aceea personal încerc întotdeauna să aflu ce face exact jQuery pentru acel pachet dat. Odată ce ați obținut acea informație, puteți reconstrui funcționalitatea cu vanilla JS sau cu un alt cadru și puteți scăpa cu succes de jQuery după aceea.

Lasă un răspuns

Adresa ta de email nu va fi publicată.