Vaadin - ConceptPeople
Werbung
Moderne Web-Anwendungen mit Vaadin [email protected] September 2013 ??? Copyright © 2013 – akquinet AG <{ Web-Anwendungen mit Vaadin 2 Agenda • Was sind tägliche Herausforderungen? • Warum ist Vaadin bei deren Bewältigung hilfreich? • Wie wird in Vaadin eine Anwendung entwickelt? • Womit anfangen? Copyright © 2013 – akquinet AG 3 Agenda • Was sind tägliche Herausforderungen? • Warum ist Vaadin bei deren Bewältigung hilfreich? • Wie wird in Vaadin eine Anwendung entwickelt? • Womit anfangen? Copyright © 2013 – akquinet AG 4 Was sind tägliche Herausforderungen? Effizienz • • • • Copyright © 2013 – akquinet AG Roundtrip API / Libraries Debugging Testbarkeit 5 Was sind tägliche Herausforderungen? Varianz • Feedback • Standards • Vorbereitung Copyright © 2013 – akquinet AG 6 Was sind tägliche Herausforderungen? Akzeptanz • • • • Copyright © 2013 – akquinet AG Nutzen Einfachheit Einstellung tats. Nutzung 7 Agenda • Was sind tägliche Herausforderungen? • Warum ist Vaadin bei deren Bewältigung hilfreich? • Wie wird in Vaadin eine Anwendung entwickelt? • Womit anfangen? Copyright © 2013 – akquinet AG 8 Wege zu Vaadin – Fat Client (Ausgangspunkt) 12 stark 10 ausgeprägt8 6 4 Fat Client wenig 2 ausgeprägt 0 maximaler Umfang für einen kleinen Kreis Copyright © 2013 – akquinet AG 9 Wege zu Vaadin – CGI 12 stark 10 ausgeprägt8 6 4 wenig 2 ausgeprägt Fat Client CGI 0 sehr rudimentäre, aber eben weithin einsetzbare Architektur Copyright © 2013 – akquinet AG 10 Wege zu Vaadin – JSF & Co. 12 stark 10 ausgeprägt8 6 4 wenig 2 ausgeprägt Fat Client CGI JSF & Co. 0 in der Effizienz verbesserte, nach wie vor weithin einsetzbare Architektur Copyright © 2013 – akquinet AG 11 Wege zu Vaadin – Vaadin 12 stark 10 ausgeprägt8 6 4 wenig 2 ausgeprägt Fat Client CGI JSF & Co. Vaadin 0 Evolution zu Perfektion: sehr großer Umfang für eine sehr breite Zielgruppe Copyright © 2013 – akquinet AG 12 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 Copyright © 2013 – akquinet AG 13 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 Copyright © 2013 – akquinet AG 14 Architektur von Vaadin: Shared State/Terminal Adapter via Framework Copyright © 2013 – akquinet AG 15 Umfangreiche Vorarbeit - UI-Bibliothek Copyright © 2013 – akquinet AG • 45+ Komponenten 300+ im Add-on Dir • 5+ Layouts • 3 Themes 1 weitere in Arbeit • Drag & Drop Support • Touch Events • CSS + SASS 16 Mobile Development: Vaadin TouchKit Copyright © 2013 – akquinet AG • Nach wie vor RIA • Nach wie vor Pure Java • iOS Look & Feel Neutraler Look möglich • Navigationsmodell Listen scrollen, Navigation Bar 17 Warum ist Vaadin hilfreich? – Effizienz Effizienz • Maven, Hot Deployment, JRebel • Roundtrip • API / Libraries • Debugging • Testbarkeit • UI Komponenten Sammlung • Full Java • Remote Debugging • JUnit • Selenium • JMeter Copyright © 2013 – akquinet AG 18 Warum ist Vaadin hilfreich? – Varianz / Risiko • Schnelle erste Version • Qualifiziertes Feedback • Standard JEE-Technologie • Keine Kinderkrankheiten • Gehärtet Varianz • Feedback • Standards • Vorbereitung Copyright © 2013 – akquinet AG • Große UI Komponenten Sammlung 19 Warum ist Vaadin hilfreich? – Akzeptanz • Erwartungskonforme UI • Style und Usability • Mobile • Zeit für Business-Logik • Schnelles Feedback Akzeptanz • Nutzen • Einfachheit • Einstellung • tats. Nutzung Copyright © 2013 – akquinet AG 20 Agenda • Was sind tägliche Herausforderungen? • Warum ist Vaadin bei deren Bewältigung hilfreich? • Wie wird in Vaadin eine Anwendung entwickelt? • Womit anfangen? Copyright © 2013 – akquinet AG 21 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 Copyright © 2013 – akquinet AG 22 Sprung in den Code: init() @Theme(“officewerker“) public class OfficewerkerApplicationUI extends UI { Eigener Theme @Inject Notificator notificator; ... @Override public void init(VaadinRequest request) { main() von Vaadin this.i18nLocaleConfig.setLocale(getLocale()); ... setContent((ComponentContainer) this.mainPresenter .getView().getComponent()); Fenster analog Swing Page.current().setTitle("Officewerker"); } MVP ist eine Option } Copyright © 2013 – akquinet AG 23 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"); Internationalisierung TextField analog Swing Vorbereitung Oberflächentest 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); Copyright © 2013 – akquinet AG Panels analog Swing 24 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 Core Quality IDE (z.B. Eclipse) Visual Designer CI (z.B. Jenkins) Server/Debug Build (z.B. Maven) Develop / Manage Build Functional Test (z.B. Selenium) Dev Server (z.B. Glassfish) Test/Run PerformanceTest (z.B. JMeter) Repository (z.B. SVN) Copyright © 2013 – akquinet AG 28 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 (Self time): • ~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 • 2.800 Instanzen „teuerste“ Vaadin-Klasse (Rework im) Backend bestimmt Performance Siehe auch http://blog-de.akquinet.de/2013/07/02/vaadin-unter-last-teil-1-aufsetzen-der-testumgebung/ etc. Copyright © 2013 – akquinet AG 24.09.2013 29 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 - Choose ruft Bonita auf einen kleinen TEIL einer großen Anwendung mit vaadin umsetzen Copyright © 2013 – akquinet AG 30 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 Copyright © 2013 – akquinet AG 24.09.2013 31 Agenda • Was sind tägliche Herausforderungen? • Warum ist Vaadin bei deren Bewältigung hilfreich? • Wie wird in Vaadin eine Anwendung entwickelt? • Womit anfangen? Copyright © 2013 – akquinet AG 32 Wo fange 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 Wo fange ich an? Tutorials (auch gedruckt) Book of Vaadin Comm unity (e.g. akquinet) Copyright © 2013 – akquinet AG e.g. JavaMagazin (vaadin.com) Solution Partner 34 Wo fange ich an? • Peter Palchinsky (1875-1929) ist Ihr Freund! • Durchstich mit einem Use Case – einfach machen • Muster etablieren (upfront, vorhersagbar) und wachsen Copyright © 2013 – akquinet AG 35 Fazit und Wrap-Up • Streng typisierte Web-Entwicklung • Pure and Full Java • Evolution Richtung Perfektion bzgl. Effizienz / Varianz / Akzeptanz • Legen Sie los! Copyright © 2013 – akquinet AG FRAGEN? 36 Backup Copyright © 2013 – akquinet AG 24.09.2013 37 Wie können wir Sie unterstützen? Copyright © 2013 – akquinet AG 38 Ihre Ansprechpartner Copyright © 2013 – akquinet AG Olaf Lange Sebastian Rothbucher Geschäftsführer akquinet engineering GmbH Analyst / Developer / Berater akquinet engineering GmbH 040-88173-2412 0179-121 42 06 [email protected] 0157-738 657 78 [email protected] 24.09.2013 39
