RO
EN
×
▼ BROWSE ISSUES ▼
Issue 9

Google Web Toolkit - O vedere de ansamblu

Alex Luca
Senior Developer
@Hewlett Packard

OTHERS


Prezentul articol este o inițiere în Google Web Tookit (GWT) pentru cei care nu au mai lucrat cu până acum cu acesta, dar și o sursă de informații interesante despre GWT pentru cei care sunt familiari cu acest mediu de dezvoltare.

În esenţă, GWT este un set de instrumente care permite crearea de aplicații web complexe, cu un minim de cunoştințe de HTML / Javascript. Acest lucru este posibil datorită compilatorului care translatează cod Java în cod HTML / JS. De exemplu, crearea unui buton în GWT se poate realiza astfel:

Button button = new Button("Click here").

Secvenţa de cod Java de mai sus va fi translatată în:

.

Avantaje

GWT conține în mod implicit anumite componente grafice dinamice și reutilizabile. Acestea pot fi extinse și modificate după necesități.

De asemenea, GWT oferă un sistem de gestionare a istoriei aplicației, utilizând butonul "Back" al browser-ului. Acest mecanism este foarte util deoarece în lipsa lui, butonul cauzează părăsirea aplicației, când de fapt utilizatorul ar dori să revină la acțiunea anterioară în interiorul aplicației.

Un alt mare avantaj al GWT-ului este că asigură suport pentru debug standard în Java. Mai exact, aplicația rulează într-un browser web sub formă de cod JavaScript, dar în codul Java putem inspecta valori, pune breakpoint-uri, exact ca și cum aplicația ar fi executată în Java.

Promisiunea pe care Google o face prin GWT e similară cu promisiunea pe care Sun a făcut-o cu Java: Write once, run anywhere. Astfel, dacă Java promite independența față de platforma pe care rulează un program, GWT promite independența față de browser-ul pe care rulează aplicația web.

Nu în ultimul rând, erorile comune de JavaScript cum ar fi incompatibilitate de tipuri sau erori de scriere, sunt detectate în mod implicit de către compilator, deoarece codul e scris în Java.

GWT și tehnologiile web

GWT și JavaScript

Pentru a folosi GWT trebuie să acceptăm un ciclu de dezvoltare de tip scrie - compilează - rulează. Acest fapt încetinește viteza de implementare a unui produs în comparație cu JavaScript, unde rezultatele se văd imediat ce codul este scris.

Vestea bună e că cei de la Google s-au gândit și la aceasta, de aceea în GWT există un mod de a rula aplicația numit DevMode, în care codul scris în Java e translatat în JavaScript la momentul executării, linie cu linie. Drept urmare, tot timpul aplicația rulează ultimul cod scris, ceea ce înseamnă că se poate face o modificare în cod, plus o reîncărcare a paginii în browser și modificările făcute sunt deja vizibile.

În caz că este necesar, se poate scrie cod JavaScript care nu va fi modificat de compilator. Pentru acest lucru se declară metode java native, iar codul JavaScript se scrie într-un comentariu sub declarație.

public static native String 
      getNativeLocationURL() /*-{
	var currentURL = $doc.location.href";
	return currentURL;
}-*/;

GWT și CSS

Chiar dacă majoritatea componentelor grafice puse la dispoziţie de către GWT au un aspect bun din punct de vedere vizual, de cele mai multe ori dorim să modificăm felul în care arată aplicația web. În acest caz sunt necesare cunoștințe de CSS. Desigur se pot folosi şi librării de CSS pentru a ajunge mai rapid la un rezultat satisfăcător.

GWT oferă suport pentru editarea clasei de CSS a unui element la rulare. Spre exemplu, pe butonul definit în introducerea articolului putem aplica o clasă CSS foarte ușor, folosind metoda setStyleName:

button.setStyleName("awesomeButton");

Totodată, există suport și pentru adăugarea sau eliminarea de nume de clase.

GWT și HTML

Lucrul cu GWT nu înseamnă că suntem constrânși la un anumit set de componente web. În final va fi generat tot cod HTML și de aceea există suport pentru componente HTML pure.

Nu este obligatoriu nici ca o aplicație să fie în întregime scrisă în GWT: se poate introduce pe o pagină web doar o componentă GWT în cazul în care se dorește ca pagina să rămână neschimbată în rest.

De asemenea, GWT oferă suport direct pentru elemente HTML5. De exemplu, pentru a verifica dacă tag-ul video de HTML5 e suportat în browser-ul curent (în care e deschisă aplicația), se poate apela simplu:

Video.isSupported();

Structura unui proiect GWT

Un proiect care folosește GWT este compus din trei pachete mari: Client, Shared și Server.

Codul din pachetele Client și Shared va fi translatat de compilatorul GWT în cod HTML și JavaScript. Din acest motiv, codul din aceste două pachete este limitat la un subset de clase din Java, numit JRE Emulation Library. Codul din pachetul Server este cod pur Java şi poate folosi toate clasele disponibile.

În linii mari, în pachetul Client se află codul care descrie interfața grafică. Din acest pachet nu se pot folosi direct clasele definite în pachetul Server.

În pachetul Shared se află obiectele de transfer de date, prin intermediul cărora se transferă informația între aplicația web și server. Clasele din acest pachet pot fi accesate și de către codul din Server și de către codul din Client. Ele sunt privite drept clase Java de către codul de pe Server dar, în acelaşi timp, sunt translatate în Javascript de către compilator, pentru folosirea lor în codul din interfața grafică.

