BootsFaces and AngularFaces - Modern HTML5 for JSF developers

561 Aufrufe

Veröffentlicht am

http://www.opitz-consulting.com

Glaubt man den Diskussionen auf Reddit und Yahoo Hackernews, ist JSF schon lange tot. Es sei langweilig, hässlich und ineffizient, heißt es dort. Heutzutage schreibt jeder Entwickler, der etwas auf sich hält, seine Programme in Javascript und HTML5. Nun, AngularFaces und BootsFaces bringen JavaScript und das frische Look and Feel von Bootstrap in die JSF-Welt.

AngularFaces macht es möglich, AJAX durch AngularJS zu ersetzen oder zu ergänzen. Damit gewinnen Sie eine Menge Flexibilität: Viele Dinge lassen sich in JavaScript einfacher programmieren als auf dem Server. Wie weit Sie dabei gehen, bleibt Ihnen überlassen. Sie können zum Beispiel damit beginnen, die Validierungen auf den Client zu verlagern. Oder einzelne schicke AngularJS-Komponenten in Ihrer JSF-Anwendung nutzen. Oder Sie gehen weiter und schreiben eine Single-Page-Anwendung, die von AngularJS gesteuert wird und nur die Infrastruktur von JSF nutzt.

BootsFaces ist eine Komponentenbibliothek, die rund 58 Komponenten in der Optik von Bootstrap liefert. Seit HTML5 brauchen Sie keine Komponentenbibliothek, um Bootstrap einzusetzen. Mit BootsFaces geht es aber deutlich einfacher. Wenige Zeilen genügen, und Ihre JSF-Anwendung sieht auch auf dem Smartphone gut aus.

Diesen Vortrag hielt unser Senior Consultant Stephan Rauh gemeinsam mit BootsFaces Team Lead Riccardo Massera am 9. März 2016 bei der Javaland in Brühl.

--
Über uns:
Als führender Projektspezialist für ganzheitliche IT-Lösungen tragen wir zur Wertsteigerung der Organisationen unserer Kunden bei und bringen IT und Business in Einklang. Mit OPITZ CONSULTING als zuverlässigem Partner können sich unsere Kunden auf ihr Kerngeschäft konzentrieren und ihre Wettbewerbsvorteile nachhaltig absichern und ausbauen.

Besuchen Sie unsere Homepage: http://www.opitz-consulting.com

Veröffentlicht in: Technologie
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
561
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
45
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
1
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

