GWT Blog-Serie – Die Vorteile für Entwickler (4/4)

Zum Abschluss meiner Blog-Serie will ich nun noch die Vorteile für Entwickler von GWT Anwendungen aufzeigen. In den Vorherigen Blogposts habe ich bereits erklärt was GWT ist, wie GWT die Performance der Browser optimal ausnutzt und dass sich GWT auf dem mobilen Markt mit jQuery Mobile und Sencha Touch messen kann.

GWT aus Entwicklersicht

Aus Entwicklersicht geht GWT einen komplett anderen Ansatz als andere Web Developer Frameworks. Normalerweise programmiert man in einem Web Developer Framework clientseitigen Code in JavaScript und serverseitigen Code in einer anderen Sprache wie z.B. Java, C# oder PHP.

Bei GWT wird der client- und der serverseitige Code in Java programmiert. Ein GWT Entwickler brauch theoretisch keine HTML Kenntnisse um eine Top Anwendung zu entwickeln. Praktisch gibt es jedoch viele Vorteile wenn man über diese verfügt, spätestens wenn man eigene Widgets programmieren möchte.

Quelle: The Future of GWT Report, 2012, Vaadin

Quelle: The Future of GWT Report, 2012, Vaadin

Vorteile von GWT

Als Entwickler bieten sich durch die Nutzung von Java als Frontend-Sprache diverse Vorteile. Aus einer Umfrage von Vaadin, haben sich die Entwickler für folgende Vorteile ausgesprochen:

Quelle: The Future of GWT Report, 2012, Vaadin

Quelle: The Future of GWT Report, 2012, Vaadin

Debugging

Aus meiner Erfahrung mit JavaScript Frontend Projekten, weiss ich, dass es nicht immer simpel ist JavaScript Code zu debuggen. Vor allem wenn ein Fehler in einer externen Library auftritt, kann das Debuggen sehr aufwändig werden. Clientseitiger Code kann mit GWT direkt in der IDE gedebuggt werden, als wäre es eine normale Java Anwendung, was eine grosse Erleichterung mit sich bringt.

Refactoring

Es können alle Refactoring Funktionen der IDE genutzt werden.

Community

Hinter GWT steht eine grosse Community. Bei Fragen zu GWT findet man z.B. auf Stackoverflow zu fast allen eine Antwort.

Testing

Automatisches Testen von clientseitigem Code ist immer schwierig in Web Anwendungen. Dank der strikten Trennung zwischen Logik und Layout kann auch der clientseitige Code mit allen bekannten Tools aus der Java Welt getestet werden. So können Tools wie JUnit, Test NG, JMock oder andere Mocking-Libraries eingesetzt werden.

Stateless Server

Dank der Stateless Servers lässt sich GWT sehr gut skalieren.

Back-Button Support

GWT verfügt über einem eingebauten Browser-Back-Button Support trotz der ausgiebigen Nutzung von AJAX-Requests. Als Entwickler muss man sich nicht selber darum kümmern.

Schnelles Entwickeln

Wenn man das Konzept von GWT verstanden hat, ist man extrem schnell im Entwickeln mit GWT.

Google App Engine Integration

GWT bietet volle Integration in Google App Engine. Als Entwickler kann man so schnell eine funktionierende App zusammenstellen und veröffentlichen ohne sich grosse Gedanken über den Backend-Server zu machen.

Nachteile von GWT

In der Umfrage von Vaadin wurde auch gefragt, wo die Nachteile von GWT liegen. Hier bin ich nicht mit allen Punkten gleicher Meinung.

Quelle: The Future of GWT Report, 2012, Vaadin

Quelle: The Future of GWT Report, 2012, Vaadin

Widgets

Es stimmt zwar, dass nicht genügend gute Widgets vorhanden sind. Aber ich empfinde das nicht als Nachteil. Denn eigene Widgets sind schnell programmiert. Wer eine coole Web Anwendung programmieren will, der muss so oder so die Widgets anpassen, damit sie seinen Ansprüchen entsprechen. Es gibt ausserdem viele Libraries wie z.B. Smart-GWT, welche besser Widgets anbieten.

Dev-Mode Refresh Time

Dies ist tatsächlich so, dass es etwas lange dauert, bis man seinen Code testen kann. Aber GWT hat den Super Dev Mode eingeführt, womit sich client code ohne neues Kompilieren schnell testen lässt. Für mich persönlich reichte der normale Dev Mode bis anhin. Den Super Dev Mode habe ich noch nicht ausprobiert.

