View
4.962
Download
1
Category
Tags:
Preview:
DESCRIPTION
The rise of portable devices last year shows how important is making applications compatible with mobiles. When it comes to web applications, JSF offers the same strong background for mobile development as it does for desktop applications: an extensible framework with a widely-accepted development model, allowing reuse of JSF programming skills and technologies on the mobile platform. RichFaces 4.1 goes behind concepts brought by JSF and provides developer with framework which makes your applications ready for mobile devices and offers you as rich component suite as for desktop environments. Lukas is going to show you how the RichFaces Showcase was turned into an application for portable devices, how a light-weight javascript framework was designed for making RichFaces applications mobile ready, the principles of an one-page application design and what are the necessary optimizations for making RichFaces applications run on mobile devices properly.
Citation preview
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
Recommended