Moderne Web-Anwendungen mit Vaadin

Moderne Web-Anwendungen mit Vaadin Sebastian.Rothbucher@akquinet.de Juni 2013

19.06.2013 2

Web-Anwendungen mit Vaadin??? <{ 3

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

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

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

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

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

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

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 10

Wege zu Vaadin Fat Client(Ausgangspunkt) 12 8 6 4 stark 10 ausgeprägt wenig 2 ausgeprägt 0 Fat Client maximaler Umfang für einen kleinen Kreis Ausprägungen verschiedener Kriterien; 1=minimal, 10=maximal 11

Wege zu Vaadin CGI 12 8 6 4 stark 10 ausgeprägt wenig 2 ausgeprägt 0 Fat Client CGI sehr rudimentäre, aber eben weithin einsetzbare Architektur Ausprägungen verschiedener Kriterien; 1=minimal, 10=maximal 12

Wege zu Vaadin JSF & Co. 12 8 6 4 stark 10 ausgeprägt wenig 2 ausgeprägt 0 Fat Client CGI JSF & Co. in der Effizienz verbesserte, nach wie vor weithin einsetzbare Architektur Ausprägungen verschiedener Kriterien; 1=minimal, 10=maximal 13

Wege zu Vaadin Vaadin 12 8 6 4 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 Ausprägungen verschiedener Kriterien; 1=minimal, 10=maximal 14

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 15

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

UI-Bibliothek = Umfangreiche Vorarbeit Dito: verschiedene Themes für die Render-Engine 17

Mobile Development Vaadin TouchKit Nach wie vor RIA iphone Look&Feel Navigationsmodell ios, Karten, Wischen vor/zurück Pure Java 18

Warumist Vaadinhilfreich? Effizienz Effizienz Roundtrip API / Libraries Debugging Testbarkeit Server-Plugin Autodeploy Remote-Debug JRebel UI-Element-Sammlung styled/ tested Selenium JMeter u.v.m. 19

Warum ist Vaadin hilfreich? Varianz / Risiko Große UI-Element-Sammlung ohne Kinderkrankheiten Schnelle erste Version qualifiziertes Feedback Varianz Feedback Standards Vorbereitung Standard JEE-Technologie gehärtet incl. Tooling 20

Warum ist Vaadin hilfreich? Akzeptanz erwartungskonforme UI Style und Usability bis TouchKit- iphone Akzeptanz Nutzen Einfachheit Einstellung tats. Nutzung Zeit für Business-Logik schnelles Feedback Breite Basis für QA z.b. UI-Testing 21

Agenda Was sind tägliche Herausforderungen? Warum ist Vaadin bei deren Bewältigung hilfreich? Wie wird in Vaadin eine Anwendung entwickelt? Womit anfangen? 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 23

Sprung in den Code: init() @Inject Notificator notificator; @Override public void init() { this.i18nlocaleconfig.setlocale(getlocale()); Window windowmain = new Window("Officewerker"); main() von vaadin(6) Fenster analog Swing 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"); MVP ist eine Option Eigenes Theme 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.setdebugid("loginmandant"); this.textfieldmandator.addstylename("styleid-loginmandant"); Internationalisierung TextField analog Swing Vorbereitung funkt. Test 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); Panels analog Swing Copyright 2013 akquinetag 25

Sprung in den Code: init() + LoginComponent

Sprung in den Code: init() + LoginComponent HTML

Sprung in den Code: init() + LoginComponent HTML

Vaadin Entwicklungsumgebung Core Quality IDE (z.b. Eclipse) Visual Designer Server/Debug 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) 29

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 30

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 19.06.2013 31

Details zur Entwicklung JavaScript Bridge Aufruf von beliebigem JavaScript Two-Way vaadin.forcesync() getwindow().executejavascript( ) = JS 2 vaadin = 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 vaadinführt den Prozess in Bonita fort) 32

Details zur Entwicklung TouchKit Spezielles Window setmainwindow(new TouchKitWindow()); i.e. gleiche Metaper Navigation nach Links und rechts Style (mobile) Quelle: Book of vaadin 33

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

Wofange ich an? Eine WARNUNGvorab: Vaadinentbindet nicht von einem klaren Case guter Projektmethodik permanentem Feedback sauberer Architektur (aber unterstützt dies) Copyright 2013 akquinet AG 35

Wofange ich an? Tutorials e.g. JavaMagazin (auch gedruckt) Book of Vaadin Comm unity (vaadin.com) (e.g. akquinet) Solution Partner 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 37

Backup 19.06.2013 38

Wie können wir Sie unterstützen? 39

Ihre Ansprechpartner Olaf Lange Geschäftsführer akquinet engineering GmbH 040-88173-2412 0179-121 42 06 olaf.lange@akquinet.de Sebastian Rothbucher Analyst / Developer / Berater akquinet engineering GmbH 0157-738 657 78 sebastian.rothbucher@akquinet.de 19.06.2013 40