Moderne Web-Anwendungen mit Vaadin

Transkript

1 Moderne Web-Anwendungen mit Vaadin Juni 2013

2

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

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

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

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

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

10 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

11 Wege zu Vaadin Fat Client(Ausgangspunkt) 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

12 Wege zu Vaadin CGI 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

13 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 Ausprägungen verschiedener Kriterien; 1=minimal, 10=maximal 13

14 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 Ausprägungen verschiedener Kriterien; 1=minimal, 10=maximal 14

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

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

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

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

19 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

20 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

21 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

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

23 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

24 Sprung in den Code: Notificator 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

25 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

26 Sprung in den Code: init() + LoginComponent

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

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

29 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

30 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

31 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

32 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

33 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

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

35 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

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

37 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

38 Backup

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

40 Ihre Ansprechpartner Olaf Lange Geschäftsführer akquinet engineering GmbH Sebastian Rothbucher Analyst / Developer / Berater akquinet engineering GmbH [email protected]