Moderne Web-Anwendungen mit Vaadin

Transkript

1 Moderne Web-Anwendungen mit Vaadin September 2013

2 Web-Anwendungen mit Vaadin??? <{ 2

3 Agenda Was sind tägliche Herausforderungen? Warum ist Vaadin bei deren Bewältigung hilfreich? Wie wird in Vaadin eine Anwendung entwickelt? Womit anfangen? 3

4 Agenda Was sind tägliche Herausforderungen? Warum ist Vaadin bei deren Bewältigung hilfreich? Wie wird in Vaadin eine Anwendung entwickelt? Womit anfangen? 4

5 Was sind tägliche Herausforderungen? Effizienz Roundtrip API / Libraries Debugging Testbarkeit 5

6 Was sind tägliche Herausforderungen? Varianz Feedback Standards Vorbereitung 6

7 Was sind tägliche Herausforderungen? Akzeptanz Nutzen Einfachheit Einstellung tats. Nutzung 7

8 Agenda Was sind tägliche Herausforderungen? Warum ist Vaadin bei deren Bewältigung hilfreich? Wie wird in Vaadin eine Anwendung entwickelt? Womit anfangen? 8

9 Wege zu Vaadin Fat Client(Ausgangspunkt) stark 10 ausgeprägt wenig 2 ausgeprägt 0 Fat Client maximaler Umfang für einen kleinen Kreis 9

10 Wege zu Vaadin CGI stark 10 ausgeprägt wenig 2 ausgeprägt 0 Fat Client CGI sehr rudimentäre, aber eben weithin einsetzbare Architektur 10

11 Wege zu Vaadin JSF & Co stark 10 ausgeprägt wenig 2 ausgeprägt 0 Fat Client CGI JSF & Co. in der Effizienz verbesserte, nach wie vor weithin einsetzbare Architektur 11

12 Wege zu Vaadin Vaadin stark 10 ausgeprägt wenig 2 ausgeprägt 0 Fat Client CGI JSF & Co. Vaadin Evolution zu Perfektion: sehr großer Umfang für eine sehr breite Zielgruppe 12

13 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 Streng typisierte Web-Entwicklung 13

14 Geschichte von Vaadin 2000 Start intern 2003 AJAX Rendering 2007 Open Src / GWT 2009 Vaadin Beta Vaadin Vaadin 7 Stabilität + Aktualität 14

15 Architektur von Vaadin: Shared State/Terminal Adapter via Framework 15

16 Umfangreiche Vorarbeit - UI-Bibliothek 45+ Komponenten 300+ im Add-on Dir 5+ Layouts 3 Themes 1 weitere in Arbeit Drag & Drop Support Touch Events CSS + SASS 16

17 Mobile Development: Vaadin TouchKit Nach wie vor RIA Nach wie vor Pure Java ioslook & Feel Neutraler Look möglich Navigationsmodell Listen scrollen, Navigation Bar 17

18 Warumist Vaadinhilfreich? Effizienz Effizienz Roundtrip API / Libraries Debugging Testbarkeit Maven, Hot Deployment, JRebel UI Komponenten Sammlung Full Java Remote Debugging JUnit Selenium JMeter 18

19 Warum ist Vaadin hilfreich? Varianz / Risiko Schnelle erste Version Qualifiziertes Feedback Varianz Feedback Standards Vorbereitung Standard JEE-Technologie Keine Kinderkrankheiten Gehärtet Große UI Komponenten Sammlung 19

20 Warum ist Vaadin hilfreich? Akzeptanz Erwartungskonforme UI Style und Usability Mobile Akzeptanz Nutzen Einfachheit Einstellung tats. Nutzung Zeit für Business-Logik Schnelles Feedback 20

21 Agenda Was sind tägliche Herausforderungen? Warum ist Vaadin bei deren Bewältigung hilfreich? Wie wird in Vaadin eine Anwendung entwickelt? Womit anfangen? 21

22 Basis der Vaadin-Architektur Darstellung im Browser Kommunikation / State UI für spezifische Use Cases Theme / Design Data Binding Client State im Hintergrund abgewickelt Erstellen von Widgets (analog Swing / SWT) auf dem Server Verwenden von Web / JEE Container Fokus auf spezifische Logik (türkis) Spezifische Business-Logik und Datenhaltung JVM 22

23 Sprung in den Code: officewerker ) public class OfficewerkerApplicationUI extends UI { Eigener Notificator public void init(vaadinrequest request) { main() von Vaadin this.i18nlocaleconfig.setlocale(getlocale());... } setcontent((componentcontainer) this.mainpresenter.getview().getcomponent()); Page.current().setTitle("Officewerker"); Fenster analog Swing MVP ist eine Option } 23

