Prezentare SlideShare

Prezentare SlideShare care contine un rezumat al postarilor de pe blog.

Introducere Web Storage Performance

Din ce in ce mai multi utilizatori cumpara din magazine virtuale in zilele de azi. Cercetarile arata ca au fost cresteri proportionale in cumpararea de produse online. De la 40% in anul 2004  la 84% in anul 2008 in Europa.

Un aspect important ce tine de aplicatile web este spatiul cel il ocupa acestea si cum este gestionat acesta la nivel de client. Se pot aplica multe tehnici de imbunatatire a aplicatiilor; o parte dintre ele vor fi prezentate in acest blog. Felul in care stocam informatiile, sau cum sunt acestea comprimate pot avea un mare efect asupra performantei la nivel de client.

Introducere HTML 5 cat si CSS3 aduce numeroase beneficii prin diferitele API-uri, ce ne permit sa stocam la nivel de client diferite informatii, cat si sa folosim efecte cat mai diversificate care inainte depindeau de librarii externe cum ar Flash, Silverlight sau altele.

In mod general, cand cineva doreste sa cumpere online, acesta nu doreste sa astepte foarte mult pana cand se incarca pagina ,sau pana se proceseaza comanda.

Concurenta pe piata in acest domeniu este mare. Din aceasta cauza, cei care ofera servicii online trebuie sa aiba cele mai bune performante posibile. Daca un site are doar cativa utilizatori concomitenti, nu este greu ca acesta sa fie destul de rapid. Dar cu cresterea vanzarilor pe internet ,cresc si complexitatile integrarii si dorinta ca utilizatorul sa aiba o experienta cat mai favorabila online. Toate acestea duc la cateva provocari pentru dezvoltatori de software online. Daca nu sunt tratate cum trebuie, problemele pot conduce la cedarea sistemelor din cauza supraincarcarii sau timpului de raspuns nefavorabil. Acuma intrebarea este: “Cum prevenim aceste probleme de performanta si de disponibilitate, in asa fel incat situl nostru sa prezinte cea mai buna solutie?”

Firebug si YSlow, indispensabile pentru orice dezvoltator

Firebug este un plug-in pentru Firefox care pune la dispozitie o multitudine de unelte pentru a analiza performanta situ-lui vostru. Puteti edita, debug, si monotoriza CSS, HTML, si JavaScript in timp ce vizitati pagina.Va permite sa vedeti cat spatiu ocupa fiecare fisier in parte cat si multe alte optiuni.

De la versiunea 1.0.5 si pana in prezent, se poate vizualiza cat dureaza pana sunt incarcate fisierele HTML, CSS,imaginile, sau alte resurse.

Firebug deasemenea tine cont si de continutul dinamic din cadrul unei pagini cum ar fi DOM sau alte tehnici disponibile. Daca vizualizam sursa paginii prin Firebug, Firebug reflecta schimbarile facute la DOM. Acestea reprezinta unul dintre atuurile lui Firebug deoarece fara el, cererile si raspunsurile AJAX sunt invisibile. Putem vizualiza cat timp dureaza fiecare cerere/raspuns in tabul NET.

Putem vizualiza raspunsurile XNR prin click pe tabul Net si apoi din submeniu dam pe tabul XNR. Tabul XNR este special conceput sa analizeze AJAX

Yahoo! Slow are rolul de a analiza pagini web si a sugera cateva inbunatatiri bazate pe un set de reguli bine definit. Yahoo Slow este un add-on pentru Firefox integrat cu mediul de dezvoltare Firebug. YSlow poate da o nota unuei pagini web bazate pe un set predefinit de reguli sau un set definit de dezvoltator/utilizator. Acesta ofera sugestii pentru imbunatatirea paginii web, unelte pentru analiza performantei cum ar fi Smuch.it sau JSLint, ofera o lista cu componentele paginii, ne arata statistici legate de pagina.

Grid Computing and Cloud Computing

Am considerat ca ar fi interesant un articol despre Grid si Cloud Computing, care desi sunt doua aspecte diferite, pot oferi multe beneficii utilizatorilor. Acest mic articol nu discuta despre cum poate fi imbunatatita performanta pe web, ci despre cum putem folosi noi web-ul pentru a ne spori performanta atunci cand avem resurse ce dorim sa le stocam intr-un mod diferit.

