Going Mobile with RichFacesLukáš Fryč
Who am I?
• Lukáš Fryč• JBoss Software Engineer• RichFaces Core Developer
• @lfryc• #richfaces @ irc.freenode.net• http://bit.ly/lfryc-blog
Agenda
• Mobile Era• HTML5• Mobile with JSF• Mobile with RichFaces• The Future
Why Mobile?
The Rising Platform
Why Mobile Web?
One Common Denominator: Web Browser
One Common Denominator: Web Browser
Why Mobile Web Rocks?
• Multi-platform• Cost• Time-to-Market• Online Identity• Continuous Evolution
Appeal to your users...
Appeal to your users, or Die!
The Birth of HTML5
What is HTML5?
• HTML5• CSS3• JavaScript
HTML5 is a Game-Changer
• Fast• Secure• Responsive design• Interactive• Cross-Device• Stunningly beautiful
Enterprise Ready?• Performance• Security• Connectivity• Device Access• Off-line Storage
User Experience on Steroids!
It's going to be HUGE!
But evolving slowly...
HTML5 Features
Features are Coming
• Slow Adoption● Standardization
• Fast Development● Browser Vendors
Cross-Platform Development
Let's go WebKit Only!
But: Web != WebKit• Opera• Firefox• Internet Explorer
Just WebKit, please...• Symbian 1, 2, 3, S40• iOS 2, 3, 4, 5• Android 1, 2, 3, 4
• http://bit.ly/webkit-comparison
The Age of Frameworks
Leveraging Mobile Web Frameworks
• Off-load Messy Job Frameworks→● Device Interoperability● Debugging Hell
Why Mobile JSF?
Why mobile JSF?• Encapsulation of logic• Standard component-oriented programming
model• Reusing the knowledge you have
Why not use mobile frameworks with JSF?
• jQuery Mobile● Not component oriented● Prescribed programming model● jQuery AJAX● No support for HTML5's @data- in JSF
How Mobile JSF?
UI Components
• Optimized for Mobile● Usability
– Touch interface● Responsive design● Rich Client-Side API
Single-page model
• Facelets• Behaviors
● AJAX Page Transitions– <f:ajax />
● Avoiding communication– <rich:componentControl />
Navigation & Context
• Support for history and bookmarking• Interactive Controls• CSS Transitions
Resource Optimizations
• Request Aggregation• Minification• Gzip Compression
Performance Optimizations
• CSS first• JavaScript at the end
• (JSF doesn't play nice here)
Too many concerns...
Frameworks save our but!
RichFaces Slidfast.js
Introducing Slidfast
• Light-weight JS library● 7 kilobytes
• Single-page● JSF AJAX● Facelets ui:include
• CSS transitions● GPU Accelerated
• Back-button support
Demo: JSF + Slidfast
What we have seen?
• Single-page programming model• GPU Accelerated CSS transitions• Bookmarking and Navigation
● location.hash• Running on OpenShift
Demo: RichFaces + Slidfast
http://bit.ly/rf-ks
What we have seen?
• Mobile Optimized Components• Push• <slidfast:page />
• <slidfast:pageChanger />
Demo: RichFaces Showcase
showcase.richfaces.org
Behind the Scene
Resource Optimization
• web.xml switch• One compressed package (CSS/JS)• Development friendly
● Project stage• Cloud ready
● Resource Mapping● CDN
Push Technology
• WebSockets / Comet● Atmosphere
• JMS Integration• CDI Integration
3 Paths
3 Paths
• Mobile Compatible
• Degrade Gracefully
• Mobile Optimized
3 Paths with RichFaces
• Mobile Compatible● Today
• Degrade Gracefully
• Mobile Optimized
3 Paths with RichFaces
• Mobile Compatible● Today
• Degrade Gracefully● Near Future
• Mobile Optimized
Bootstrap
3 Paths with RichFaces
• Mobile Compatible● Today
• Degrade Gracefully● Near Future
• Mobile Optimized● On the table
The RichFaces Community
Developing in Sandbox
• Community contributed components● http://bit.ly/rf-sandbox
• Slidfast mobile navigation• jQuery UI• Twitter Bootstrap Components
● http://bit.ly/rf-bootstrap
Bootstrap
Developing in Sandbox – Ctn'd
• Component Development Kit● Easy-to-Wrap Widgets
– http://bit.ly/brian-on-cdk● Fast Turnaround
– http://bit.ly/fast-cdk
The Future
Mobile Specific Render-Kits
• Components nicely degrades to mobile versions● e.g. WYSIWYG editor → <textarea />
Taking Advantage of more APIs
• Off-line Storage● caching
• Security• Connectivity
● Offline/Online• Navigation
● pushState• Performance Optimizations
Appeal to your users!
Thank you• @lfryc +Lukas Fryc• #richfaces @ irc.freenode.net• http://bit.ly/lfryc-blog
• Photographs and graphs used in presentation have been authored by various authors, published under Creative Commons license. There are links for original works:
• http://gs.statcounter.com/
• http://strategy.wikimedia.org/wiki/Mobile/Forecasts
• http://www.flickr.com/photos/txh62/478812294/
• http://www.flickr.com/photos/59937401@N07/5857835480/
• http://www.flickr.com/photos/twicepix/3332881889/
• http://www.flickr.com/photos/mollystevens/5179946914/
• http://www.flickr.com/photos/mikecogh/5677982965/
• http://www.flickr.com/photos/breatheindigital/4689159475/
• http://www.flickr.com/photos/wilhei/109403306/
• http://www.flickr.com/photos/8431398@N04/2680944871/
• http://www.flickr.com/photos/halfbisqued/2353845688/
• http://www.flickr.com/photos/gemsling/416891927/
• http://www.flickr.com/photos/nirak/644335254/
• http://www.flickr.com/photos/countylemonade/5940227329/
• http://www.flickr.com/photos/tomergabel/3348629201/
Credits