24 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.setid("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); Internationalisierung TextField analog Swing Vorbereitung Oberflächentest Panels analog Swing Copyright 2013 akquinetag 24

25 Sprung in den Code: init() + LoginComponent

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

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

28 Vaadin Entwicklungsumgebung Visual Designer Core IDE (z.b. Eclipse) Server/Debug Quality CI (z.b. Jenkins) Develop/ Manage Build (z.b. Maven) Build Dev Server (z.b. Glassfish) Functional Test (z.b. Selenium) PerformanceTest (z.b. JMeter) Test/Run Repository (z.b. SVN) 28

29 Details zur Entwicklung Performance Test EC² x-large zufällig 10 (dann 500) von 10k Rechnungen bis 200 parallele (leicht versetzte) Threads JMeter/ JVisualVM Highlights Antwortzeit (Selftime): ~70ms je Rechnung im Durchschnitt 3 von 4 in weniger als ~150ms >50% ist DB, 98% Backend-related Vaadin ist nicht mehr messbar (0%) Highlights Speicherverbrauch: 900k Instanzen Rechnungs-Bean Instanzen teuerste Vaadin-Klasse (Rework im) Backend bestimmt Performance Siehe auch etc

30 Details zur Entwicklung Integration Aufruf von beliebigem JavaScript (massiv verbessert in Vaadin 7) vaadin.forcesync() = JS 2 vaadin(vaadin 6) JavaScript.getCurrent().addFunction = JS 2 vaadin(vaadin 7) getwindow().executejavascript = vaadin 2 JS (Vaadin 6) JavaScript.getCurrent().execute = vaadin 2 JS (Vaadin 7) Einschließlich Integration via HTML5 (e.g. HTML5 postmessage( )) Beispiel: Integration mit Bonita: Kundenauswahl (situativ) verbessert -Chooseruft Bonitaauf einen kleinen TEIL einer großen Anwendung mit vaadin umsetzen 30

31 Details zur Entwicklung Integration Klein, smart, situativ anfangen (können) überschaubares Risiko weiteres Beispiel: Facebook-like Wall für Kundenservice (vgl. Projekt der MetLife, NYC: (http://www.10gen.com/press/metlife-leapfrogs-insuranceindustry-mongodb-powered-big-data-application)) Verwendung von Vaadin(7), CouchDB, MVP, CDI, etc. - Auswahl Standard-Posts in Bonita u.v.a.m

32 Agenda Was sind tägliche Herausforderungen? Warum ist Vaadin bei deren Bewältigung hilfreich? Wie wird in Vaadin eine Anwendung entwickelt? Womit anfangen? 32

33 Wofange ich an? Loslegen! Leichter Einstieg Schnell erste Ergebnisse Achtung: Vaadin hilft, ist aber nur eine Technologie! Klare Anforderungen Gute Projektmethodik Permantes Feedback Sauberer Architektur Copyright 2013 akquinet AG 33

34 Wofange ich an? Tutorials e.g. JavaMagazin (auch gedruckt) Book of Vaadin Comm unity (vaadin.com) (e.g. akquinet) Solution Partner 34

35 Wofange ich an? Peter Palchinsky( ) ist Ihr Freund! Durchstich mit einem Use Case einfach machen Muster etablieren (upfront, vorhersagbar) und wachsen 35

36 Fazit und Wrap-Up Streng typisierte Web-Entwicklung Pure and Full Java Evolution Richtung Perfektion bzgl. Effizienz / Varianz / Akzeptanz Legen Sie los! FRAGEN? Copyright 2013 akquinetag 36

37 Backup

38 Wie können wir Sie unterstützen? 38

39 Ihre Ansprechpartner Olaf Lange Geschäftsführer akquinet engineering GmbH Sebastian Rothbucher Analyst / Developer / Berater akquinet engineering GmbH