JSF 2.3: Integration with Front-End Frameworks

Text

JSF 2.3Responsive Web Design + Single-Page Applications by Ian Hlavats

Industry Trends

Rise of Front-End Frameworks

Responsive Web Design (Bootstrap, Foundation)

Single Page Applications (AngularJS, Ember.js)

ResponsiveWeb Design• Flexible grid system• Adapts to device• Mobile-first approach

Bootstrap /Foundation• Bootstrap is #1

project on GitHub• Cross-browser RWD• SASS/LESS support• Reusable UI

components

Next-Gen CSS

• Pre-processors• Variables• Functions• Mixins• Better syntax• Modular

organization

Single Page Applications (SPA)

One top-level HTML page (template)

Many partial HTML pages loaded via DOM changes

Client-side MVC with JavaScript API

JSON/REST based on thin-server architecture

Enhanced HTML with custom elements and attributes

Modular architecture

Models, views, controllers, services, factories, filters, …

Two-way data binding

Custom directives for reusable UI components

AngularJS

Transpiler Languages

Object-oriented

Support interfaces, classes, generics, inheritance

Type-safe

Modular

Compile to JavaScript

Grunt task runnerModular build tool based on Node.js

Compiles TypeScript to JavaScript

Runs Karma unit tests, JSHint static analyzer

Optimizes assets for production

Bower

Dependency manager for JavaScript libraries

Searchable registry to find and download common libraries

Assumes all libraries are available in public/private Git repos

Looks for bower.json to declare dependencies

Great, so what does this all mean for JSF?

SWOT Assessment: JSF

Strengths

Components/RenderKits

Managed Beans

Weaknesses

Server-centric

Library incompatibilities

Opportunities

Better support for front-end frameworks and responsive web design

Threats

Obsolescence

How can we make JSF 2.3 better?

Integrate, Engage, EmbraceIntegrate with front-end technologies and frameworks

Engage with wider developer community

Embrace change and modernization

Integration Ideas

Let’s start with AngularJS + Bootstrap + TypeScript

Write new standard/core RenderKits that target AngularJS directives/filters

Use BootStrap for responsive web design

Integration Ideas

Support JAX-RS annotations on managed beans

Implement SPA support for AngularJS (security features, URL resolution, resource loading)

Distribute JSF component libraries via Bower

Let’s discuss!