Vaadin erfreut sich immer größerer Beliebtheit. Ist es nur ein weiteres neues Java Web Framework oder was steckt dahinter? Diese Session gibt eine Übersicht über Vaadin und vergleicht es mit anderen Frameworks. Außerdem werden einzelne Aspekte wie Databinding in Live Demos genauer betrachtet. Abrundend gibt der Vortrag einen Überblick über die Vor- und Nachteile und stellt typische Einsatzszenarien vor.

1. Yet another Java Web Framework?
Christian Janz
christian.janz@bridging-it.de
bridgingIT / Seite 1

2. Agenda
Einführung in Vaadin
Überblick
Architektur
Databinding
Entwicklung von Komponenten
Vergleich mit anderen Frameworks
Aspekte
Unterschiede
Zusammenfassung
bridgingIT / Seite 2

3. Einführung in Vaadin
Agenda
Einführung in Vaadin
Überblick
Architektur
Databinding
Entwicklung von Komponenten
Vergleich mit anderen Frameworks
Aspekte
Unterschiede
Zusammenfassung
bridgingIT / Seite 3

4. bridgingIT / Seite 4

5. Überblick
 Vaadin = finnisch für weibliches Rentier
(wörtlich „Ich beharre“)
 RIA-Framework der Vaadin Ltd. aus Finnland
 www.vaadin.com
 Showcase: http://demo.vaadin.com/sampler
 Framework steht unter Apache License 2
 Viele kostenlose Addons
 Kostenpflichtiger Pro Account
 Feature Voting, Bug-Fix Priority
 Pro Addons
 Support
 Kein wirklich neues Framework
bridgingIT / Seite 5

6. Geschichte
Kommerzielle Lizenz Apache License 2
Vaadin 6
 Eclipse Plugin
Vaadin 6.8.5
Weitere Projekte auf Basis der
Millstone Library IT Mill Toolkit Vaadin 7
Release 5 Beta 7
Millstone
Library 1.0
IT Mill Toolkit
Release 4 Vaadin
IT Mill wird
 AJAX Directory
gegründet
2000 2006 2008 2009 2012 2013
http://vaadin.com/book/-/page/intro.overview.background.html
bridgingIT / Seite 6

7. bridgingIT / Seite 7

8. Architektur: Grobe Übersicht
Vaadin Framework
https://vaadin.com/book/-/page/intro.html#figure.intro.architecture
bridgingIT / Seite 8

9. Vergleich mit Plain GWT
Vaadin
Plain GWT
bridgingIT / Seite 9

10. Demo Hello World
• Voraussetzung
• Eclipse oder Netbeans
• Servlet-Container (im Beispiel: Tomcat 7)
• Installation Vaadin Tools von http://vaadin.com/eclipse
• Siehe https://vaadin.com/book/-/page/getting-started.package.html
bridgingIT / Seite 10

11. Demo: Hello World
Wichtige Punkte in dieser Demo
• Eclipse-Integration: Projekt Wizard
• Projekt-Layout
• Einfachheit der Entwicklung
• Debuggen in Eclipse
• Debuggen im Browser
• Inhalt der XHR-Anfragen
• Debug-Console (?debug)
bridgingIT / Seite 11

12. Databinding
Agenda
Einführung in Vaadin
Überblick
Architektur
Databinding
Entwicklung von Komponenten
Vergleich mit anderen Frameworks
Aspekte
Unterschiede
Zusammenfassung
bridgingIT / Seite 12

13. Interfaces
String lastName
class Person {
}
List<Person>
bridgingIT / Seite 13

14. Databinding: Big Picture
bridgingIT / Seite 14

15. Databinding: Feature-Demos
• Mehrere Views synchronisieren
• Konvertierung Model  View
• Bean Validation (JSR-303)
• Tabelle und Formular synchronisieren
• Weitere Demos siehe: http://demo.vaadin.com/book-examples-vaadin7/book/
bridgingIT / Seite 15

16. Entwicklung von Komponenten
Agenda
Einführung in Vaadin
Überblick
Architektur
Databinding
Entwicklung von Komponenten
Vergleich mit anderen Frameworks
Aspekte
Unterschiede
Zusammenfassung
bridgingIT / Seite 16

17. Entwicklung von Komponenten
Grundsätzlich 3 Arten von Komponenten
• Komplett serverseitig  Composite Components
• Server- und clientseitig mit GWT
• Server- und clientseitig mit Plain JavaScript
bridgingIT / Seite 17

18. Composite Components
• Unterklassen von com.vaadin.ui.CustomComponent
• Rein Serverseitig
• Komposition bestehender Komponenten
public class LoginForm extends CustomComponent {
private TextField usernameField;
private PasswordField passwordField;
public LoginForm() {
VerticalLayout verticalLayout = new VerticalLayout();
setCompositionRoot(verticalLayout);
usernameField = new TextField("Username");
usernameField.setRequired(true);
verticalLayout.addComponent(usernameField);
passwordField = new PasswordField("Password");
verticalLayout.addComponent(passwordField);
}
}
bridgingIT / Seite 18

