Über den Tellerrand. Trainer, Berater, Entwickler. Schwerpunkte Frontend-Architektur, Entwicklung von Web-Anwendungen, Web-Performance-Optimierung

Transkript

1 Über den Tellerrand Überblick JSF-Bibliotheken und Tools für den praktischen Einsatz Version: 1.0 Orientation in Objects GmbH Weinheimer Str Mannheim Ihr Sprecher Thomas Asel Trainer, Berater, Entwickler Schwerpunkte Frontend-Architektur, Entwicklung von Web-Anwendungen, 2 1

2 Luxusprobleme: Die Qual der Wahl 3 Luxusprobleme: Die Qual der Wahl 4 2

3 Luxusprobleme: Die Qual der Wahl CDK JSFUnit Richfaces Tools (Eclipse) CODI ExtVal Test Commons 5 Luxusprobleme: Die Qual der Wahl 6 3

4 tl;dr Wir finden wir heraus, was zu uns passt? 7 OmniFaces "Apache Commons für JSF": Kaum UI-Komponenten Focus: Produktivität Standard-Implementierungen für häufige Anwendungsfälle Schließt Lücke zur nächsten JSF Spezifikation (JSF 2.2) z.b.: HTML5-Attribute Performance Einfache Komponenten zur Verbesserung des Laufzeitverhaltens von JSF-Anwendungen 8 4

5 OmniFaces - Performance o:cache Caching von gerendertem Markup GzipResponseFilter Kompression von textbasierten Resourcen GZIP spart ca. 70 % der Bandbreite (falls der Client es versteht) CombinedResourceHandler Packt JS und CSS in jeweils eine Datei pro Seite Reduziert # Reuests / Seite Caching-Konzept entwickeln! CDNResourceHandler auslagern statischer Ressourcen auf externe Knoten Verringert Netzwerklast, entlastet Application-Server 9 Annotation-basiertes URL-Rewriting für JSF Filter-basiert Mapping von Pretty-URLs auf (dynamische) ViewId RESTFul Applications SEO -> Fazit JSF 2.0 addressiert bereits einige Features JSF 2.2 wird noch mehr davon bieten PrettyFaces ermöglicht aber feingranularere Steuerung 10 5

6 Richfaces CDK Problem: Entwicklung von Non-Composit-Components aufwändig Renderer Komponentenklasse Tag Taghandler Ajax-Behaviour Testing Component Development Kit Abstrakte Klassen mit Annotationen versehen Templating Facility Rendering-Code deklarativ entwickeln analog Composite Components 11 JSF-Unit Wie testet man (Non-UI-)JSF-Komponenten, die Laufzeitabhängigkeiten haben? Valiadator#validate(FacesContext context, UIComponent component, Object value) JSF-Unit In-Container Test Server- public void testinitialpage(jsfserversession server, SFClientSession client) throws IOException { Assert.assertEquals("/index.xhtml", server.getcurrentviewid()); client.setvalue("name", "OiO"); client.click("submit_button"); } UIComponent greeting = server.findcomponent("greeting"); Assert.assertTrue(greeting.isRendered()); 12 6

7 MyFaces - Umfeld Orchestra CODI Unterprojekte zu JSF 1.x Zeiten entstanden Teilweise mit JSF 2.0 in den Standard aufgenommen ExtVal Test Commons 13 Test Problemstellung: Test von (Non-UI) JSF- Komponenten mit Laufzeitabhängigkeiten Beispiel: Valiadator#validate(FacesContext context, UIComponent component, java.lang.object value) Unit-Testing? Features Mock-Objekte JSF-API Servlet API Basisklassen für Unit-Tests 14 7

8 Apache DeltaSpike Noch im Apache Incubator Sammlung mehrer Portable CDI Extensions Module: Core Security JPA Container JSF (Nachfolger von MyFaces CODI) 15 Apache DeltaSpike JSF-Module Typesafety Navigation Statt <naviagation-case> Refactoring von Navigationspfaden Messages Keine Typos Bessere IDE-Unterstützung Scopes WindowScoped ViewScoped (saubere CDI Integration!) ViewAccessScoped RenderScoped Events Before/AfterJSFRequest Before/AfterPhase 16 8

9 JSFInspector Keine Klassischen UI-Komponenten Unterstützt Developer bei der JSF-Anwendungs-Entwicklung inspect:tree Wieviele Komponenten stecken in meinem Komponentenbaum? Welche Komponenten wurden wie oft verwendet? Inspect:lifecycle Welche Phase dauert wie lange? Welche Phasen wurden durchlaufen? Welche Komponenten weisen Validierungsfehler auf?

10 19 RichFaces Quelle: Quelle:

