Vaadin und Vaadin TouchKit

Die Welt wird immer mobiler. Tablets, Smartphones, aber auch ausreichend performante Thin Clients (z.B. Raspberry Pi) sind aus dem Alltagsleben kaum mehr wegzudenken. Dass dies auch Auswirkungen auf die Softwareentwicklung hat, zeigt sich u.a. in den Web-Application-Frameworks, die für die Entwicklungen von „Rich Internet Applications“ (RIA) Verbreitung gefunden haben. Damit lassen sich leichtgewichtige Anwendungen entwickeln, die einer nativen Desktop-Anwendung kaum noch nachstehen.

In diesem Blog geht es um ein Framework, das bereits seit vielen Jahren entwickelt wird und sich für professionelle RIAs empfiehlt, da es mit der Zeit gegangen ist und verschiedene Technologien geschickt in sich vereinigt. Dabei sollen jedoch keine tiefgreifenden technischen Vergleiche angestellt, sondern eine Einführung in die Konzepte und die Architektur von Vaadin gegeben werden.

Vaadin

Das Web-Application-Framework Vaadin blickt auf eine Entwicklungsgeschichte zurück, die im Jahr 2000 begann. Damals noch unter dem Namen „IT Mill Toolkit“ veröffentlichte die Firma IT Mill ein Framework, das mittels einer eigenen Oberflächen-Bibliothek die Entwicklung von RIAs ermöglichte. Diese Bibliothek, die Milestone WebUI Library, wurde bis ca. 2007 weiterentwickelt; danach kam es zu den ersten größeren Änderungen im „IT Mill Toolkit“, welche die weitere Entwicklung entscheidend prägen sollten:

Zum einen wurde das Framework von einer kommerziellen Lizenz auf die Open-Source „Apache 2.0 Lizenz“ umgestellt. Zum anderen ersetzte das Google Web Toolkit (GWT) die Milestone WebUI Library für die Clientseite. Dies hat den Vorteil, dass GWT bereits die Kompatibilität mit dem Browser sicherstellt und das Framework sich „nur noch“ um die Kommunikation auf dem Server bzw. zwischen Client und Server kümmern muss.

Was noch blieb, war der Name „IT Mill Toolkit“, der jedoch 2009 erst für das Framework und später auch für die Firma in „Vaadin“ geändert wurde. Das Wort „Vaadin“ ist finnisch und steht u.a. für das weibliche Rentier. Ein Zusammenhang, der sich auch im neuen Logo zeigt: gedreht erinnert es an ein stilisiertes Rentier.

 

Abbildung 1: Das Vaadin Logo (Quelle: eigene Darstellung nach WikiCommons [1])

Der aktuell letzte große Schritt kam 2013. Mit der in diesem Jahr veröffentlichten Version 7 des „Vaadin Frameworks“ wurde GWT vollständig in das Framework integriert. Damit ist es nun nicht mehr nötig, die GWT Libraries manuell mit in die eigene Anwendung zu integrieren.

 

Abbildung 2: Vaadin-Geschichte(Quelle: eigene Darstellung)

Vaadin und die Mitbewerber

Betrachtet man den Markt der RIAs, so stellt sich zwangsläufig die Frage, wie man das für die eigene Aufgabe passende RIA auswählt. Dafür lohnt es sich, zuerst die verschiedenen Ansätze zu betrachten, die hier üblich sind. Zum einen gibt es Frameworks, die eine Browsererweiterung in Form eines Plugins benötigen (z.B. Adobe AIR/Flash, Silverlight, JavaFX), und zum anderen die Frameworks, die ohne Plugin auskommen. Bei letzteren wiederum kann man weiter zwischen den client- (z.B. GWT, AngularJS) und den serverseitigen (z.B. JSF, ASP.net, PHP) UI-Frameworks unterscheiden.

Vaadin kommt ohne Plugin aus und bietet sowohl einen server- als auch clientseitigen Programmieransatz. Dadurch ist es z.B. mit Apache Wicket vergleichbar. Mit Vaadin kann man jedoch alles in Java programmieren und muss sich nicht um die Darstellung auf der Clientseite kümmern. Dies übernimmt GWT, quasi vollautomatisch.

Auf der Homepage von Vaadin finden sich weitere Vergleiche, die zwar marketingtechnisch auf Vaadin ausgerichtet sind, aber trotzdem eine gute Basis für eigene Evaluierungen darstellen (siehe [2]).

Vaadin Architektur