Grid Computing este un termen care se refera la combinarea de resurse de la mai multe surse pentru a a-si atinge un anumit scop. Reteau poate fi gandita ca un sistem distribuit cu resurse care nu interactioneaza unul cu altul si care este constituit dintr-un numar foarte mare de fisiere. Calculul distribuit este un tip special de calcul paralel care se bazeaza pe calculatoare intregi conectate printr-o retea (fie privata sau publica gen Internet) prin Ethernet de exemplu. Aceasta idee este in contrast cu ideea de un supercomputer care are mai multe procesoare conectate printr-un bus de mare viteza local.

Principalul dezavantaj din punct de vedere al performantei este variatia existenta in diferitele procesoare de pe piata, si mai este dat si de viteza internetului in functie de zona nefiind una favorabila.

Grid computing ofera o modalitate de a rezolva probleme existente, cum ar fi plierea proteinelor (folding@home) , simulare, analiza de date din astronomie(seti@home) si multe altele. Grid computing merge pe premiza ca orice ciclu de procesor care nu este utilizat, poate fi folosit in acest calcul.

Pentru ca un task sa fie potrivit pentru Grid Computing, codul din spate trebuie sa ruleze in paralel ,iar diferitele sarcini sa fie mutual exclusive.

Cloud Computing

Este o extensie a conceptului de programare orientat obiect si anume abstractizarea. Abstractizarea indeparteaza detaliile complexe legate de cum functioneaza lucrurile si ceea ce este perceput de utilizator. Tot ce vede utilizatorul este o interfata care primeste Inputuri si furnizeaza Outputuri. Cum este calculat si procesat outputul este complet ascuns. Intr-un mediu bazat pe Cloud Computing datele exista pe mai multe servere, detaliile legate de conexiunile in retea sunt ascunse deoarece utilizatorul nu este interesat de acest aspect. Cloud Computing deriva foarte mult de la paradigma Unix de a avea mai multe elemente, fiecare avand un scop cat mai specific, in loc sa avem un element masiv dar sa nu fie la fel de bun la acel scop.

Exemple ar fi: Amazon EC2, Google App Engine, Google Apps, Apple MobileMe dar si un exemplu pentru pasionati de jocuri <a href=”http://www.onlive.com/#1”>Onlive</a> bazat pe feeduri video a jocurilor.

Cloud Computing Vs Grid Computing

Diferenta dintre acestea este cateodata greu de inteles deoarece nu sunt intodeauna mutual exclusive. Amandoua sunt folosite pentru a maximiza resursele ce le avem la dispozitie. Deasemenea ambele folosesc abstractizarea la un nivel extensiv, si ambele au elemente care interactioneaza unul cu altul.

Diferenta provine de la felul in care sunt procesate diferitele taskuri in respectivele medii: in Grid computing un task major este dat si divizat in bucati mai mici si executat pe mai multe calculatoare.

Cloud computing are rolul de a furniza utilizatorului diferite servicii fara ca acesta sa investeasca in arhitectura din spate. Cloud computing poate oferi o multitudine de aceste servicii de la web hosting pana la redactare de documente online sau chiar jocuri si apoi sa ii prezinte utilizatorului un rezultat omogen.

In concluzie desi nu sunt mutual exclusive acest concepte, ele sunt distincte cel putin la nivel conceptual.

Mobile Storage Web Performance

Cresterea de utilizatori de internet mobil a dus la o crestere in cerintele serviciilor oferite sa fie cat mai fiabile posibil. O mare problema o consta timpul de acces de pe telefonul mobil, datorita infracstructuri wireless curente. Accesul Web de pe mobil sufera inca de cateva probleme: interoperabilitate si uzabilitate.


Interoperabilitatea: Problemele provin de la fragmentarea diferitelor platforme existente pe dispozitivele mobile, sisteme de operare multiple cat si browsere cu diferite performante.
Uzabilitate: Majoritatea problemelor provin de la dimensiunea fizica a dispozitivelor,care au rezolutie limitata, user input etc.


Cateva aspecte generale care trebuie luate in considerare cand dorim sa realizam un site web destinat pentru mobile:
1.Putem converti un site web care nu e dedicat mobilelor dar care contine informatiile cerute.
2.Cream un nou site de la 0 pentru mobile web concentrandu-ne mai mult pe dimensiune.