În pachetul Server sunt clasele care asigură încărcarea datelor din alte surse: baze de date, integrări cu alte produse, etc.. Acestea pot chiar să lipsească complet, caz în care aplicația web generată de compilator poate fi instalată pe orice server web, chiar și fără suport Java. În această situaţie este vorba de o aplicație care nu necesită date persistente (de exemplu: un calculator online sau o aplicație care își gestionează datele folosind servicii web).

Pentru a fi apelat cod din pachetul Server de către Client se creează apeluri asincrone. De exemplu, pentru o metodă myMethod, dintr-un serviciu myService, apelul myService.myMethod se va executa instant, iar după un anumit timp se va apela metoda onFailure sau onSuccess din AsyncCallback.

myService.myMethod(myParam1, myParam2, new AsyncCallback() {
public void onFailure(Throwable caught) {
        	handleException(caught);
      }
 
      public void onSuccess(ResultType result) {
        	doSomethingWithResult(result);
      }
} 

Unde și cum este folosit GWT

GWT este folosit de anumite produse Google și de multe companii mari atât din domeniul public, cât mai ales din domeniul privat. Multe dintre aplicațiile scrise în GWT nu sunt publice, fiind folosite în interiorul organizațiilor.

Dintre produsele publice scrise în GWT putem aminti: Google AdWords, Google Flight, Google Web Fonts, extensia Speed Tracer de la browser-ul Chrome, versiunea desktop a jocului Angry Birds, Google Groups și interfața de administrare de la Blogger.

Este demn de menționat un efort făcut de programatorii Google în timpul lor liber, de a porta jocul Quake2 în GWT. Mai exact au folosit o portare deja existentă în Java a jocului, iar cu ajutorul GWT au reușit să îl ruleze sub forma unei aplicații web. Pentru a funcționa modul multi-player au folosit WebSocket din HTML5.

Framework-uri bazate pe GWT

GWT se află la baza a numeroase framework-uri sau produse utile pentru programare.

GXT de la Sencha este o librărie cuprinzătoare de componente grafice, care pot fi folosite într-o aplicație web. Oferă și suport pentru încărcarea de seturi mari de date, cu paginare client-side sau server-side și alte avantaje.

Vaadin este un framework pentru dezvoltarea de aplicații RIA (Rich Internet Applications), care se concentrează mai mult pe partea de server. Mai exact, în GWT este posibil ca un click pe un buton să nu genereze un apel la server, ci să actualizeze alt element, sau să schimbe aranjarea în pagină. În Vaadin, modul de lucru este ca orice acțiune a utilizatorului să trimită un apel la server, pentru a determina ce efect să aibă acea acțiune.

PlayN, un framework pentru dezvoltat jocuri care să ruleze pe platforme multiple (Java, Flash, Android, web), foloseşte GWT pentru implementarea mediului de rulare web.

În fine, mGWT este o librărie pentru GWT pentru crearea de aplicații web pentru dispozitive mobile.

Comunitatea GWT

De la lansarea GWT din 2006 și până anul trecut, Google a fost principalul factor de decizie în ceea ce privește viitorul acestui proiect cât și principalul contributor la codul sursă. Celelalte companii care au adus îmbunătățiri sau au dezvoltat componente pentru GWT nu aveau un mod de a contribui la codul acestuia.

Anul trecut Google a luat decizia de a înființa "GWT Steering Committee" - comitetul de conducere GWT. Din acest comitet fac parte persoane care aparțin unor companii ca și Vaadin, Sencha, RedHat și mGWT. Rolul acestui comitet este de a asigura continuitatea proiectului și de a contribui la îmbunătățirea codului acestuia.

Viitorul

Compania Vaadin a creat un raport numit "Viitorul GWT", bazat pe un chestionar la care au răspuns aproximativ 1300 de companii referitor la felul în care GWT este folosit în interiorul organizației lor. 80% din aplicațiile GWT sunt dezvoltate în segmentul de afaceri, iar 1% sunt jocuri. Mai mult de 36% din aplicații asigură suport pentru tablete, iar peste 25% pentru telefoane mobile.

Referitor la satisfacție, 49% dintre cei care au răspuns, sunt nemulțumiți de timpul de compilare, 34% de numărul mic de componente disponibile de la Google, iar 27% de timpul de reîncărcare al aplicației când aceasta ruleaza în DevMode.

Pe de altă parte, 60% sunt mulțumiți de faptul că nu trebuie să scrie nici o linie de JavaScript, 25% de viteza aplicației la rulare (când este instalată la utilizatorii finali), iar 15% de posibilitatea de a găsi și repara defecte rapid. Cel mai important, 89% din cei care au răspuns, ar folosi GWT într-un proiect în viitor.

Concluzii

Folosind GWT se poate trece destul de repede de la o aplicație care folosește librării Java standard (Swing, AWT) pentru interfața grafică, la dezvoltarea unei aplicații web, putând fi utilizate cunoștințele de programare Java pentru a structura aplicația într-un mod eficient.

Bibliografie

https://developers.google.com/web-toolkit/

https://developers.google.com/web-toolkit/doc/latest/DevGuideHtml5

https://developers.google.com/web-toolkit/speedtracer/

https://groups.google.com/forum/#!forum/gwt-steering

http://sencha.com/gxt

http://vaadin.com

https://vaadin.com/gwt/report-2012

http://code.google.com/p/quake2-gwt-port/

http://chrome.angrybirds.com

https://developers.google.com/playn/

http://m-gwt.com/

Sponsors

  • Endava
  • iSDC
  • Small Footprint
  • 3PillarGlobal
  • Fortech
  • Accesa
  • Betfair Romania
  • yardi
  • Accenture
  • .msg systems
  • Mozaic Works