Über den Tellerrand - OIO · Apache DeltaSpike JSF-Module • Typesafety – Navigation • Statt ...

26.07.2013

1

Orientation in Objects GmbH

Weinheimer Str. 6868309 Mannheim

[email protected]:

Über den Tellerrand

Überblick JSF-Bibliotheken und Tools für den praktischen Einsatz

1.0

JSF-Bibliotheken und Tools für den praktischen Eins atz© 2013 Orientation in Objects GmbH

Ihr Sprecher

2

Thomas Asel

Trainer, Berater, Entwickler

SchwerpunkteFrontend-Architektur,

Entwicklung von Web-Anwendungen, Web-Performance-Optimierung

@Tom_Aselhttp://blog.oio.de

[email protected]

26.07.2013

2


Luxusprobleme: Die Qual der Wahl

3



4

26.07.2013

3



5

• CODI• ExtVal• Test• Commons

• CDK• JSFUnit• Richfaces Tools (Eclipse)



6

26.07.2013

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 Laufzeitv erhaltens von

JSF-Anwendungen

8

26.07.2013

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– http://www.oio.de/faces/welcome.jsf?foo=bar ->

http://www.oio.de/welcome/foo/bar

• Fazit– JSF 2.0 addressiert bereits einige Features– JSF 2.2 wird noch mehr davon bieten– PrettyFaces ermöglicht aber feingranularere Steuerung

10

26.07.2013

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- und ClientSession

@Test @InitialPage("/index.faces")

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

26.07.2013

7


MyFaces - Umfeld

− Orchestra

− CODI

− ExtVal

− Test

− Commons

13

• Unterprojekte zu JSF 1.x Zeiten entstanden

• Teilweise mit JSF 2.0 in den Standard aufgenommen


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

26.07.2013

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

26.07.2013

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?

• http://tasel.github.io/jsfinspector

17

JSF-Bibliotheken und Tools für den praktischen Eins atz© 2013 Orientation in Objects GmbH 18

26.07.2013

10



RichFaces

20

Quelle: http://www.ohloh.net/p/richfaces

Quelle: https://github.com/richfaces

26.07.2013

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 4.3.2

21


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 ei ne Datei– Resource Mapping

• Mapping von Resourcenamen auf alternative Quellen– Ajax-Framework

• Queues• Regions• …

22

26.07.2013

12



Quelle: http://www.google.de/trends/explore#q=richfaces%2C%20icefaces%2C%20primefaces&cmpt=q

26.07.2013

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

26.07.2013

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 gespo nsert 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

26.07.2013

15


Tipps zur Auswahl von Komponentenbibliotheken

29


Vorbemerkung zur Auswahl

30

• 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

26.07.2013

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

26.07.2013

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-) Komponen ten?

• 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

26.07.2013

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

26.07.2013

19


Lösung:Alle (größeren) JSF-Bibliotheken bieten auch eine Mobile-Bibliothek

richtig?37


Quellen: http://mobileshowcase.icesoft.org/mobileshowcase/showcase.jsf http://www.primefaces.org/showcase-labs/mobile/chat.jsf

26.07.2013

20


Gerätelandschaft bis vor ca. 2 Jahren:

39

Quelle: http://assets.sbnation.com/assets/1265151/ios_family.jpeg


Gerätelandschaft heute:

40

26.07.2013

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

26.07.2013

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

26.07.2013

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

26.07.2013

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



[email protected]

??

? ?

????

Fragen ?

48

26.07.2013

25


Links

• [21] https://github.com/richfaceshttp://www.ohloh.net/p/richfaces

• [25] http://www.google.de/trends/explore#q=richfaces%2C%20icefaces%2C%20primefaces&cmpt=q

• [26] http://www.primefaces.org/showcase-labs/ui/macosx.jsf

• [29] http://blog.primefaces.org/?p=2160

• [39] http://mobileshowcase.icesoft.org/mobileshowcase/showcase.jsf http://www.primefaces.org/showcase-labs/mobile/chat.jsf

• [40] http://assets.sbnation.com/assets/1265151/ios_family.jpeg

• [41] http://tabletcommunity.de/20010/video-fast-alle-tablets-der-vergangenen-jahre-in-16-minuten-vorgestellt/



[email protected]

Vielen Dank für ihre Aufmerksamkeit !

26.07.2013

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.07.2013

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

26.07.2013

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

26.07.2013

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 ermöglichen

• Features– @ConversationScoped– @Window Scoped– @VieAccessScoped

• Ausblick:– JSF 2.2: Faces Flows– Orchestra und CODI weiterhin interessant für

Wartung von JSF 1.2 Legacy-Anwendungen

58

26.07.2013

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

Über den Tellerrand - OIO · Apache DeltaSpike JSF-Module • Typesafety – Navigation • Statt ...

Documents

Transcript of Über den Tellerrand - OIO · Apache DeltaSpike JSF-Module • Typesafety – Navigation • Statt ...