Moderne Web- Anwendungen mit Oliver.Damm@akquinet.de September 2013
Web- Anwendungen mit Vaadin??? <{ 2
Agenda Was sind die typischen Herausforderungen? Warum ist Vaadin dabei hilfreich? Wie wird mit Vaadin entwickelt? Womit anfangen? 3
Agenda Was sind die typischen Herausforderungen? Warum ist Vaadin dabei hilfreich? Wie wird mit Vaadin entwickelt? Womit anfangen? 4
Was sind tägliche Herausforderungen? Effizienz Roundtrip API / Libraries Debugging Testbarkeit 5
Was sind tägliche Herausforderungen? Varianz Feedback Standards Vorbereitung 6
Was sind tägliche Herausforderungen? Akzeptanz Nutzen Einfachheit Einstellung tats. Nutzung 7
Agenda Was sind die typischen Herausforderungen? Warum ist Vaadin dabei hilfreich? Wie wird mit Vaadin entwickelt? Womit anfangen? 8
Was ist Vaadin? Rich Internet ApplicaBons = RIA (im Browser) Auf Desktop- Niveau für die Anwender MiGels Komponenten (wie SWT / Swing) für die Entwickler In pure Java entwickeln Streng typisierte Web- Entwicklung 9
Wege zu Vaadin Fat Client (Ausgangspunkt) 12 stark 10 ausgeprägt 8 6 4 wenig 2 ausgeprägt 0 Fat Client maximaler Umfang für einen kleinen Kreis 10
Wege zu Vaadin CGI 12 stark 10 ausgeprägt 8 6 4 wenig 2 ausgeprägt 0 Fat Client CGI sehr rudimentäre, aber eben weithin einsetzbare Architektur 11
Wege zu Vaadin JSF & Co. 12 stark 10 ausgeprägt 8 6 4 wenig 2 ausgeprägt 0 Fat Client CGI JSF & Co. in der Effizienz verbesserte, nach wie vor weithin einsetzbare Architektur 12
Wege zu Vaadin Vaadin 12 stark 10 ausgeprägt 8 6 4 wenig 2 ausgeprägt 0 Fat Client CGI JSF & Co. Vaadin EvoluBon zu PerfekBon: sehr großer Umfang für eine sehr breite Zielgruppe 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 14
Architektur von Vaadin - Shared State/Terminal Adapter via Framework 15
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
Mobile Development: Vaadin TouchKit Nach wie vor RIA Nach wie vor Pure Java ios Look & Feel Neutraler Look möglich NavigaBonsmodell Listen scrollen, Navigaeon Bar 17
Warum ist Vaadin hilfreich? Effizienz Effizienz Roundtrip API / Libraries Debugging Testbarkeit Maven, Hot Deployment, JRebel UI Komponenten Sammlung Full Java Remote Debugging JUnit Selenium JMeter 18
Warum ist Vaadin hilfreich? Varianz / Risiko Schnelle erste Version Qualifiziertes Feedback Standard JEE- Technologie Keine Kinderkrankheiten Gehärtet Varianz Feedback Standards Vorbereitung Große UI Komponenten Sammlung 19
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
Agenda Was sind die typischen Herausforderungen? Warum ist Vaadin dabei hilfreich? Wie wird mit Vaadin entwickelt? Womit anfangen? 21
Basis der Vaadin- Architektur Darstellung im Browser Kommunikation / State UI für Use Cases Theme / Design Data Binding Client State im Hinter- grund abgewickelt Erstellen von Kompo- nenten auf dem Server Verwenden von Web / JEE Container Fokus auf spezifische Logik Business-Logik und Datenhaltung JVM 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()); Page.current().setTitle("Officewerker"); Fenster analog Swing MVP ist eine Opeon } 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"); 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); Internaeonalisierung TextField analog Swing Vorbereitung Oberflächentest Panels analog Swing 24
Sprung in den Code: init() + LoginComponent 25
Sprung in den Code: init() + LoginComponent HTML 26
Details zur Entwicklung Data Binding Durchgängiges Model über alle Komponenten Property, Item, Container Basis ImplemenBerungen vorhanden Bean, SQL Weitere ImplemenBeren über Add- Ons verfügbar JPA, Paged Eigene ImplemenBerung möglich Für Einbindung der eigenen Business- Schicht 20.09.13 27
Details zur Entwicklung TouchKit Spezielles Window setcontent(new TouchKitWindow()); NavigaBon nach Links und rechts Style (mobile) Quelle: Book of vaadin 28
Details zur Entwicklung - Umgebung Unterstützung der gängigen IDEs Eclipse, Netbeans, IntelliJ Gut in Build/CI integrierbar Maven, Gradle Jenkins, Hudson CVS, Subversion, Git Testbarkeit Unirest: Hohe Abdeckung möglich Oberflächentest: Selenium oder Testbench Performancetest: JMeter 29
Agenda Was sind tägliche Herausforderungen? Warum ist Vaadin bei deren Bewälegung hilfreich? Wie wird in Vaadin eine Anwendung entwickelt? Womit anfangen? 30
Wo fange ich an? Loslegen! Leichter Einseeg Schnell erste Ergebnisse Achtung: Vaadin hilf, ist aber nur eine Technologie! Klare Anforderungen Gute Projektmethodik Permantes Feedback Sauberer Architektur 31
Wo fange ich an? Tutorials e.g. JavaMagazin PDF, gedruckt Book of Vaadin Comm unity vaadin.com e.g. akquinet Solution Partner 32
Fazit und Wrap- Up Streng typisierte Web- Entwicklung Pure and Full Java EvoluBon Richtung PerfekBon bzgl. Effizienz, Varianz, Akzeptanz Legen Sie los! FRAGEN? 33