modern html5 for jsf developers: bootsfaces and angularfaces
TRANSCRIPT
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 1Modern HTML5 for JSF developers: BootsFaces and AngularFaces
Riccardo MasseraBootsFaces Team Lead
Stephan Rauh Senior ConsultantLeiter CC „moderne Clients“OPITZ CONSULTING Deutschland GmbH
Rock the Web withBootsFaces and AngularFaces!
Phantasialand, Brühl, March 09, 2016
Modern HTML5 for JSF Developers
© 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?
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 3Modern HTML5 for JSF developers: BootsFaces and AngularFaces
1 About us(and OPITZ CONSULTING)
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 4Modern HTML5 for JSF developers: BootsFaces and AngularFaces
MissionWir 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.
LeistungsangebotApplication Lifecycle Management IT-BeratungBusiness-LösungenManaged ServicesTraining und Coaching IT-Trends
MärkteBranchenübergreifendÜber 600 Kunden
29%Industrie / Versorger /
Telekommunikation
29%Handel / Logistik / Dienstleistungen
42% Öffentliche Auftraggeber / Banken und Versicherungen / Vereine und Verbände
EckdatenGründung 1990 400 Mitarbeiter11 Standorte
© 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 Mitarbeitersind der Schlüssel zum Projekterfolg und der resultierenden Kundenzufriedenheit.“
&
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 6Modern HTML5 for JSF developers: BootsFaces and AngularFaces
2 BootsFaces
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 7Modern HTML5 for JSF developers: BootsFaces and AngularFaces
Modern HTML5 for JSF Developers
© 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
© 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
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 10Modern HTML5 for JSF developers: BootsFaces and AngularFaces
Clean and Concise Bootstrap Code
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 11Modern HTML5 for JSF developers: BootsFaces and AngularFaces
Clean and Concise Bootstrap Code
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 12Modern HTML5 for JSF developers: BootsFaces and AngularFaces
Compare this to native Bootstrap in JSF!
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 13Modern HTML5 for JSF developers: BootsFaces and AngularFaces
Bootstrap Grid System Explained
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 14Modern HTML5 for JSF developers: BootsFaces and AngularFaces
BootsFaces Grid System – Source Code
© 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
© 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
© 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!
© 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!
© 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?
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 20Modern HTML5 for JSF developers: BootsFaces and AngularFaces
3 AngularFaces
© 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!
© 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
© 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
© 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
© 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=Nachnamefirst name=Vornamedate of birth=Geburtsdatumemail address=E-Mail-Adressesave=Speichern
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 26Modern HTML5 for JSF developers: BootsFaces and AngularFaces
AngularFaces: Internationalization Made Easy
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 27Modern HTML5 for JSF developers: BootsFaces and AngularFaces
AngularFaces: Internationalization Made Easy
© 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
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 29Modern HTML5 for JSF developers: BootsFaces and AngularFaces
AngularFaces: Client Side Validation
© 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
© 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?
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 32Modern HTML5 for JSF developers: BootsFaces and AngularFaces
Compatibility and Requirements
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 33Modern HTML5 for JSF developers: BootsFaces and AngularFaces
8 Questions?
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 34Modern HTML5 for JSF developers: BootsFaces and AngularFaces
Questions?
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 35Modern HTML5 for JSF developers: BootsFaces and AngularFaces
ContactNameRiccardo Massera
https://www.linkedin.com/in/riccardomassera
@bootsfaces
E-mail: [email protected]
© OPITZ CONSULTING Deutschland GmbH 2016 Seite 36Modern HTML5 for JSF developers: BootsFaces and AngularFaces
ContactNameStephan Rauh
OPITZ CONSULTING Deutschland GmbHNorsk-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: [email protected]