11 RichFaces - Komponentenbibliothek ca. 60 UI-Komponenten Ajax-Mechanismus war Vorlage für f:ajax in JSF 2.0 Server-Push Atmosphere Client-Side Validation (wenige) Mobil-Komponenten Aktuell: RichFaces RichFaces - Framework Skinning Feingranulares CSS.properties Files Komponentenbasierte *.ecss Dateien RichFaces 5: Styling basierend auf LESS und Bootstrap Framework Resource Optimization Zusammenpacken von JavaScript und CSS in jeweils eine Datei Resource Mapping Mapping von Resourcenamen auf alternative Quellen Ajax-Framework Queues Regions 22 11

12 23 Quelle:

13 100+ Komponenten Ansprechendes UI Server-Push Atmosphere Theming Theme Roller Primefaces-Mobile Abstrahiert von JS widgetid 25 Demnächst Primefaces UI Reine JavaScript Widgets Keine JSF-Abhängigkeit Basierend auf jquery Primefaces.NET Kein Scherz: 26 13

14 Demnächst Primefaces UI Reine JavaScript Widgets Keine JSF-Abhängigkeit Basierend auf jquery Primefaces.NET Kein Scherz! 27 Kritikpunkte Geschäftsmodell (kurzes) Crowdfunding Experiment Entwicklung von Features konnten mit Beträgen gesponsert werden Offizielle Ankündigungen nachträglich gelöscht :-( aber Google und das Forum vergessen nichts Freiwillige Bezahlversion der Doku (kurzzeitig) Aktuell: PrimeFaces Elite (Zugang zu Minor Releases) PrimeFaces PRO (Support) Auseinandersetzung mit ICESoft Verunsicherte Nutzer Was wäre im Falle eines Rechtsstreits passiert? Frage: PrimeTechnology in 2 Jahren? 28 14

15 Tipps zur Auswahl von Komponentenbibliotheken 29 Vorbemerkung zur Auswahl Festlegung nicht mit der Wahl der Implementierung sondern der Bibliothek!!! Migration von FooFaces auf BarFaces ist aufwändig Mischen von Bibliotheken ist immer noch problematisch: JavaScript kennt keine Namensräume Jede Bibliothek bringt "ihre" Scripte mit mindestens jquery Versionierung? Anforderungen an Bibliothek sind in der Frühphase meist nur teilweise bekannt Festlegung schon zu Projektstart nicht sinnvoll 30 15

16 Einflussfaktoren Fachliche Anforderungen Technische Anforderungen z.b.: Zielplattformen Team Background Rollenkonzept JavaScript Know-How? 31 Bibliothek oder DIY? Notwendigkeit für Bibliotheken seit JSF 2.0 geringer ResourceHandling Ajax Pretty-Urls / Bookmarkability Composite Components Mit JSF 2.2 gibt s noch mehr: Flows File-Upload HTML5 bietet native Komponenten Datepicker / Calendar Slider Spin-Buttons 32 16

17 Auswahlkriterien: Nichtfunktionale Anforderungen Was entwickeln wir? Projekt oder Produkt? Erweiterbarkeit Verstehen wir Klassenhierarchie? Renderer? Ajax-Handling? Client-Code (JavaScript)? Komponentenmodell Wie nutzen wir die Features in (Komposit-) Komponenten? Wartbarkeit Könnten wir einen kritischen Fehler selbst beheben? Releasezyklen? Community? Support? 33 Auswahlkriterien: Einflüsse auf Entwicklungsmodell Primefaces kapselt JS sehr gut Im Idealfall gar keine Berührungspunkte mit JS Dafür wird es kompliziert, wenn man mal dran muss RichFaces bezüglich JS offener Eingriff bei Bedarf leichter ICEFaces D2D Rendering ACE-Komponenten kapseln PrimeFaces 34 17

18 Anforderung: " und natürlich auch auf mobilen Endgeräten!" 35 Brauchen wir eine Mobile-JSF-Bibliothek? Problem: Wir sind Java-Entwickler In Java haben wir Werkzeuge und Prozesse die für UNS funktionieren aber wir haben keine Erfahrung mit oder 36 18

19 Lösung: Alle (größeren) JSF-Bibliotheken bieten auch eine Mobile-Bibliothek richtig? 37 Quellen:

20 Gerätelandschaft bis vor ca. 2 Jahren: Quelle: 39 Gerätelandschaft heute: 40 20

21 Optimierung für n-ausgabekanäle n > = 3! (Desktop)-Browser Android ios Firefox OS Ubuntu Phone Windows Phone Tablet!= Smartphone Weitere Unterscheidung Nach Geräteklassen Nach Auflösung Abmessung Seitenverhältnis 41 Mobile Optimization done wrong 42 21

22 Mobile Optimization done wrong 43 Mobile Optimization done right Geräteunabhängiges Look & Feel implementieren Klassisches Web-Design HTML5 / CSS3 Stichwort: Responsive Design Zielplattform Tablet: Viel Platz moderne Browser (Desktop-ähnlich) Warum also nicht (normale) Webanwendung auch für Mobile Geräte? Webdesign statt Apple/Android-Look & Feel 44 22

23 Fazit Mobile-Bibliotheken Anforderung: " und natürlich auch auf mobilen Endgeräten!" Was heisst das konkret? Smartphone Tablet Beides?? Was darf es denn sein? Echte Web-Anwendung Gefakte Native-App 45 Unser JSF-Werkzeugkasten Erkennen des User-Agent und austauschen von Templates Fusszeile, Naviagtion, etc. etwas spartanischer CSS JavaScripte Renderer und Renderkits Tipp: Tabellarische Daten lassen sich auch als Listen darstellen Das V in MVC speziellen View für Mobile-Agents Model und Controller bleiben gleich Mobile Bibliotheken bieten einen Mehrwert, wenn anderes Bedienkonzept implementiert werden soll Touch / Gesten-Steuerung 46 23

24 Fazit JSF Ökosystem bietet mehr als nur Komponentenbibliotheken Optik ist kein ausreichendes Auswahlkriterium für Komponentenbibliotheken Es geht auch ganz ohne Komponentenbibliothek Team Know-How sollte hohes Gewicht bei Bewertung haben Besonders hinsichtlich Client-Technologien Optimierung für Mobile Kann aufwändig sein Auch ohne dedizierte Mobile-Bibliothek möglich 47?? Fragen??? Orientation Objects GmbH Weinheimer Str Mannheim

25 Links [21] [25] %2C%20icefaces%2C%20primefaces&cmpt=q [26] [29] [39] [40] [41] Vielen Dank für ihre Aufmerksamkeit! Orientation in Objects GmbH Weinheimer Str Mannheim 25

26 Das haben wir gekauft Komponentenbasierte Entwicklung Gute Wiederverwendbarkeit Deklarative View-Beschreibung Gewollter Technologiebruch: Java XHTML / JS /CSS So nah an Zieltechnologien wie nötig So Abstrakt wie möglich 51 OmniFaces - Komponenten o:tree o:highlight Hervorhebung invalider Eingabefelder o:onloadscript Führt Script bei jedem Laden/Reload aus, auch bei AJAX-Requests nie mehr $(document).ready() o:resourceinclude bettet Response eines Resource Requests auf Servlet/JSP in aktuelle Seite ein Dirty, aber hilfreich für Migrationen 52 26

27 OmniFaces Toolbox GenericEnumConverter SelectItemsConverter Konvertiert komplexe Objekte in SelectItems Kann bei Bedarf leicht erweitert werden FullAjaxExceptionHandler Problem: Exceptions bei Ajax Requests nicht zum Benutzer propagiert ViewExpiredExceptions Redirect als Antwort auf Ajax-Request, falls Exception CharacterEncodingFilter DefaultPhaseListener 53 OmniFaces - Utilities Component getclosestparent() Events addafterphaselistener() Exception unwrap() Faces nie mehr FacesContext.getCurrentInstance().getExternalContext()... addresponseheader() Messages add() createerror () addglobalinfo () addflashglobalinfo () 54 27

28 OmniFaces - weitere Features Erleichtertes (programmatisches) Ajax-Handling Daten via Ajax-Response an Client übergeben Ausführung von Callbacks El-Funktionen Arrays #{of:contains(paramvalues.test, 42)} Converter #{of:maptolist(convertersbean.map)} o:importconstants zugriff auf Konstanten aus EL heraus #{Foo.FOO1} Strings #{of:escapejs(string4)} #{of:encodeurl(string4)} #{of:abbreviate(string1, 20)} HTML5 Renderkit 55 Richfaces Tools Eclipse-Plugin Bessere JSF Unterstützung in Eclipse EL-Unterstützung Syntax-Highlighting Code-Completion Type-Ahead Sprung von xhtml auf Bean Versteht JSF-Annotationen 56 28

29 Problemstellung: JSF-Scopes passen nicht Besser wäre pro Anwendungsfall (= mehrere Requests) Typischerweise Persistence Session / Request Lösungskonzept: Persistence Session über mehrere Requests offen lassen Demarkation durch Conversation Features Conversation-Scope (Spring basiert) Persistence Context in Conversation Scope Flows 57 Problemstellung: CDI-Conversations haben einen fest definierten Start und Endpunkt Orchestra- Features mit CDI-Beans Ausblick: JSF 2.2: Faces Flows Orchestra und CODI weiterhin interessant für Wartung von JSF 1.2 Legacy-Anwendungen 58 29

30 BeanValidation (JSR 303) für JSF Noch aus JSF 1.2 Zeiten Mittlerweile in JSF 2.0 standardisiert Weiterhin interessant für Wartung von Legacy-Anwendungen Speziell MyFaces Trinidad Client-Side Validation Project Health: 59 30