Modern HTML5 for JSF Developers: BootsFaces and AngularFaces

© 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


Agenda

1. About us (and OPITZ CONSULTING)

2. BootsFaces

3. AngularFaces

4. State of the art

5. Questions?


1 About us(and OPITZ CONSULTING)


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


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

&


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!

http://www.bootsfaces.net/


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=Nachnamefirst name=Vornamedate of birth=Geburtsdatumemail address=E-Mail-Adressesave=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?


ContactNameRiccardo Massera

https://www.linkedin.com/in/riccardomassera

@bootsfaces

E-mail: [email protected]

https://www.linkedin.com/in/riccardomassera


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]

Modern HTML5 for JSF Developers: BootsFaces and AngularFaces

Technology

Transcript of Modern HTML5 for JSF Developers: BootsFaces and AngularFaces