Odata creat noul site trebuie sa vedem cum functioneaza pe diferitele browsere, platforme disponibile pe piata. Trebuie deasemenea sa tinem cont de o clasa speciala de telefoane: smartphones dar si cele fara aceste functii.


Un articol care ne arata cum se comporta diferitele situri destinate pentru mobile poate fi gasit aici.

Optimizare CSS/CSS3

CSS joaca un rol foarte important in dezvoltarea de aplicatii web. Cateva optimizari legate de organizarea codului se pot face astfel:

1.    - CSS ar trebuii sa fie extern fisierului pentru a beneficia de “caching”

2.    - Referintele CSS ar trebui sa fie pus in varful paginii deoarece engine-ul de randare HTML care deasemenea interpreteaza CSS este primul chemat

3.    - Incercati in a evita referintele CSS  duplicate

4.    - Dimensiune Fisierelor CSS

O alta practica buna este aceea in minimizare de cod prin folosirea avantajului de a grupa elementele logic. Cateva exemple ar fi:

1.    - background (controleaza elementele din background, pozitionarea lor, cat de mult se repeta)

2.    - font (font-size, font-weight, line-height, etc)

3.    - margin( defineste latimea marginii unui compartiment)

4.    - border (defineste proprietile pentru frontiera compartimentului)

5.    - padding (defineste latimea umpluturii in laturile compartimentului)

O problema generata de CSS care duce la performante scazute in JavaScript sunt legate de redesenari in browser. Numeroase inbunatatiri de performanta pot fi obtinute prin aplicarea de animatii la elemente care au pozitie fixa sau absoluta si evitarea de expresii JavaScript in CSS.

CSS3

CSS 3 aduce multe lucruri si efecte noi ce inainte puteau fi facute doar folosind Flash, Javascript sau alte librarii. Deasemenea avem optiune pentru gradient implementat in cod cat si diferite efecte ce pot fi aplicate direct pe unele imagini cum ar fi shadow sau optiuni pentru hover,border,combinarea de imagini si multe altele fara a fi nevoie ca acestea sa fie complexe de la bun inceput si de o capacitate ridicata. Acest lucru acorda si o mare flexibilitate in design nemaifiind nevoie sa inlocuim imaginea toata ci doar sa scriem codul pentru efectul dorit. Toate acestea duc la o reducere a resurselor ce trebuie stocate la nivel de client.

Optimizare Javascript

Vom discuta cateva optimizari care pot fi aplicate la scripturile JavaScript. 
Cateva reguli de baza atunci cand scriem cod JavaScript in aplicatia noastra ar fi:

1.Punerea de JavaScript la sfarsitul paginii, deoarece Engine-ul HTML de rendare va rula inaintea la masina virtuala Javascript

2.Codul JavaScript trebuie sa fie extern deoarece este descarcat pentru prima data si apoi este stocat de browser pentru o utilizare ulterioara.

3.Gruparea logica a scripturilor in asa fel incat vor fi incarcate in paginile care au nevoie de ele. Evitarea de a incarca fisiere JavaScript acolo unde doar cateva fisiere sunt necesare.

4.Codul sa fie cat mai compact ca sa duca la o scadere in dimensiunea fisierului descarcat. Se pot folosi programe de compactare ca codului

Ca majoritatea limbajelor de programare JavaScript este predispus la scapari de memorie. Evitarea acestor probleme va duce in majoritatea cazurilor la o crestere exponentiala. Scaparile de memorie sunt adesea asociate cu noduri ascunse in structura paginii si cu obiecte prinse intr-o bucla infinita.

Desi imbunatiri legate de cod pot optimiza performanta unei aplicatii web, logica poate deasemenea sa ne ajute sa le prevenim. Exista cateva tweakuri in a lucra cu DOM-ul care pot duce la prevenire de performante nedorite:

-evitarea DOM daca se poate sau folosirea lui cat mai rar posibil

-in loc de a atasa handleri de evenimente pentru fiecare lista, atasam handlerul la parinte pentru a nu trece prin toate elementele listei

Nu trebuie sa supraincarcam pagina cu prea mult JavaScript deoarece poate duce la o scadere in performanta. Performanta JavaScript depinde foarte mult si de engine-ul care il interpreteaza si care este specific fiecarui browser in parte.