Moderne Web-Anwendungen mit Vaadin...Moderne Web-Anwendungen mit Vaadin [email protected] Juni 2013

Moderne Web-Anwendungen mit Vaadin

[email protected]

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?


Agenda




• Womit anfangen?


Was sind tägliche Herausforderungen?

Effizienz

• Roundtrip

• API / Libraries

• Debugging

• Testbarkeit



Varianz

• Feedback

• Standards

• Vorbereitung



Akzeptanz

• Nutzen

• Einfachheit

• Einstellung

• tats. Nutzung


Agenda




• Womit anfangen?


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


Wege zu Vaadin – Fat Client (Ausgangspunkt)

�� maximaler Umfang für einen kleinen Kreis


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


0

2

4

6

8

10

12

Fat Client

CGI

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


stark

ausge-

prägt

wenig

ausge-

prägt

Wege zu Vaadin – JSF & Co.


0

2

4

6

8

10

12

Fat Client

CGI

JSF & Co.

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


stark

ausge-

prägt

wenig

ausge-

prägt

Wege zu Vaadin – Vaadin


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


stark

ausge-

prägt

wenig

ausge-

prägt

Geschichte von Vaadin


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


via Framework

UI-Bibliothek = Umfangreiche Vorarbeit


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


Warum ist Vaadin hilfreich? – Effizienz


• 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


• 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


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




• Womit anfangen?


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)


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");

}


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);


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


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


Vaadin Entwicklungsumgebung


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


Data Binding – SQL-Container


• 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


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)


Quelle: Book of vaadin

Agenda




• Womit anfangen?


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?


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!


FRAGEN?

Backup


Wie können wir Sie unterstützen?


4019.06.2013

Ihre Ansprechpartner


Sebastian Rothbucher

Analyst / Developer / Berater

akquinet engineering

GmbH

0157-738 657 78

[email protected]

Olaf Lange

Geschäftsführer

akquinet engineering

GmbH

040-88173-2412

0179-121 42 06

[email protected]

Documents

Moderne Web-Anwendungen mit Vaadin...Moderne Web-Anwendungen mit Vaadin [email protected] Juni 2013