Wie bereits erwähnt, verbindet Vaadin ein client- und ein serverseitiges Architekturmodell miteinander. Der mächtigste Weg bei Vaadin ist, eine serverseitige Anwendung zu schreiben, bei der die Business-Logik auf dem Server verbleibt. Dies hat den Vorteil, dass man eine Art „Thin Client“-Anwendung schreiben kann, bei der z.B. die schützenswerte Business-Logik überhaupt nicht zum Client übertragen wird.

Mit der clientseitigen Entwicklung ist es u.a. möglich, eigene Erweiterungen in Form sogenannter Widgets zu erstellen, die in (X)HTML und JavaScript umgewandelt werden. Diese kommunizieren mit ihren Gegenstücken auf dem Server (den Components).

Das folgende Vaadin 7-Architekturbild macht dies deutlicher:

 

Abbildung 3: Vaadin7 Architektur(Quelle: [3])

Die Umsetzung erfolgt dabei in Java unter Verwendung einer Swing-ähnlichen API. Für ein einfaches „Hello World“-Programm sieht dies wie folgt aus:

public class Samplesbbs_iteUI extends UI {



@Override

protected void init(VaadinRequest request) {

final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);
Label halloLabel = new Label(“Klicken um Hallo zu sagen”);
Button button = new Button(“Click Me 2 say Hello World”);
button.addClickListener(new Button.ClickListener() {
public void buttonClick(ClickEvent event) {
layout.addComponent(new Label(“Hello ite World”));
}

});
layout.addComponent(halloLabel);
layout.addComponent(button);
}

Abbildung 4: „Hello World" Vaadin Web-Anwendung

 

In der „Quelltext“ Ansicht, sieht man den generierten (X)HTML Code:

 

 

Für weitere, umfangreichere Beispiele sei an dieser Stelle auf die Vaadin-Homepage verwiesen. Dort finden sich neben einer Demoanwendung mit den einzelnen Komponenten [4] auch komplexere Beispiele wie die „Quick Tickets Dashboard“-App [5].

Erweiterungen

Vaadin bietet die Möglichkeit, weitere Funktionen durch sogenannte Add-ons nachzurüsten. Davon gibt es aktuell gut 400 (Stand 11/2013), die mit verschiedenen Lizenzen veröffentlich worden sind. Sie rüsten Dialoge, Datencontainer und z.B. eine erweiterte Spring-Anbindung nach.

Eine Sonderstellung nehmen die Add-ons ein, die direkt von Vaadin Ltd. veröffentlicht wurden. Diese haben im Allgemeinen eine kommerzielle Lizenz, wenn sie z.B. in Nicht-Open-Source-Anwendungen verwendet werden sollen.

Es würde den Rahmen dieses Blogs sprengen, auf alle Add-ons einzugehen. Deshalb soll hier nur kurz das TouchKit vorgestellt werden. Mit diesem ist es möglich, Vaadin-Anwendungen für Browser von Mobilgeräten zu entwickeln. Dafür bringt TouchKit z.B. spezielle Button-Komponenten mit, die für Touch-Geräte optimiert sind.

Des Weiteren gehören zu den integrierten Funktionen GeoLocation, Anzeige/Start der App auf dem „Home Screen“ sowie die Unterstützung des Web App Mode (iOS).

Vaadin TouchKit

Wie bei einer normalen Vaadin-Anwendung wird zunächst ein UI definiert. Dieses enthält die Komponenten, welche später auf der Oberfläche zu sehen sein werden. Es handelt sich dabei entweder um Standard-Vaadin-Komponenten oder spezielle TouchKit-Komponenten, die für die Verwendung in den Browsern von mobilen Geräten optimiert sind.

Neben den TouchKit-Komponenten ist ein anderes Servlet die offensichtlichste Unterscheidung zu einer Standard-Vaadin-Anwendung. Hier ein Beispiel, das im „Book of Vaadin“ zu finden ist:

importcom.vaadin.addon.touchkit.server.TouchKitServlet;

importcom.vaadin.addon.touchkit.settings.TouchKitSettings;

public class SampleServlet extends TouchKitServlet {

    @Override

    protected void servletInitialized() throws ServletException {

        ...

    }
}

					import com.vaadin.addon.touchkit.ui.TabBarView;
					@Theme("mobiletheme")
					@Title("Simple App")
					public class PhoneUI extends UI {
					@Override
					protected void init(VaadinRequest request) {
					TabBarView mainView = new TabBarView();
					setContent(mainView);
					...
} }

 

