Avantajele si dezavantajele unei aplicatii bazate pe AJAX

Motivatie

Aparitia aplicatiilor bazate pe AJAX, a insemnat un pas important in dezvoltarea si imbunatatirea modului in care utilizatorii interactioneaza pe aplicatiile web. Termenul de AJAX (Asynchronous JavaScript + XML ) are la baza o suita de tehnologii care ajuta la la cresterea interactivitatii, vitezei si usurintei in utilizarea aplicatiilor web. Aceasta tehnologie s-a nascut din nevoia de imbunatati viteza de navigare a siturilor, prin micsorarea timpilor de raspuns la actiunile utilizatorilor. Pentru fiecare actiune a utilizatorului, siturile obisnuiau sa reincarce complet pagina pentru a o actualiza cu noi date, chiar si in cazurile in care schimbarile erau minore. Astfel, inainte de AJAX, fiecare click de mouse cauza un timp mort pentru utilizator, pana cand noua pagina se incarca.

AJAX presupune un schimb de date intre browser si server, astfel incat sa nu mai fie necesara reincarcarea intregii pagini web de fiecare data cand userul face o schimbare in aceasta. AJAX reprezinta o colectie de tehnologii, fiecare utilizata si in mod de sine-statator, dar care combinate permit obtinerea unei unelte foarte puternice:

• Prezentarea in mod standard a paginilor, prin HTML sau mai noul XHTML, si CSS (Cascading Style-Sheets) pentru aranajrea in pagina a continutului;

• Afisare dinamica si interactiune folosind DOM (Document Object Model), accesat printr-un limbaj de scripting, pentru a modifica in mod dinamic si a asigura interactiunea cu informatia prezentata;

• Schimb bidirectional de date si manipulare prin XML intre client si server, desi orice format poate fi folosit, inclusiv HTML, XSLT sau text simplu;

• Schimbul de date asincron se realizeaza prin obiectul XMLHttpRequest, desi in unele implementari AJAX se poate folosi un IFrame pentru schimbul de date, sau chiar tag-uri <script> adaugate dinamic.

• JavaScript folosit pentru a lega toate aceste elemente intr-un pachet puternic.

Eliminarea reincarcarilor inutile de pagini a fost acel mic pas care a declansat o avalansa de eforturi in directia imbunatatirii interfetei siturilor web. Facilitati precum drag-n-drop, validare automata a datelor, unelte web de colaborare interactiva, si multe altele sunt noi in lumea aplicatiilor web, acestea fiind asociate in mod traditional cu aplicatiile care ruleaza local.

Aplicatiile AJAX sunt in principal executate in computerul utilizatorului, prin manipularea paginii curente de catre browser folosind metode de document object model (DOM). AJAX poate fi utilizat pentru o serie de functii precum actualizarea inregistrarilor, expandarea formularelor, returnarea unor cautari simple, editarea de elemente, toate fara nevoia de a reincarca intreaga pagina web in momentul cand aceasta este modificata. Se trimit doar cereri scurte catre server si se primesc raspunsuri de dimensiuni mici. Acest lucru creste interactivitatea si apropie paginile web de posibilitatile aplicatiilor desktop.

Acestea ar fi avantajele utilizarii aplicatiilor AJAX totusi, lasand la o parte avantajele se pot observa si oarece dezavantaje la nivel de in interactiune cat si la nivel de implementare. Paginile web ce utilizeaza AJAX pot sa impiedice functionarea comportamentului normal, obisnuit si asteptat al butoanelor de Back dintr-un browser. Utilizatorii se asteapta ca apasand aceste butoane sa fie dusi la aspectul anterior al paginii, dar acest lucru nu este mereu adevarat cand se utilizeaza AJAX, deoarece browserul nu poate tine mereu socoteala modificarilor produse in mod dinamic si asincron. O alta problema a paginilor dinamice este dificultatea de a creea unu link sau un bookmark catre o stare particulara a aplicatiei.

De asemeni o alta problema care impiedica rularea aplicatiilor web este reprezentata de

absenta optiunii de a rula JavaScript in interiorul unui browser. Acest lucru este observat la browserele mobile sau la versiunile mult mai vechi ale browserului. De asemeni persoanele cu disabilitati sau alte impedimente care se bazeaza pe tehnologia de “Text to Speech”, vor avea dificultati in a folosi o astfel de aplicatie.

Google Reader

Avantajele si dezavantajele prezentate mai sus se pastreaza pentru toate aplicatiile bazate pe AJAX. Totusi pentru a analiza si a observa modalitatea in care o astfel aplicatie respecta sau nu anumite sabloane de proiectare, precum si modul in care influenteaza interactiunea cu utilizatorul, vom face un stiu de caz pe o aplicatie AJAX cunoscuta: Google Reader.

Google Reader este o aplicatie pentru citirea feed-urilor RSS, ce doreste sa furnizeze intr-un mod cat mai simplu, actualizarile feed-urilor la cei care sunt abonati la acestea.

Ne vom axa pe sabloanele de proiectare folosite precum si pe uzabilitatea aplicatiei si eventualele probleme care pot aparea la folosirea ei.

Figura 1. Meniul Principal in Google Reader

Modul de organizare al aplicatiei Google Reader este prezentat in Figura 1. Dupa cum putem observa este organizat dupa sablonul “left column navigation”. Acest lucru permite utilizatorului un mai bun control al feed-urilor la care este inscris, avand un raspuns imediat la meniurile pe care le acceseaza in fereastra in care este plasat continutul.

