Moderne Web-Anwendungen mit Vaadin...Moderne Web-Anwendungen mit Vaadin...

Moderne Web-Anwendungen mit Vaadin

Sebastian.Rothbucher@akquinet.de

Juni 2013

219.06.2013Copyright © 2013 – akquinet AG

3Copyright © 2013 – akquinet AG

Web-Anwendungen mit Vaadin

<{???

Agenda

• Was sind tägliche Herausforderungen?

• Warum ist Vaadin bei deren Bewältigung hilfreich?

• Wie wird in Vaadin eine Anwendung entwickelt?

• Womit anfangen?

4Copyright © 2013 – akquinet AG

Agenda

• Was sind tägliche Herausforderungen?

• Warum ist Vaadin bei deren Bewältigung hilfreich?

• Wie wird in Vaadin eine Anwendung entwickelt?

• Womit anfangen?

5Copyright © 2013 – akquinet AG

Was sind tägliche Herausforderungen?

Effizienz

• Roundtrip

• API / Libraries

• Debugging

• Testbarkeit

6Copyright © 2013 – akquinet AG

Was sind tägliche Herausforderungen?

Varianz

• Feedback

• Standards

• Vorbereitung

7Copyright © 2013 – akquinet AG

Was sind tägliche Herausforderungen?

Akzeptanz

• Nutzen

• Einfachheit

• Einstellung

• tats. Nutzung

8Copyright © 2013 – akquinet AG

Agenda

• Was sind tägliche Herausforderungen?

• Warum ist Vaadin bei deren Bewältigung hilfreich?

• Wie wird in Vaadin eine Anwendung entwickelt?

• Womit anfangen?

9Copyright © 2013 – akquinet AG

Was ist Vaadin?

• Rich Internet Applications = RIA (im Browser)

• Auf Desktop-Niveau für die Anwender

• Mittels Komponenten (wie SWT / Swing) für die Entwickler

• In pure Java entwickeln

• ���� Strongly Typed Web Development

10Copyright © 2013 – akquinet AG

Wege zu Vaadin – Fat Client (Ausgangspunkt)

���� maximaler Umfang für einen kleinen Kreis

11Copyright © 2013 – akquinet AG

Ausprägungen verschiedener Kriterien; 1=minimal, 10=maximal

0

2

4

6

8

10

12

Fat Client

stark

ausge-

prägt

wenig

ausge-

prägt

Wege zu Vaadin – CGI

12Copyright © 2013 – akquinet AG

0

2

4

6

8

10

12

Fat Client

CGI

���� sehr rudimentäre, aber eben weithin einsetzbare Architektur

Ausprägungen verschiedener Kriterien; 1=minimal, 10=maximal

stark

ausge-

prägt

wenig

ausge-

prägt

Wege zu Vaadin – JSF & Co.

13Copyright © 2013 – akquinet AG

0

2

4

6

8

10

12

Fat Client

CGI

JSF & Co.

���� in der Effizienz verbesserte, nach wie vor weithin einsetzbare Architektur

Ausprägungen verschiedener Kriterien; 1=minimal, 10=maximal

stark

ausge-

prägt

wenig

ausge-

prägt

Wege zu Vaadin – Vaadin

14Copyright © 2013 – akquinet AG

0

2

4

6

8

10

12

Fat Client

CGI

JSF & Co.

Vaadin

���� Evolution zu Perfektion: sehr großer Umfang für eine sehr breite Zielgruppe

Ausprägungen verschiedener Kriterien; 1=minimal, 10=maximal

stark

ausge-

prägt

wenig

ausge-

prägt

Geschichte von Vaadin

15Copyright © 2013 – akquinet AG

2000 Start intern

2003 AJAX Rendering

2007 Open Src / GWT

2009 Vaadin 6

2012 Beta Vaadin 7

2013 Vaadin 7

� Stabilität + Aktualität

Architektur von Vaadin: Shared State/Terminal Adapter

16Copyright © 2013 – akquinet AG

via Framework

UI-Bibliothek = Umfangreiche Vorarbeit

17Copyright © 2013 – akquinet AG

Dito: verschiedene Themes für die Render-Engine

Mobile Development – Vaadin TouchKit

• Nach wie vor RIA

• iPhone Look&Feel

• Navigationsmodell

iOS, „Karten“,

Wischen vor/zurück

• Pure Java

18Copyright © 2013 – akquinet AG

Warum ist Vaadin hilfreich? – Effizienz

19Copyright © 2013 – akquinet AG

• Server-Plugin

• Autodeploy

• Remote-Debug

• JRebel

• UI-Element-Sammlung

• styled / tested

• Selenium

• JMeter

• u.v.m.

Effizienz

• Roundtrip

• API / Libraries

• Debugging

• Testbarkeit

Warum ist Vaadin hilfreich? – Varianz / Risiko

20Copyright © 2013 – akquinet AG

• Große UI-Element-Sammlung

• ohne Kinderkrankheiten

• Schnelle erste Version

• qualifiziertes Feedback

• Standard JEE-Technologie

• gehärtet

• incl. Tooling

Varianz

• Feedback

• Standards

• Vorbereitung

Warum ist Vaadin hilfreich? – Akzeptanz

21Copyright © 2013 – akquinet AG

Akzeptanz

• Nutzen

• Einfachheit

• Einstellung

• tats. Nutzung

• erwartungskonforme UI

• Style und Usability

• bis TouchKit - iPhone

• Zeit für Business-Logik

• schnelles Feedback

• Breite Basis für QA

• z.B. UI-Testing

Agenda

• Was sind tägliche Herausforderungen?

• Warum ist Vaadin bei deren Bewältigung hilfreich?

• Wie wird in Vaadin eine Anwendung entwickelt?

• Womit anfangen?

22Copyright © 2013 – akquinet AG

Basis der Vaadin-Architektur

• Client State im Hinter-

grund abgewickelt

• Erstellen von Widgets

(analog Swing / SWT)

auf dem Server

• Verwenden von Web /

JEE Container

• Fokus auf spezifische

Logik (türkis)

23Copyright © 2013 – akquinet AG

UI für spezifische

Use Cases

Darstellung im

Browser

Kommunikation /

State

Theme /

Design

Data Binding

Spezifische Business-Logik und Datenhaltung

JVM

Sprung in den Code: init()

@Inject

Notificator notificator;

@Override

public void init() {

this.i18nLocaleConfig.setLocale(getLocale());

Window windowMain = new Window("Officewerker");

this.environmentConfig.setWindow(windowMain);

this.notificatorConfig.setWindow(windowMain);

try {

windowMain.setContent((ComponentContainer) this.mainPresenter

.getView().getComponent());

windowMain.setName("Officewerker");

} catch (IllegalStateException e) {

((WebApplicationContext) getContext()).getHttpSession()

.invalidate();

close();

}

setMainWindow(windowMain);

setTheme("officewerker");

}

24Copyright © 2013 – akquinet AG

Fenster analog Swing

MVP ist eine Option

Eigenes Theme

main() von vaadin (6)

Sprung in den Code: LoginComponent

public void init() {

setSizeFull();

Toolbar toolbar = new Toolbar(

this.i18n.get("login.title"), null);

this.textFieldMandator = new TextField(

this.i18n.get("login.label.mandator"));

this.textFieldMandator.setWidth("100%");

this.textFieldMandator.setTabIndex(1);

this.textFieldMandator.focus();

this.textFieldMandator.setDebugId("loginMandant");

this.textFieldMandator.addStyleName("styleid-loginMandant");

this.textFieldLogin = new TextField(

this.i18n.get("login.label.login"));

this.textFieldLogin.setWidth("100%");

this.textFieldLogin.setTabIndex(2);

this.textFieldLogin.setDebugId("loginName");

this.textFieldLogin.addStyleName("styleid-loginName");

HorizontalLayout layoutLoginMandator = new HorizontalLayout();

layoutLoginMandator.setWidth("100%");

layoutLoginMandator.setSpacing(true);

layoutLoginMandator.addComponent(this.textFieldMandator);

layoutLoginMandator.addComponent(this.textFieldLogin);

25Copyright © 2013 – akquinet AG

TextField analog Swing

Panels analog Swing

Internationalisierung

Vorbereitung funkt. Test

Sprung in den Code: init() + LoginComponent

Copyright © 2013 – akquinet AG

Sprung in den Code: init() + LoginComponent – HTML

Copyright © 2013 – akquinet AG

Sprung in den Code: init() + LoginComponent – HTML

Copyright © 2013 – akquinet AG

Vaadin Entwicklungsumgebung

29Copyright © 2013 – akquinet AG

IDE (z.B. Eclipse)

Dev Server (z.B.

Glassfish)

Repository (z.B. SVN)

Build (z.B. Maven)

CI (z.B. Jenkins)

Functional Test (z.B.

Selenium)

PerformanceTest (z.B.

JMeter)

Develop /

Manage

Build

Test/Run

Server/DebugVisual Designer

Core Quality

Vaadin Entwicklungsumgebung – Performance Test

• disable-xsrf-protection

(in vaadin)

• Record via JMeter HTTP Proxy

+ Cookie Manager

(oder kopiere aus F12 = Developer Tools von Chrome, Firefox & Co.)

• Die Aufzeichnung MUSS nachgearbeitet werden

Einbau von Assertions, zufällige Auswahl des Testdatensatzes;

hilfreich dabei: das UIDL-Protokoll ist „lesbar“

• Debug-IDs sind mehr als wertvoll

(regexp-Extraktion ist nervig)

(alternativ Style-ID)

• Bottleneck ist der Server

30Copyright © 2013 – akquinet AG

Data Binding – SQL-Container

3119.06.2013Copyright © 2013 – akquinet AG

• Analog „Datenbindung“ VB6ff.

• Direkter Zugriff auf die Datenbank

• Erstellung der Oberfläche

(analog „Runtime Scaffold“ in e.g. Grails)

- Tabelle mit Zeilen / Spalten

- „Form“ mit einer Zeile + Inhalten (Editing)

- einige Beeinflussungen trotz Automatismus

• Trotzdem: Use with extreme caution!- direkter DB-Zugriff ist nie sauber

- wann von „Zusatz“ auf „strukturell richtig“ schwenken?

- keine schlechte Technik – schwierige Struktur

• Fazit: für dauerhaft simple, gut kommunizierte Situationen

Details zur Entwicklung – JavaScript Bridge

• Aufruf von beliebigem JavaScript

• Two-Way

vaadin.forceSync() = JS 2 vaadin

getWindow().executeJavaScript(…) = vaadin 2 JS

• Einschließlich Integration via HTML5

(e.g. HTML postMessage(…))

• Beispiel: Integration mit Bonita

� einen kleinen TEIL einer großen

Anwendung mit vaadin umsetzen

32Copyright © 2013 – akquinet AG

Rechts: außen Bonita, innen vaadin:(Klick auf „Choose“ in vaadin führt den Prozess in Bonita fort)

Details zur Entwicklung – TouchKit

• Spezielles Window

setMainWindow(new TouchKitWindow());

i.e. gleiche Metaper

• Navigation nach Links und rechts

• Style (mobile)

33Copyright © 2013 – akquinet AG

Quelle: Book of vaadin

Agenda

• Was sind tägliche Herausforderungen?

• Warum ist Vaadin bei deren Bewältigung hilfreich?

• Wie wird in Vaadin eine Anwendung entwickelt?

• Womit anfangen?

34Copyright © 2013 – akquinet AG

Wo fange ich an?

Eine WARNUNG vorab:

Vaadin entbindet nicht von

• einem klaren Case

• guter Projektmethodik

• permanentem Feedback

• sauberer Architektur

(aber unterstützt dies)

35Copyright © 2013 – akquinet AG 35

Wo fange ich an?

36Copyright © 2013 – akquinet AG

Tutorials e.g. JavaMagazin

Book ofVaadin(auch gedruckt)

Community

(vaadin.com)

Solution Partner

(e.g. akquinet)

Fazit und Wrap-Up

• Streng typisierte Web-Entwicklung

• Pure and Full Java

• Evolution Richtung Perfektion

bzgl. Effizienz / Varianz / Akzeptanz

• Legen Sie los!

37Copyright © 2013 – akquinet AG

FRAGEN?

Backup

3819.06.2013Copyright © 2013 – akquinet AG

Wie können wir Sie unterstützen?

39Copyright © 2013 – akquinet AG

4019.06.2013

Ihre Ansprechpartner

Copyright © 2013 – akquinet AG

Sebastian Rothbucher

Analyst / Developer / Berater

akquinet engineering

GmbH

0157-738 657 78

sebastian.rothbucher@akquinet.de

Olaf Lange

Geschäftsführer

akquinet engineering

GmbH

040-88173-2412

0179-121 42 06

olaf.lange@akquinet.de