Site-uri jQuery

Am descoperit adineauri pe twitter un tip care e maniac jQuery, ca mine așa. Și am găsit la el un site super tare, care este de fapt o galerie uriașă de site-uri care folosesc jQuery. Este nemaipomenit, mai ales că fiecare intrare din galerie are și codul sursă complet pentru intrarea respectivă Site-ul de care vorbesc este acesta. E superb, mai ales dacă ai nevoie de inspirație pentru efecte sau… look-uri! Vizualizare plăcută!

jQuery – Best Practices #6

Folosirea contextului la selectori

În articolul precedent arătasem care sunt cei mai rapizi selectori jQuery, iar acum îți voi mai da un sfat care să facă orice selector mai rapid cu 25% decăt era (dar ordinea performanței va rămâne aceeași, adică primează selectorul de ID, apoi cel de tag + clasă, apoi cel de tag, apoi cel de clasă.

<p>$("div.clasa_mea", "#element_parinte");</p>

Să explic acum de ce codul de mai sus e super super rapid. În primul rând, să explic sintaxa. jQuery acceptă și un al doilea parametru când se folosește un selector, reprezentând contextul în care se face căutarea propriu-zisă. Ce înseamnă asta ? În cazul de mai sus i-am spus lui jQuery să-mi caute elementul DIV cu clasa clasa_mea, dar să caute doar în cadrul elementului cu ID-ul element_parinte, în loc să caute tot DOM-ul cum ar fi făcut dacă nu s-ar fi precizat contextul căutării. De ce e super rapid ? În primul rând, jQuery procesează mai întâi contextul, și apelează funcția JavaScript getDocumentById( ), apoi începe căutarea în cadrul elementului găsit, căutând un element DIV ce are clasa clasa_mea. Deci e foarte rapid!

Evident că tot nu e mai rapid decât selectorul de ID. Acum precis te întrebi: dar dacă folosesc context la selectorul de ID, va fi mai rapid ? În ciuda faptului că ar părea logic, din păcate nu va fi mai rapid. Iată codul, și imediat explic și de ce:

<p>$("#myID", "#element_parinte");</p>

Dacă ai urmărit până acum ce am explicat, apelul de mai sus face două lucruri: caută elementul element_parinte cu viteza maximă a selectorului de ID, dar apoi mai face încă o căutare, cea a elementului myID. Chiar dacă va fi restrânsă căutarea doar în cadrul contextului, faptul că se mai face o căutare extra va adăuga câteva fracțiuni de secundă în plus la căutare, comparativ cu folosirea selectorului ID fără context care face doar o singură căutare.

jQuery – Best Practices #5

Traversarea eficientă a DOM-ului

Dacă folosești des selectorii jQuery, este bine să iei în considerare viteza cu care se execută diferitele tipuri de selectori. În continuare găsești cele 3 tipuri mari de selectori în ordinea performanței, primul fiind cel mai rapid:

 $("#un_id"); // cautare dupa ID $("div"); //cautare dupa tag $(".clasa") //cautare dupa clasa 

Acum, evident, urmează explicațiile. Selectorul de ID folosește funcția JavaScript getElementById( ) care e cea mai rapidă. Punct. Al doilea selector, cel de tag, este următorul cel mai rapid fiindcă folosește funcția JavaScript getElementByTagName( ) care e mai înceată decât prima. Ultimul selector, cel de clasă, este cel mai încet fiindcă nu folosește o funcție anume, ci traversează tot DOM-ul pentru a găsi ce trebuie. Dar, ca un sfat, poți folosi ultimii doi selectori într-unul singur, obținând astfel un selector mai rapid decat cel de tag:

 $("div.clasa"); 

jQuery – Best Practices #4

Manipularea eficientă a DOM-ului

În articolul precendet arătasem cum să mărești viteza codului de până la 5 ori, însă cu modificările făcute tot mai a rămas loc de îmbunătățire, lucru pe care-l voi face acum. Iată bucata de cod performantă (dar nu de-ajuns) din articolul precedent:

var obj = $("#lista_ul");
for (i=0; i<10000; i++)
   obj.append( $("<li>Item " + i + "</li>") );

Ce nu e în regulă cu codul ? Absolut totul e în regulă, dar dacă lucrezi cu gândul la performanță, nu e deloc în regulă. Hai să explic: funcțiile append, prepend, appendTo, prependTo, after, before, wrap, și cam toate care au de-a face cu manipularea DOM-ului au multe de făcut în spatele scenei, așadar codul de mai sus e foarte greu tocmai din 2 motive: apelez funcția append de 10000 de ori, și creez un obiect nou de tip

la fiecare iterație, lucru care înseamnă că la final am creat 10000 de obiecte și am apelat de 10000 de ori funcția append. E crimă curată! Cum se poate remedia ? Iată soluția:

var obj = $("#lista_ul");
var elemente = "";
for (i=0; i<10000; i++)
   s += "<li>Item " + i + "</li>";
obj.append( s );

Și ce dacă a crescut numărul de linii de cod ? De data asta avem o bucată de cod foarte performantă. Iată de ce:

1. folosim o singură dată selectorul de ID pentru a accesa lista;
2. folosim o singură dată funcția append;
3. în loc să creăm 10000 de obiecte, folosim un singur șir de text la care adăugăm mereu text simplu care mai apoi va fi folosit de funcția append ca o bucată mare de cod HTML ce va fi adăugat în listă, obținând astfel foarte repede o listă foarte mare.

Dacă ai vreo idee să îmbunătățim și mai mult performanța acestui cod, aștept cu nerăbdare sugestii! Până la următorul articol îți spun: folosește jQuery cu cap, nu doar cu ochii!

jQuery – Best Practices #3

Evitarea folosirii selectorilor în loop-uri

Bun, iată încă un sfat extrem de util din punctul de vedere al performanței (și, deci, a timpului de încărcare a unei pagini): a se evita selectarea unui obiect într-un loop. Iată un exemplu de cod ce trebuie evitat:

 for (i=0; i<10000; i++) { var obj = $("#lista_ul"); obj.append( $("<li>Item " + i + "</li>") ); } 

Bun, explicația e simplă. La fiecare iterație, jQuery este nevoit să caute toată structura DOM a paginii pentru a găsi mereu același obiect – este pur și simplu groaznic, și probabil execuția acelui cod va dura câteva secunde (depinde și de browser, ce-i drept). Așadar, pentru a evita astfel de întâmplări nefericite, iată cum trebuie remediat codul:

 var obj = $("#lista_ul"); for (i=0; i<10000; i++) obj.append( $("<li>Item " + i + "</li>") ); 

De data asta, codul va fi executat de până la 5 ori mai repede. Cum așa ? Păi selectorul jQuery de ID folosit pentru a accesa elementul listă folosește, de fapt, funcția JavaScript getElementById( ) care va fi executată o singură dată, nu de 10000 de ori ca în primul exemplu! Acum, chiar și a doua bucată de cod are o problemă de performanță, pe care o voi discuta în următorul articol Best Practices pentru a face codul să fie chiar și mai rapid!

jQuery – Best Practices #2

Micșorarea codului JavaScript

O practică bună când folosești mult cod JavaScript / jQuery este să comprimi fișierele sursă fiindcă în acest fel vei obține timpi de încărcare a siteului tău mult mai mari, și când spun mult, e mult! De reținut că o astfel de compresie nu doar elimină spațiile albe și pune tot codul pe o singură linie, dar mai și redenumește variabile și funcții așa încât aceste nume să fie cât mai scurte. Am văzut, de exemplu, variabile care erau redenumite în formatul _1, _2, _3, ș.a.m.d.

Iată câteva aplicații web care realizează compresia unui cod JS/JQ:

• JavaScript Compressor
• JavaScript Minifier
• Online Javascript Compression Tool
• Huffman JavaScript Compression
• CSS & JavaScript Compressor
• JS Packer

jQuery – Best practices #1

Sunt multe tips & tricks pentru jQuery pe Internet, dar sunt pretutindeni, nu le găsești la un loc pe toate. Eh, eu voi începe o serie de articole pentru a aduna la un loc majoritatea acestor tips & tricks, cu explicații, exemple, tot tacâmul. Așadar, să începem cu primul articol “best practice“.

Încărcarea script-ului jQuery din Google Code

Sunt cazuri când nu ai la dispoziție scriptul jQuery, sau nu vrei să-l descarci ci să folosești scriptul de la o locație externă. În acest caz Google ne vine în ajutor. În continuare voi prezenta două modalități de a încărca scriptul jQuery din Google Code.

1. Încărcarea codului cu ajutorul Google Code

    <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("jquery", "1.3.2"); google.setOnLoadCallback( function() { // codul jQuery; funcția document.ready poate fi aici }); </script> 

2. Încărcarea scriptului direct din Google Code

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"> // codul jQuery; funcția document.ready poate fi aici </script> 

Impresii despre jQuery

“At first I was afraid, I was petrified…” – cam așa s-ar descrie starea mea înainte de a începe să învăț jQuery. Când aud deobicei termenul framework, mă gândesc că e ceva mare, mult de învățat înainte să poți începe să-l folosești. Așa am reacționat și cu jQuery. Iar acum după ce l-am învățat, îmi spun: da’ ce prost am fost că nu l-am învățat mai demult!. Mi se pare incredibil, fenomenal, e tot ce-ți poți dori ca web designer. Ce m-a uimit este faptul că poți face cu el lucruri asemănătoare cu ce poți face în Flash!

Așadar, jQuery este cred că cel mai puternic framework posibil relativ la performanță, ușurința utilizării (chiar și a învățării), dar cel mai puternic atu pe care-l are este extensibilitatea! Este fenomenal din punctul ăsta de vedere.. poți face ce vrei cu el, din el.. simți că poți reface universul doar cu jQuery! Iar multitudinea de plugin-uri existente pentru el este de-a dreptul copleșitoare, ca să nu mai spun cât de trivial e să creezi un plugin. Ah, da, am uitat să precizez că dacă lucrurile de bază le făceai în JavaScript scriind zeci de linii, chiar sute, doar pentru o singură funcție, cu jQuery scrii cel mult 10-20 Și să nu uit că simplifică atât de mult lucrul cu Ajax!

Dacă te uiți prin API-ul său, nu vei găsi mii de funcții așa cum te-ai aștepta probabil de la un framework. Cred că nici sute de funcții nu vei găsi! Dar puterea acelor funcții la care mai adaugi și puterea cu care pot fi extinse, pur și simplu îți dă impresia că ar fi un framework gigant! Anyways.. am terminat de învățat cam tot ce ține de jQuery, și acum să te uimesc cu durata necesară învățării lui (de fapt, cât mi-a luat mie să-l învăț):

• bazele jQuery – 1 zi
• creare plugin-uri – o jumătate de zi, cel mult!
• elemente avansate de extindere a frameworkului – 2 zile (opțional pt cei care n-au ce face sau se gândesc să extindă la greu jQuery)

Observație: se presupune că ai deja ceva cunoștințe de JavaScript, fiindcă altfel nu vei pricepe nimic din jQuery!

Încă odată, facilitățile și avantajele oferite de jQuery, sau mai bine spus motivele să înveți jQuery:

1. scrii extrem de puțin cod să obții funcționalitatea pe care o implementai în sute de linii de cod JavaScript;
2. extraordinar de extensibil, și atât de ușor de extins;
3. îți oferă un mod de lucru Obiect-Orientat, făcându-ți codul să arate mult mai clar;
4. un framework foarte mic ca mărime în ciuda puterii sale;
5. face ca lucrul cu Ajax să pară joacă de copii;
6. există tone de plugin-uri pentru el;
7. poți crea efecte asemănătoare (dacă nu chiar identice) cu cele obținute în Flash!
8. are componente superbe și skinuri pentru ele;
9. durează foarte puțin să-l înveți dacă ai deja cunoștințe de JavaScript;
10. este cross-browser, așadar va funcționa la fel pe majoritatea browserelor fără ca tu să faci vreun efort!
11. îți deschide noi orizonturi și o nouă gândire în programare, la propriu!

La ce sa te astepti..

..și la ce să nu te aștepți! Voi încerca să fiu scurt: am pornit blogul acesta pentru că e timpul să am și eu un blog personal, să-mi spun oful când simt nevoia, să scriu ce-am mai descoperit când sunt super entuziasmat de descoperire, să mai public câte o bucată de cod inventat de mine, sau să mai explic diverse lucruri.. dar nu te aștepta la un blog de tutoriale sau de coduri sursă!

Și poate, cine știe, în viitorul nu prea depărtat voi face ceva mai mult și mai mare din acest blog, un loc cu mai mulți autori, fiecare scrie despre maniile lui, ce-l pasionează, dă sfaturi, ș.a.m.d. Who knows ?