This presentation will be shared at JavaOne 2014 during the JSF BOF session. It outlines the new generation of front-end frameworks and technologies and how JSF 2.3 can better support them.

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

2. Industry Trends
Rise of Front-End Frameworks
Responsive Web Design (Bootstrap, Foundation)
Single Page Applications (AngularJS, Ember.js)

3. Responsive
Web Design
• Flexible grid system
• Adapts to device
• Mobile-first approach

4. Bootstrap /
Foundation
• Bootstrap is #1 project
on GitHub
• Cross-browser RWD
• SASS/LESS support
• Reusable UI
components

5. Next-Gen CSS
• Pre-processors
• Variables
• Functions
• Mixins
• Better syntax
• Modular organization

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

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

8. Transpiler Languages
Object-oriented
Support interfaces, classes,
generics, inheritance
Type-safe
Modular
Compile to JavaScript

9. Grunt task runner
Modular build tool based
on Node.js
Compiles TypeScript to
JavaScript
Runs Karma unit tests,
JSHint static analyzer
Optimizes assets for
production

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

11. Great, so what does this all mean for JSF?

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

13. How can we make JSF 2.3 better?

14. Integrate, Engage, Embrace
Integrate with front-end
technologies and
frameworks
Engage with wider
developer community
Embrace change and
modernization

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

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

17. Let’s discuss!