Modern 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!

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: ric.massera@gmail.com

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: stephan.rauh@opitz-consulting.com

Modern HTML5 for JSF Developers: BootsFaces and AngularFaces

Technology

Transcript of Modern HTML5 for JSF Developers: BootsFaces and AngularFaces

Umstieg auf HTML5 1 - application.wiley-vch.de · Umstieg auf HTML5 1 In diesem Kapitel ... g Die Geschichte von HTML g Was ist HTML5? g Unterstützte Browserfunktionen testen g Auswahl

JSF-Hacks · Herbstcampus 2008 – F14 – JSF-Hacks 2 Agenda •Tipps und Tricks • Allgemeines • Konfiguration • Navigation • Komponenten und Attribute • Validator und

ERiC Developers Toolkit - instantview.org · iii Inhaltsverzeichnis API-Referenz ...

HTML5 Grundlagen

HTML5 Handbuch

14Mohamed Sabbar, Medieninformatik - Fachseminar 14/12/09 Java Server Faces (JSF) „JSF“ ist mehr als nur eine Insel Fachseminar WS 09/10 Mohamed Sabbar.

PrettyFaces: RESTful URLs für JSF

Studienarbeit - it-designers-gruppe.de · Eigenschaften wie Konverter und Validierer den JSF-Komponenten zugewiesen werden. Die JavaBeans bilden in einer JSF-Anwendung das Model ab.

Schlanke Webarchitekturen nicht nur mit JSF 2 und CDI

Vortrag HTML5, CSS3, PhoneGap

W3C HTML5 Chinese IG Report

Webentwicklung mit HTML5. INT03A... · Eine wesentliche Eigenschaft von HTML5 ist se ine Abwärtskompatibilität. Damit ist es mög - lich, HTML5 bereits heute zu verwenden, weil

HTML5 unplugged

WRECKAGE - Developers' Book

KOMET JEL® JSF - kometgroup.com · Title: JEL JSF Author: Helma Hückmann Subject: JEL JSF Montageanleitung, Assembly instrctions, Instructions de montage, Istruzioni per il montaggio

HTML5 Magazine

HTML5 abwärtskompatibel - Gerätevielfalt & Zugänglichkeit

JSF goes Mobile - entwicklertag.de · Title: Microsoft PowerPoint - jsf-mobile-andy-bosch.pptx Author: Bosch Created Date: 6/4/2013 7:57:39 PM

Html5 versus Adobe Flash

JSF vs. GWT? JSF und GWT!