BootsFaces and AngularFaces - Modern HTML5 for JSF developers

  1. 1. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 1Modern HTML5 for JSF developers: BootsFaces and AngularFaces Riccardo Massera BootsFaces Team Lead Stephan Rauh Senior Consultant Leiter CC „moderne Clients“ OPITZ CONSULTING Deutschland GmbH Rock the Web with BootsFaces and AngularFaces! Phantasialand, Brühl, March 09, 2016 Modern HTML5 for JSF Developers
  2. 2. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 2Modern HTML5 for JSF developers: BootsFaces and AngularFaces Agenda 1. About us (and OPITZ CONSULTING) 2. BootsFaces 3. AngularFaces 4. State of the art 5. Questions?
  3. 3. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 3Modern HTML5 for JSF developers: BootsFaces and AngularFaces 1 About us (and OPITZ CONSULTING)
  4. 4. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 4Modern HTML5 for JSF developers: BootsFaces and AngularFaces Mission Wir entwickeln gemeinsam mit allen Branchen Lösungen, die dazu führen, dass sich diese Organisationen besser entwickeln als ihr Wettbewerb. Unsere Dienstleistung erfolgt partnerschaftlich und ist auf eine langjährige Zusammenarbeit angelegt. Leistungsangebot Application Lifecycle Management IT-Beratung Business-Lösungen Managed Services Training und Coaching IT-Trends Märkte Branchenübergreifend Über 600 Kunden 29% Industrie / Versorger / Telekommunikation 29% Handel / Logistik / Dienstleistungen 42% Öffentliche Auftraggeber / Banken und Versicherungen / Vereine und Verbände Eckdaten Gründung 1990 400 Mitarbeiter 11 Standorte
  5. 5. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 5Modern HTML5 for JSF developers: BootsFaces and AngularFaces  Methodenkompetenz  Technologiekompetenz  Sozialkompetenz Was sind unsere Stärken Individuelle Kompetenzen Unternehmenswerte Bernhard Opitz (CEO): „Motivierte und gut ausgebildete Mitarbeiter sind der Schlüssel zum Projekterfolg und der resultierenden Kundenzufriedenheit.“ &
  6. 6. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 6Modern HTML5 for JSF developers: BootsFaces and AngularFaces 2 BootsFaces
  7. 7. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 7Modern HTML5 for JSF developers: BootsFaces and AngularFaces Modern HTML5 for JSF Developers
  8. 8. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 8Modern HTML5 for JSF developers: BootsFaces and AngularFaces BootsFaces is an international team:  Riccardo Massera („Let‘s add Bootstrap to JSF!“)  Yeray Santana Borges  Dario D‘Urzo  Stephan Rauh („Let‘s make JSF simple!“) AngularFaces:  Stephan Rauh  What about you? Behind the Scenes
  9. 9. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 9Modern HTML5 for JSF developers: BootsFaces and AngularFaces  Next Generation JSF framework  HTML5 at your finger tips  Bootstrap 3.3 made easy  Next stop: Bootstrap 4 (current status: waiting for their release)  Advanced AJAX  Search Expressions  57 components and counting  Bootswatch themes  Mobile first! BootsFaces at a Glance
  10. 10. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 10Modern HTML5 for JSF developers: BootsFaces and AngularFaces Clean and Concise Bootstrap Code
  11. 11. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 11Modern HTML5 for JSF developers: BootsFaces and AngularFaces Clean and Concise Bootstrap Code
  12. 12. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 12Modern HTML5 for JSF developers: BootsFaces and AngularFaces Compare this to native Bootstrap in JSF!
  13. 13. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 13Modern HTML5 for JSF developers: BootsFaces and AngularFaces Bootstrap Grid System Explained
  14. 14. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 14Modern HTML5 for JSF developers: BootsFaces and AngularFaces BootsFaces Grid System – Source Code
  15. 15. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 15Modern HTML5 for JSF developers: BootsFaces and AngularFaces  @form  @this  @all  @none  @previous  @next  @parent  @() jquery expressions  @child(n) Advanced Search Expressions Standard JSF Compatible to PrimeFaces but all-new implementation
  16. 16. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 16Modern HTML5 for JSF developers: BootsFaces and AngularFaces Unique search expressions of BootsFaces:  @findIdRecursive(id) or **  @findId(id) or *:id  @findPartialId(id) or *id  @findPartialIdRecursive(id) or **:*id or **:id* or **:*id* Advanced Search Expressions
  17. 17. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 17Modern HTML5 for JSF developers: BootsFaces and AngularFaces Unified AJAX Concise alternative to ceremonious and verbose standard JSF ... no more fiddling with <f:ajax /> facets!
  18. 18. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 18Modern HTML5 for JSF developers: BootsFaces and AngularFaces Visit our showcase at http://www.bootsfaces.net 48 Components... and counting!
  19. 19. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 19Modern HTML5 for JSF developers: BootsFaces and AngularFaces  2000 downloads in January (give or take a few) Is it Ready for Production?
  20. 20. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 20Modern HTML5 for JSF developers: BootsFaces and AngularFaces 3 AngularFaces
  21. 21. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 21Modern HTML5 for JSF developers: BootsFaces and AngularFaces  AngularJS 1.3  next stop: Angular2  client-side components  client-side validation  internationalization  advanced AJAX  relaxed HTML-like code AngularFaces: JSF on Steroids!
  22. 22. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 22Modern HTML5 for JSF developers: BootsFaces and AngularFaces Goals and advantages:  leverage the power of the client  reduce the server load  less network traffic  use powerful client-side components:  ngTable, smart-table, ...  define your own client-side components  AngularJS routing and templating AngularJS for JSF Programmers
  23. 23. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 23Modern HTML5 for JSF developers: BootsFaces and AngularFaces  Marco Rinck's JUA  Add AngularJS components to JSF  Integrate them with JSF AJAX  Shallow but useful integration  AngularBeans by Bessem Hmidi  Use pure HTML5/AngularJS for the client  Use JavaEE for the backend  Inspired by AngularFaces  ... But different approach  AngularFaces  Full integration of AngularJS and JSF Alternative Approaches
  24. 24. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 24Modern HTML5 for JSF developers: BootsFaces and AngularFaces Automatic generation of labels and error messages (optionally) AngularFaces: Rapid Prototyping
  25. 25. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 25Modern HTML5 for JSF developers: BootsFaces and AngularFaces  Use the English JSF file  Add a simplified i18n.properties file AngularFaces: Internationalization Made Easy last name=Nachname first name=Vorname date of birth=Geburtsdatum email address=E-Mail-Adresse save=Speichern
  26. 26. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 26Modern HTML5 for JSF developers: BootsFaces and AngularFaces AngularFaces: Internationalization Made Easy
  27. 27. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 27Modern HTML5 for JSF developers: BootsFaces and AngularFaces AngularFaces: Internationalization Made Easy
  28. 28. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 28Modern HTML5 for JSF developers: BootsFaces and AngularFaces AngularFaces: Client Side Validation Bean Validation annotations are evaluated on the client
  29. 29. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 29Modern HTML5 for JSF developers: BootsFaces and AngularFaces AngularFaces: Client Side Validation
  30. 30. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 30Modern HTML5 for JSF developers: BootsFaces and AngularFaces Get rid of the namespace prefixes AngularFaces: HTML-Like JSF Code
  31. 31. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 31Modern HTML5 for JSF developers: BootsFaces and AngularFaces  A few projects use AngularFaces in production  Current status of the project: mostly dormant (only bugfixes)  Still relies on AngularJS 1.3 ... AngularFaces could use your helping hand! AngularFaces: Is it Ready for Production?
  32. 32. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 32Modern HTML5 for JSF developers: BootsFaces and AngularFaces Compatibility and Requirements
  33. 33. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 33Modern HTML5 for JSF developers: BootsFaces and AngularFaces 8 Questions?
  34. 34. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 34Modern HTML5 for JSF developers: BootsFaces and AngularFaces Questions?
  35. 35. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 35Modern HTML5 for JSF developers: BootsFaces and AngularFaces Contact Name Riccardo Massera https://www.linkedin.com/in/riccardomassera @bootsfaces E-mail: ric.massera@gmail.com
  36. 36. © OPITZ CONSULTING Deutschland GmbH 2016 Seite 36Modern HTML5 for JSF developers: BootsFaces and AngularFaces Contact Name Stephan Rauh OPITZ CONSULTING Deutschland GmbH Norsk-Data-Straße 3 – 61352 Bad Homburg Telefon: +49 6172 66260 – 1546 Telefax: +49 6172 66260 – 4500 Mobil: +49 0172 2055966 youtube.com/opitzconsulting @OC_WIRE @BeyondJava slideshare.net/opitzconsulting xing.com/net/opitzconsulting E-mail: stephan.rauh@opitz-consulting.com

×