Modern HTML5 for JSF Developers: BootsFaces and AngularFaces

© 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

Agenda
1. About us (and OPITZ CONSULTING)
2. BootsFaces
3. AngularFaces
4. State of the art
5. Questions?

1 About us
(and OPITZ CONSULTING)

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

 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.“
&

2 BootsFaces

Modern HTML5 for JSF Developers

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

 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

Clean and Concise Bootstrap Code

Compare this to native Bootstrap in JSF!

Bootstrap Grid System Explained

BootsFaces Grid System – Source Code

 @form
 @this
 @all
 @none
 @previous
 @next
 @parent
 @() jquery expressions
 @child(n)
Advanced Search Expressions
Standard JSF
Compatible to
PrimeFaces
but all-new
implementation

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

Unified AJAX
Concise alternative to ceremonious and verbose standard JSF
... no more fiddling with <f:ajax /> facets!

Visit our showcase at http://www.bootsfaces.net
48 Components... and counting!

 2000 downloads in January (give or take a few)
Is it Ready for Production?

3 AngularFaces

 AngularJS 1.3
 next stop: Angular2
 client-side components
 client-side validation
 internationalization
 advanced AJAX
 relaxed HTML-like code
AngularFaces: JSF on Steroids!

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

 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

Automatic generation of labels and error messages (optionally)
AngularFaces: Rapid Prototyping

 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

AngularFaces: Client Side Validation
Bean Validation annotations are evaluated on the client

AngularFaces: Client Side Validation

Get rid of the namespace prefixes
AngularFaces: HTML-Like JSF Code

 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?

Compatibility and Requirements

8 Questions?

Questions?

Contact
Name
Riccardo Massera
https://www.linkedin.com/in/riccardomassera
@bootsfaces
E-mail: ric.massera@gmail.com

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

Modern HTML5 for JSF Developers: BootsFaces and AngularFaces

Weitere ähnliche Inhalte

Ähnlich wie Modern HTML5 for JSF Developers: BootsFaces and AngularFaces (20)

Modern HTML5 for JSF Developers: BootsFaces and AngularFaces