Getting started with GWT is difficult

Weil der Ansatz wie man Webanwendungen entwickelt von GWT ganz anders ist als bei anderen Web Development Frameworks, braucht es einer ernsthaften Einarbeitung, bis man alle Konzepte verstanden hat. So können in clientseitigem Code zum Beispiel nicht alle Features von Java verwendet werden (z.B. kein Reflection).

Viele Wege führen nach Rom

Es werden immer wieder neue Konzepte eingeführt, welche dann ältere ablösen. Das bringt Vor- und Nachteile. So gibt es z.B. verschiedene Ansätze für die Kommunikation zwischen Server und Client oder verschiedene Möglichkeiten wie man Events behandelten kann. Bei der Entwicklung von GWT Anwendungen sollten sich die Entwickler am Anfang auf eine Technik einigen, wenn die entsprechenden Problemstellungen zur Anwendung kommen.

Persönliche Erfahrung mit GWT

Ich startet im Zuge meiner Bachelor Arbeit an der ZHAW in Winterthur mit dem Programmieren in GWT (2012).

Die Aufgabe bestand darin, ein Framework zu entwickeln, womit sich mobile Apps im Baukastenformat erstellen lassen. Der Benutzer der Anwendung sollte die Möglichkeit haben, verschiedene Module auszuwählen und diese dann als App zu publizieren. Der ganze Inhalt sollte im Web verwaltet werden können, wie in einem CMS. Die Entwickler sollten ausserdem die Möglichkeit haben, dass Framework individuell mit neuen Bausteinen zu erweitern, ohne den Core zu bearbeiten. Ein weiteres Key-Feature sollte die Skalierbarkeit sein. Es sollte möglich sein, das App-CMS auf einem Server zu betreiben und damit tausende Apps zu verwalten.

Architektur

Ich habe mich dann für GWT mit MVP-Architektur  für das Frontend und Google App Engine für das Backend entschieden. Alles wird in Java programmiert. Für die Persistenz wurde JDO verwendet.

Somit konnte ich das Framework losgelöst von den App-Bausteinen programmieren. Jeder Baustein konnte dann im Anschluss wiederum für sich entwickelt werden.

MVP-Archtiektur

Die MVP-Architektur ähnelt sehr der MVC-Architektur. MVP heisst Model-View-Presenter.

Ein Baustein besteht aus Client- und Serverklassen. Auf Serverseite bestehen hauptsächlich Model-Klassen. Die Clientklassen werden unterteilt in View-,Presenter- und Eventklassen sowie Proxy-Interfaces für die Servermodels.

MVP Klassendiagramm

MVP Klassendiagramm, Quelle: http://www.gwtproject.org/articles/mvp-architecture.html

AppController

Als Einstiegspunkt des Bausteins steht auf Clientseite der AppController. Dieser ist für die Logik verantwortlich, welche nicht in einem Presenter behandelt werden kann. So lädt dieser zum Beispiel die notwendigen Presenter-Klassen, welche dann für den Rest verantwortlich sind.

Model

Ein Model stellt eine Businessentität dar. Mit Hilfe von JDO-Annotationen werden diese Klassen auf dem Server persistiert. Der Client greift auf ein Proxy-Objekt zu und kann so direkt mit dem Server kommunizieren.

View

Eine View enthält alle UI Komponenten für diesen Baustein. In einer View werden alle Elemente angeordnet und mittels CSS designt. Ein View weiss nicht, welcher Inhalt in die Felder kommt, sondern nur, dass z.B. drei Labels und ein Bild dargestellt werden müssen.

Presenter

Im Presenter wird die ganze Logik abgebildet. Der Presenter lädt die Daten vom Server und bestimmt welche Daten durch die View dargestellt werden. Ausserdem ist er für das EventHandling der UI Komponenten und das History Management verantwortlich.

Um die Kommunikation zwischen View und Presenter zu gewährleisten, werden im Presenter Display-Interfaces definiert, welche von der View implementiert werden.

Struktur
MVP Struktur

MVP Struktur, Quelle: http://www.gwtproject.org/articles/mvp-architecture.html

Entwickeln mit GWT

Wer jetzt auf den Geschmack gekommen ist und mit GWT entwickeln möchte, der Informiert sich am besten unter gwtproject.org. Dort gibt es einige gute Tutorials. Pflicht für jeden Einsteiger ist das MVP Tutorial:

http://www.gwtproject.org/articles/mvp-architecture.html

