Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Text 
JSF 2.3 
Responsive Web Design + 
Single-Page Applications by Ian Hlavats
Industry Trends 
Rise of Front-End Frameworks 
Responsive Web Design (Bootstrap, Foundation) 
Single Page Applications (An...
Responsive 
Web 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 
co...
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 
Cli...
AngularJS 
Enhanced HTML with custom 
elements and attributes 
Modular architecture 
Models, views, controllers, 
services...
Transpiler Languages 
Object-oriented 
Support interfaces, classes, 
generics, inheritance 
Type-safe 
Modular 
Compile to...
Grunt task runner 
Modular build tool based 
on Node.js 
Compiles TypeScript to 
JavaScript 
Runs Karma unit tests, 
JSHin...
Bower 
Dependency manager for 
JavaScript libraries 
Searchable registry to find 
and download common 
libraries 
Assumes ...
Great, so what does this all mean for JSF?
SWOT Assessment: JSF 
Strengths 
Components/RenderKits 
Managed Beans 
Weaknesses 
Server-centric 
Library incompatibiliti...
How can we make JSF 2.3 better?
Integrate, Engage, Embrace 
Integrate with front-end 
technologies and 
frameworks 
Engage with wider 
developer community...
Integration Ideas 
Let’s start with AngularJS + Bootstrap + TypeScript 
Write new standard/core RenderKits that target 
An...
Integration Ideas 
Support JAX-RS annotations on managed beans 
Implement SPA support for AngularJS (security 
features, U...
Let’s discuss!
Upcoming SlideShare
Loading in …5
×

JSF 2.3: Integration with Front-End Frameworks

6,613 views

Published on

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.

Published in: Technology
  • Be the first to comment

JSF 2.3: Integration with Front-End Frameworks

  1. 1. Text JSF 2.3 Responsive Web Design + Single-Page Applications by Ian Hlavats
  2. 2. Industry Trends Rise of Front-End Frameworks Responsive Web Design (Bootstrap, Foundation) Single Page Applications (AngularJS, Ember.js)
  3. 3. Responsive Web Design • Flexible grid system • Adapts to device • Mobile-first approach
  4. 4. Bootstrap / Foundation • Bootstrap is #1 project on GitHub • Cross-browser RWD • SASS/LESS support • Reusable UI components
  5. 5. Next-Gen CSS • Pre-processors • Variables • Functions • Mixins • Better syntax • Modular organization
  6. 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. 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. 8. Transpiler Languages Object-oriented Support interfaces, classes, generics, inheritance Type-safe Modular Compile to JavaScript
  9. 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. 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. 11. Great, so what does this all mean for JSF?
  12. 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. 13. How can we make JSF 2.3 better?
  14. 14. Integrate, Engage, Embrace Integrate with front-end technologies and frameworks Engage with wider developer community Embrace change and modernization
  15. 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. 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. 17. Let’s discuss!

×