19. Client-Side Engine
bridgingIT / Seite 19

20. Custom Vaadin Widget mit GWT
bridgingIT / Seite 20

21. Custom Vaadin Widget mit GWT
Folgende Artefakte müssen implementiert werden:
• GWT Modul
• GWT Widget (neu oder bestehend)
• Connector-Klasse
• SharedState-Klasse
• Serverseitige Komponentenklasse
Siehe https://vaadin.com/book/vaadin7/-/page/gwt.html
bridgingIT / Seite 21

22. Custom Vaadin Widget mit JS
bridgingIT / Seite 22

23. Custom Vaadin Widget mit JS
Folgende Artefakte müssen implementiert werden:
• Widget in JavaScript (neu oder bestehend)
• Connector-Klasse in JavaScript
• Serverseitige Komponentenklasse in Java
Siehe https://vaadin.com/book/vaadin7/-/page/gwt.javascript.html
bridgingIT / Seite 23

24. Vergleich mit anderen
Frameworks
Agenda
Einführung in Vaadin
Überblick
Architektur
Databinding
Entwicklung von Komponenten
Vergleich mit anderen Frameworks
Aspekte
Unterschiede
Zusammenfassung
bridgingIT / Seite 24

25. .equals(aPear)
bridgingIT / Seite 25

26. Aspekte
Organisation
• Lizenz
• Firma
• Community
• Dokumentation
Entwicklung • Support Architektur
• Lernkurve • Server/Client UI
• Verwendete • Anwendungs-
Sprachen /Seitenbasiert
• Eigene • Komponenten
Komponenten • Skalierbarkeit
bridgingIT / Seite 26

27. Frameworks
bridgingIT / Seite 27

28. Unterschiede Organisation
Aspekt Vaadin GWT Smart GWT RichFaces
Lizenz Apache 2.0 Apache 2.0 LGPL/ LGPL
Kommerziell
Verantwortliche Vaadin Ltd. Google Isomorphics JBoss
Organisation
Community    
Dokumentation    
Kommerzieller Ja Nein Ja Ja
Support
bridgingIT / Seite 28

29. Unterschiede Architektur
Aspekt Vaadin GWT Smart GWT RichFaces
Server-/Client- Server Client Client/Server* Server
UI-Framework
Anwendungs- Anwendung Anwendung Anwendung Seiten
/Seitenbasiert
Verfügbarkeit    
Komponenten
Skalierbarkeit    
bridgingIT / Seite 29

30. Unterschiede Entwicklung
Aspekt Vaadin GWT Smart GWT RichFaces
Geringe    
Lernkurve
Verwendete Java, CSS Java 1, CSS Java, JavaScript, Java, JavaScript,
Sprachen CSS HTML, XML, CSS
Einfachheit    
Komponenten-
Entwicklung
1 nur Teilmenge
bridgingIT / Seite 30

31. Zusammenfassung
Agenda
Einführung in Vaadin
Überblick
Architektur
Databinding
Entwicklung von Komponenten
Vergleich mit anderen Frameworks
Aspekte
Unterschiede
Zusammenfassung
bridgingIT / Seite 31

32. Vorteile
• Open Source
• Reifes Framework mit guter Community
• Gute Dokumentation
• Kommerzieller Support erhältlich, falls gewünscht
• Viele Komponenten und Addons
• Einfache Entwicklung
• Gutes Theming-Konzept
• Einfaches Deployment
• Verwendung von GWT auf Clientseite
bridgingIT / Seite 32

33. Nachteile
• Bisher nicht so weit verbreitet
• Einige Addons sind kostenpflichtig
• Skaliert nicht beliebig
• Hat Probleme bei schlechten Antwortzeiten (Pings)
bridgingIT / Seite 33

34. Einsatzszenarien
Hauptszenario: Rich Intranet Applications
• Anwendungen mit angemeldeten Benutzern
• Bedienung wie Desktop-Anwendungen
• Verarbeitung von Daten
• Komplexere Logik
• Schnelle Entwicklung ohne großen Vorlauf
Alternativ: Rich Internet Applications
• Wichtig: Webserver „in der Nähe“ der Anwender
bridgingIT / Seite 34

35. Fragen und Antworten
Fragen?
bridgingIT / Seite 35

36. Wir freuen uns auf Sie.
Standort Mannheim Standort Stuttgart
N7, 5-6 Königstraße 42
68161 Mannheim 70173 Stuttgart
Standort Frankfurt Standort Karlsruhe
Solmsstraße 4 Rüppurrer Straße 4
60486 Frankfurt 76137 Karlsruhe
Standort Köln
Richmodstraße 6
50667 Köln
Alle Rechte vorbehalten. Die Weitergabe oder Vervielfältigung ist ohne vorherige
schriftliche Zustimmung der BridgingIT GmbH nicht erlaubt.
Copyright © BridgingIT GmbH