Um die Anwendung auch außerhalb eines mobilen Gerätes verwenden zu können, kann man ein sogenanntes Fallback-UI implementieren. Diese Oberfläche wird immer dann angezeigt, wenn der Aufruf mit einem „normalen“ Webbrowser geschieht.

Weitere spezielle TouchKit-Komponenten wie Navigation-Bar und Toolbar sind detailliert im „Book of Vaadin“ dokumentiert, auf das an dieser Stelle verwiesen sei (siehe [6]).

 

Abbildung 5: TouchKit Navigation-Bar & Toolbar (Quelle: Book of Vaadin [7])

 

Weitere TouchKit-Demos sind unter [7] und [8] verlinkt. Zum Testen benötigt man einen geeigneten Browser wie z.B. Chrome.

Fazit

Mit Vaadin lassen sich in relativ kurzer Zeit professionell wirkende Webanwendungen erstellen. Dabei ist es sehr angenehm, dass man nur in einer Programmiersprache arbeiten muss und den clientseitigen JavaScript-Code sowie die Kommunikation dem Framework überlassen kann. Dank der guten Integration von GWT muss sich der Entwickler u.a. nicht mit Browserinkompatibilitäten beschäftigen.

Mittels CSS lassen sich auch eigene Designs umsetzen, um zum Beispiel das Corporate Design der eigenen Firma einhalten zu können. Vaadin vereinfacht dies ein wenig, da auch die CSS-Metasprache SASS unterstützt wird. Trotzdem sind hierfür gute CSS-Kenntnisse empfehlenswert.

Ob Vaadin im eigenen Projekt das Framework der Wahl ist, muss individuell entschieden werden. Dank des leichten Einstiegs ist es einen ausführlicheren Blick aber auf jeden Fall wert. Dafür bietet es sich an, ein Beispiel umzusetzen, das über ein einfaches „Hello World“-Programm hinausgeht. Insbesondere die Netzwerkabhängigkeit, die Skalierbarkeit in heterogenen Umgebungen und die Verwendung von geeigneten Software-Architekturen und -Mustern müssen dabei betrachtet werden.

Um die Zukunft von GWT, bei dessen Weiterentwicklung es in der letzten Zeit etwas stiller geworden war, muss man sich aktuell kaum noch Gedanken machen. Da Vaadin Ltd. als Mitglied des GWT-Steering-Komitees direkten Einfluss auf die Weiterentwicklung hat und auch Google sich auf der Google I/O 2013 mit einer aktuellen GWT-Roadmap zurückmeldete, scheint hier clientseitig die Entwicklung für die nächsten Jahre gesichert [9].

Weitere Entwicklungen und Neuerungen sind auch auf der GWT.create-Konferenz im Dezember 2013 zu erwarten, die von Vaadin Ltd. ausgerichtet wird [10].

Das Vaadin-TouchKit ist eine interessante Erweiterung für Vaadin, deren Bedeutung jedoch von der Akzeptanz einer Browser-App auf einem mobilen Gerät abhängig ist.

Während dies für Intranet-Anwendungen durchaus sinnvoll erscheint, bietet es gegenüber einer nativen App nur bedingt Vorteile. Aber auch hier gilt: Entscheidend ist der eigene Anwendungsfall. Wenn die Lizenz keine Einschränkung darstellt, so sollte man Vaadin-TouchKit durchaus eine Chance geben.

 

Links, Quellen, Weitere Informationen:

[1] Wiki Commons: http://commons.wikimedia.org/wiki/File:Vaadin-logo-hi.png
[2] Vaadin Vergleiche: https://vaadin.com/comparison
[3] Vaadin 7 Architektur, aus “Book of Vaadin” Kapitel 1.1 (Link https://vaadin.com/book/vaadin7/-/page/intro.html)
[4] Vaadin Sampler: http://demo.vaadin.com/sampler/
[5] Dashboard Webanwendung: http://demo.vaadin.com/dashboard
[6] Mobil-Components: https://vaadin.com/book/-/page/mobile.components.html
[7] Parking Demo:demo.http://vaadin.com/parking/
[8] Vornitologist Demo: http://demo.vaadin.com/vornitologist
[9] GWT Roadmap for the Future : https://developers.google.com/events/io/sessions/327833110
[10] GWT.create Konferenz 2013: http://gwtcreate.com/
Blog Artikel “Vaadin unter Last“: http://blog-de.akquinet.de/2013/07/02/vaadin-unter-last-teil-1-aufsetzen-der-testumgebung/