bridgingIT / Seite 1

Yet another Java Web Framework?

Christian Janz

christian.janz@bridging-it.de

bridgingIT / Seite 2

Agenda

Einführung in Vaadin

Vergleich mit anderen Frameworks

Überblick

Architektur

Zusammenfassung

Aspekte

Unterschiede

Databinding

Entwicklung von Komponenten

bridgingIT / Seite 3

Agenda

Einführung in Vaadin

Einführung in Vaadin

Vergleich mit anderen Frameworks

Überblick

Architektur

Zusammenfassung

Aspekte

Unterschiede

Databinding

Entwicklung von Komponenten

bridgingIT / Seite 4

bridgingIT / Seite 5

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

Überblick

bridgingIT / Seite 6

Geschichte

2000 2006 2009 2012

IT Mill wird gegründet

MillstoneLibrary 1.0

IT Mill Toolkit Release 4 AJAX

Weitere Projekte auf Basis der Millstone Library

Kommerzielle Lizenz Apache License 2

Vaadin 6

Eclipse Plugin

VaadinDirectory

Vaadin 6.8.5

http://vaadin.com/book/-/page/intro.overview.background.html

20132008

IT Mill Toolkit Release 5

Vaadin 7Beta 7

bridgingIT / Seite 7

bridgingIT / Seite 8

Vaadin Framework

Architektur: Grobe Übersicht

https://vaadin.com/book/-/page/intro.html#figure.intro.architecture

bridgingIT / Seite 9

Plain GWT

Vaadin

Vergleich mit Plain GWT

bridgingIT / Seite 10

• 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

Demo Hello World

bridgingIT / Seite 11

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)

Demo: Hello World

bridgingIT / Seite 12

Agenda

Databinding

Einführung in Vaadin

Vergleich mit anderen Frameworks

Überblick

Architektur

Zusammenfassung

Aspekte

Unterschiede

Databinding

Entwicklung von Komponenten

bridgingIT / Seite 13

Interfaces

String lastName

class Person {

}

List<Person>

bridgingIT / Seite 14

Databinding: Big Picture

bridgingIT / Seite 15

• 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/

Databinding: Feature-Demos

bridgingIT / Seite 16

Agenda

Entwicklung von Komponenten

Einführung in Vaadin

Vergleich mit anderen Frameworks

Überblick

Architektur

Zusammenfassung

Aspekte

Unterschiede

Databinding

Entwicklung von Komponenten

bridgingIT / Seite 17

Grundsätzlich 3 Arten von Komponenten

• Komplett serverseitig Composite Components

• Server- und clientseitig mit GWT• Server- und clientseitig mit Plain JavaScript

Entwicklung von Komponenten

bridgingIT / Seite 18

• Unterklassen von com.vaadin.ui.CustomComponent• Rein Serverseitig• Komposition bestehender Komponenten

Composite Components

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 19

Client-Side Engine

bridgingIT / Seite 20

Custom Vaadin Widget mit GWT

bridgingIT / Seite 21

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

Custom Vaadin Widget mit GWT

bridgingIT / Seite 22

Custom Vaadin Widget mit JS

bridgingIT / Seite 23

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

Custom Vaadin Widget mit JS

bridgingIT / Seite 24

Agenda

Vergleich mit anderen Frameworks

Einführung in Vaadin

Vergleich mit anderen Frameworks

Überblick

Architektur

Zusammenfassung

Aspekte

Unterschiede

Databinding

Entwicklung von Komponenten

bridgingIT / Seite 25

.equals(aPear)

bridgingIT / Seite 26

Aspekte

• Server/Client UI

• Anwendungs-/Seitenbasiert

• Komponenten

• Skalierbarkeit

Architektur

Organisation

• Lizenz

• Firma

• Community

• Dokumentation

• SupportEntwicklung

• Lernkurve

• Verwendete Sprachen

• Eigene Komponenten

bridgingIT / Seite 27

Frameworks

bridgingIT / Seite 28

Unterschiede Organisation

Aspekt Vaadin GWT Smart GWT RichFaces

Lizenz Apache 2.0 Apache 2.0 LGPL/Kommerziell

LGPL

VerantwortlicheOrganisation

Vaadin Ltd. Google Isomorphics JBoss

Community

Dokumentation

Kommerzieller Support

Ja Nein Ja Ja

bridgingIT / Seite 29

Unterschiede Architektur

Aspekt Vaadin GWT Smart GWT RichFaces

Server-/Client-UI-Framework

Server Client Client/Server* Server

Anwendungs-/Seitenbasiert

Anwendung Anwendung Anwendung Seiten

Verfügbarkeit Komponenten

Skalierbarkeit

bridgingIT / Seite 30

Unterschiede Entwicklung

Aspekt Vaadin GWT Smart GWT RichFaces

Geringe Lernkurve

VerwendeteSprachen

Java, CSS Java 1, CSS Java, JavaScript, CSS

Java, JavaScript, HTML, XML, CSS

Einfachheit Komponenten-Entwicklung

1 nur Teilmenge

bridgingIT / Seite 31

Zusammenfassung

Agenda

Einführung in Vaadin

Vergleich mit anderen Frameworks

Überblick

Architektur

Zusammenfassung

Aspekte

Unterschiede

Databinding

Entwicklung von Komponenten

bridgingIT / Seite 32

• 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

Vorteile

bridgingIT / Seite 33

• Bisher nicht so weit verbreitet

• Einige Addons sind kostenpflichtig

• Skaliert nicht beliebig• Hat Probleme bei schlechten Antwortzeiten (Pings)

Nachteile

bridgingIT / Seite 34

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

Einsatzszenarien

bridgingIT / Seite 35

Fragen und Antworten

Fragen?

Copyright © BridgingIT GmbH

Alle Rechte vorbehalten. Die Weitergabe oder Vervielfältigung ist ohne vorherige schriftliche Zustimmung der BridgingIT GmbH nicht erlaubt.

Wir freuen uns auf Sie.

Standort Mannheim

N7, 5-6

68161 Mannheim

Standort Frankfurt

Solmsstraße 4

60486 Frankfurt

Standort Stuttgart

Königstraße 42

70173 Stuttgart

Standort Karlsruhe

Rüppurrer Straße 4

76137 Karlsruhe

Standort Köln

Richmodstraße 6

50667 Köln