Moderne Web-Anwendungen mit Vaadin...Moderne Web-Anwendungen mit Vaadin...
Transcript of Moderne Web-Anwendungen mit Vaadin...Moderne Web-Anwendungen mit Vaadin...
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
Olaf Lange
Geschäftsführer
akquinet engineering
GmbH
040-88173-2412
0179-121 42 06