Dupa cum putem obsera in Figura 2 zona de lucru a aplicatiei poate fi impartita in patru zone mari. Prima zona pune la dispozitia utilizatorului alte aplicatii, din cadrul suitei de aplicatii furnizate de Google, pe care le poate accesa, precum si acces rapid la setari. Acest asezare este importanta permitand schimbarea de aplicatii mai usor, astfel imbunatatind modul de lucru al utilizatorului.

Urmatoarea zona este data de optiunea de cautare din cadrul aplicatiei. Dupa cum putem

observa avem optiunea de a cauta toate feed-urile, grupurile de feed-uri sau fiecare feed in parte. Acest optiune de cautare precum si pozitionarea acesteia imbunatateste experienta utilizatorului cu aplicatia, acesta avand acces imediat la orice informatie prin intermediul optiunii de cautare. Rezultatele cautarii sunt furnizate in zona 4, zona actualizarilor, putand fi vizionate in acelasi mod ca si celelalte actualizari.

Figura 2. Modul de Organizare a informatiei in Google Reader

Urmatoarea zona este data de meniul de control al aplicatiei. Ca si cazul zonelor precedente putem observa ca fiecare element component este asezat dupa importanta lui de sus in jos, deci o organizare “Top-Down”. Astefel primul element component al aceste zone este butonul de adaugare de feed-uri noi, acesta avand functionaliatea si de cautare a noi feed-uri, dupa cum putem observa in Figura 3.

Figura 3. Adaugare Feed-uri in Google Reader

Organzarea feed-urilor la care este abonat un utilizator se poate face in fisiere sau, furnizand o organizare ierarhica, dar acest lucru este lasat la dorinta utilizatorului, ele fiind organizate ca si o lista de feed-uri. Acesta lista se poate ascunde sau filtra dupa anumite optiuni dupa cum putem observa in Figura 4. Fiind o aplicatie AJAX, aceasta ne permite optiunea de “drag and drop” la modul de organizare a feed-urilor, lasand o flexibilitate mai mare utilizatorului la modul de aranjare.

Figura 4. Optiuni Feed-uri in Google Reader

Meniul de control poate fi ascuns pentru a maximiza zona patru. Aceasta zona reda actualizarile la feed-uri. Dupa cum putem observa in Figura 5 si Figura 6, Google Reader permite doua moduri de vizualizare a actualizarilor. Primul mod este ilustrat in Figura 5, fiind denumit si “List View” dupa modul de redare a continutului sub forma de lista. In acest mod de vizionare a actualiarilor putem observa modul de diferentiere dintre actualizarile care au fost vizionate acestea fiind marcate prin un fundal albastru si actualizarile care nu au fost vizionate fiind diferentiate prin un fundal alb. Acest mod de vizualizare permite utilizatorului sa selecteze mai usor actualizarile pe care doreste sa le citeasca selectand titlul prezentat. In momentul selectarii actualizarii dorite, aceasta se va deschide, in aceeasi fereastra, furnizand continutul utilizatorului. Acest lucru este specific aplicatiilor AJAX, reducand frustrarea utilizatorului de a naviga prin numeroase pagini pana a ajunge sa vizualizeze continutul dorit.

Figura 5. List View in Google Reader

Modul de vizionare “Extended View”, ilustrat in Figura 6 prezinta actualizare cu intregul continut, permitand astfel utilizatorului sa citeasca fiecare actualizare, in ordinea in care au fost adaugate. Fiind o aplicatie bazata pe AJAX schimbarea intre cele doua moduri de vizualizare se poate face usor folosind optiunile din coltul din dreapta.

Figura 6.Expanded View in Google Reader

Cele doua moduri de vizualizare sunt controlate cu ajutorul unor butoane de navigare si de optiuni. Am identificat mai multe optiuni ce faciliteaza modul in care utilizatorul controleaza aplicatia. In grupul 2 de butoane din Figura 6, aplicatia pune la dispozitie un mod de a marca si a trimite si altor utilizatori acea stire, sau de a o organiza intr-o colectie de stiri favorite, pentru a fi vizionate ulterior. Aceste butoane si optiuni faciliteaza interactiunea cu utilizatorul prin furnizarea lucrurilor de mare interes pentru cel ce foloseste aplicatia.

Pentru a face aplicatia si mai accesibila Google a furnizat o lista taste prin care poate fi controlata aplicatia, fara ajutorul mouse-ului.Spre exemplu taste J si K sunt folosite pentru navigarea printe actualizari, S pentru a trece o actualizare la favorite, etc. O lista completa de comenzi este furnizata la adresa: http://www.google.com/help/reader/faq.html#shortcuts .

Cele prezentate in paragrafele anterioare sunt la nivel de interactiune conventionala cu utilizatorul, un lucru benefic fiind modalitatea de navigare cu ajutorul tastaturii. Totusi la nivel de interactiune neconventionala, luand in vedere persoanele cu disabilitati de vedere, aplicatiile AJAX nu pot fi folosite, nepermitand acestora o navigare usoara. Imbunatatirea acestui mod de interactiune ar face aplicatiile AJAX, mai accesibile si mai interactive pentru

Bibliografia folosita:

1. Official Webpage Google Reader 2. Google Reader FAQ

3. Ajax Design Patterns - By Michael Mahemoff 2006, O'Reilly