http://www.gwtproject.org/articles/mvp-architecture-2.html

Wer diese zwei Artikel intensiv durchexerziert wird sehr schnell Spass am Entwickeln mit GWT finden und schnell die Vorteile erkennen gegenüber anderer Frontend Frameworks.

GWT Blog-Serie – GWT im Vergleich zu jQuery Mobile und Sencha Touch (3/4)

mgwt

Quelle: https://code.google.com/p/mgwt/

Wer gegenwärtig ein mobile App entwickelt, der sollte sich vor der Konzeption entscheiden, ob er die App nativ oder als Web-App implementieren will. Die Entscheidung hängt oft davon ab auf welchen Plattformen die App zugänglich sein soll.

Soll die App nur auf einer Plattform verfügbar sein, dann ist die beste Lösung fast immer, die App nativ zu Entwickeln. Soll sie auf mehreren Plattformen erscheinen, dann wird der Kostenfaktor meist zum treibenden Argument gegen eine plattformspezifische Entwicklung, auch wenn die Performance von Animationen und Benutzerinteraktionen nicht das Niveau von nativen Apps erreichen.

Kommen die Entscheidungsträger zu diesem Punkt, fällt die Entscheidung oft auf eine Web-App mit jQuery Mobile. Doch es gibt noch andere Frameworks auf dem Markt, welche mobile Optimierung anbieten. So zum Beispiel Sencha Touch oder MGWT.

Als Mobile-Entwickler bei Namics und während des Studiums habe ich meine Erfahrungen mit all den erwähnten Technologien gesammelt. Ich arbeitete an nativen Apps für iOS und Android sowie plattformunabhängigen Apps mit Sencha Touch, jQuery Mobile und GWT.

Im vorherigen Blogpost ging ich auf die Performance-Optimierung von GWT ein. In diesem Teil meiner Blog-Serie will ich diese drei Frameworks vergleichen und vertieft auf die Performance von MGWT eingehen.

(mehr …)

GWT Blog-Serie – Wie GWT die maximale Leistung des Browser nutzt (2/4)

Im ersten Teil meiner Serie ging ich auf eine Umfrage über die Zukunft von GWT ein und beschrieb in Kürze, was GWT ist.
Ab 100 Zeilen JavaScript Code soll GWT besser optimiert sein, als würde man den Code selber schreiben. In diesem Teil der Serie, werde ich dieser Aussage auf den Grund gehen.

Performance von GWT dank Compiler

Sobald eine Web Anwendung gebaut wird, welche mehr als 100 Zeilen JavaScript Code verwendet, kann man davon ausgehen, dass GWT den besseren Code auswirft als würde man den Code selber in JavaScript schreiben. Verblüffende Aussage nicht wahr? Ich würde von mir behaupten, dass ich in der Lage sei, bei einem JavaScript von lediglich 100 Zeilen Code, ein Script zu schreiben, welches keine Performance-Leaks umfasst. Doch warum sollte ein von GWT optimiertes JavaScript performanter sein? Der Grund liegt im Java-zu-JavaScript Compiler. Dieser Compiler beschränkt sich nicht darin, den Code perfekt zu minifizieren und zu strukturieren, er offeriert noch einiges mehr.

Features des GWT Compilers:

  • Compile per Browser/Device
  • Dead Code Removal
  • Inlining
  • Renaming
  • Zipping
  • Secure caching

Compile per Browser/Device

Damit die Performanceoptimierung für jeden Benutzer ausgereizt werden kann, wird das JavaScript für jeden unterstützten Browser kompiliert. Dieser kompilierte Code enthält dann alle verwendeten JavaScript und CSS Ressourcen, welche genau für diesen Browser notwendig sind.

browsers

Quelle: http://diminiinc.blogspot.ch/2013/08/windows-browsers-comparison-august-2013.html

(mehr …)

GWT Blog-Serie – 88.84 Prozent würden Google Web Toolkit wieder einsetzen… (1/4)

Die Firma Vaadin lancierte 2012 eine Umfrage in der GWT Community zum Thema „Zukunft von GWT“. Aus den Antworten von über 1300 Teilnehmern entstand ein 32-seitiger Bericht darüber, wer GWT benutzt, in welchem Umfeld GWT eingesetzt wird, wo die Stärken und Schwächen von GWT liegen und wo der Weg von GWT hinführt.

Back_to_the_Future_gwt

Im ersten Teil meiner Serie gehe ich auf Details dieses Reports ein und beschreibe kurz und knapp was GWT ist.

(mehr …)