Upload
ian-hlavats
View
568
Download
2
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
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!