Going mobile with RichFaces
-
Upload
lukas-fryc -
Category
Technology
-
view
4.968 -
download
1
description
Transcript of Going mobile with RichFaces
![Page 1: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/1.jpg)
Going Mobile with RichFacesLukáš Fryč
![Page 2: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/2.jpg)
Who am I?
• Lukáš Fryč• JBoss Software Engineer• RichFaces Core Developer
• @lfryc• #richfaces @ irc.freenode.net• http://bit.ly/lfryc-blog
![Page 3: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/3.jpg)
Agenda
• Mobile Era• HTML5• Mobile with JSF• Mobile with RichFaces• The Future
![Page 4: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/4.jpg)
Why Mobile?
![Page 5: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/5.jpg)
The Rising Platform
![Page 6: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/6.jpg)
![Page 7: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/7.jpg)
Why Mobile Web?
![Page 8: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/8.jpg)
![Page 9: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/9.jpg)
One Common Denominator: Web Browser
![Page 10: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/10.jpg)
One Common Denominator: Web Browser
![Page 11: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/11.jpg)
Why Mobile Web Rocks?
• Multi-platform• Cost• Time-to-Market• Online Identity• Continuous Evolution
![Page 12: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/12.jpg)
Appeal to your users...
![Page 13: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/13.jpg)
Appeal to your users, or Die!
![Page 14: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/14.jpg)
![Page 15: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/15.jpg)
The Birth of HTML5
![Page 16: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/16.jpg)
What is HTML5?
• HTML5• CSS3• JavaScript
![Page 17: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/17.jpg)
HTML5 is a Game-Changer
• Fast• Secure• Responsive design• Interactive• Cross-Device• Stunningly beautiful
![Page 18: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/18.jpg)
![Page 19: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/19.jpg)
Enterprise Ready?• Performance• Security• Connectivity• Device Access• Off-line Storage
![Page 20: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/20.jpg)
User Experience on Steroids!
![Page 21: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/21.jpg)
It's going to be HUGE!
![Page 22: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/22.jpg)
But evolving slowly...
![Page 23: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/23.jpg)
HTML5 Features
![Page 24: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/24.jpg)
Features are Coming
• Slow Adoption● Standardization
• Fast Development● Browser Vendors
![Page 25: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/25.jpg)
Cross-Platform Development
![Page 26: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/26.jpg)
Let's go WebKit Only!
![Page 27: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/27.jpg)
But: Web != WebKit• Opera• Firefox• Internet Explorer
![Page 28: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/28.jpg)
Just WebKit, please...• Symbian 1, 2, 3, S40• iOS 2, 3, 4, 5• Android 1, 2, 3, 4
• http://bit.ly/webkit-comparison
![Page 29: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/29.jpg)
The Age of Frameworks
![Page 30: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/30.jpg)
Leveraging Mobile Web Frameworks
• Off-load Messy Job Frameworks→● Device Interoperability● Debugging Hell
![Page 31: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/31.jpg)
Why Mobile JSF?
![Page 32: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/32.jpg)
Why mobile JSF?• Encapsulation of logic• Standard component-oriented programming
model• Reusing the knowledge you have
![Page 33: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/33.jpg)
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
![Page 34: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/34.jpg)
How Mobile JSF?
![Page 35: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/35.jpg)
UI Components
• Optimized for Mobile● Usability
– Touch interface● Responsive design● Rich Client-Side API
![Page 36: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/36.jpg)
Single-page model
• Facelets• Behaviors
● AJAX Page Transitions– <f:ajax />
● Avoiding communication– <rich:componentControl />
![Page 37: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/37.jpg)
Navigation & Context
• Support for history and bookmarking• Interactive Controls• CSS Transitions
![Page 38: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/38.jpg)
Resource Optimizations
• Request Aggregation• Minification• Gzip Compression
![Page 39: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/39.jpg)
Performance Optimizations
• CSS first• JavaScript at the end
• (JSF doesn't play nice here)
![Page 40: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/40.jpg)
Too many concerns...
![Page 41: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/41.jpg)
Frameworks save our but!
![Page 42: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/42.jpg)
RichFaces Slidfast.js
![Page 43: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/43.jpg)
Introducing Slidfast
• Light-weight JS library● 7 kilobytes
• Single-page● JSF AJAX● Facelets ui:include
• CSS transitions● GPU Accelerated
• Back-button support
![Page 44: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/44.jpg)
Demo: JSF + Slidfast
![Page 45: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/45.jpg)
What we have seen?
• Single-page programming model• GPU Accelerated CSS transitions• Bookmarking and Navigation
● location.hash• Running on OpenShift
![Page 46: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/46.jpg)
Demo: RichFaces + Slidfast
http://bit.ly/rf-ks
![Page 47: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/47.jpg)
What we have seen?
• Mobile Optimized Components• Push• <slidfast:page />
• <slidfast:pageChanger />
![Page 48: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/48.jpg)
Demo: RichFaces Showcase
showcase.richfaces.org
![Page 49: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/49.jpg)
Behind the Scene
![Page 50: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/50.jpg)
Resource Optimization
• web.xml switch• One compressed package (CSS/JS)• Development friendly
● Project stage• Cloud ready
● Resource Mapping● CDN
![Page 51: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/51.jpg)
Push Technology
• WebSockets / Comet● Atmosphere
• JMS Integration• CDI Integration
![Page 52: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/52.jpg)
3 Paths
![Page 53: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/53.jpg)
3 Paths
• Mobile Compatible
• Degrade Gracefully
• Mobile Optimized
![Page 54: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/54.jpg)
3 Paths with RichFaces
• Mobile Compatible● Today
• Degrade Gracefully
• Mobile Optimized
![Page 55: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/55.jpg)
3 Paths with RichFaces
• Mobile Compatible● Today
• Degrade Gracefully● Near Future
• Mobile Optimized
Bootstrap
![Page 56: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/56.jpg)
3 Paths with RichFaces
• Mobile Compatible● Today
• Degrade Gracefully● Near Future
• Mobile Optimized● On the table
![Page 57: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/57.jpg)
The RichFaces Community
![Page 58: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/58.jpg)
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
![Page 59: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/59.jpg)
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
![Page 60: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/60.jpg)
The Future
![Page 61: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/61.jpg)
Mobile Specific Render-Kits
• Components nicely degrades to mobile versions● e.g. WYSIWYG editor → <textarea />
![Page 62: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/62.jpg)
Taking Advantage of more APIs
• Off-line Storage● caching
• Security• Connectivity
● Offline/Online• Navigation
● pushState• Performance Optimizations
![Page 63: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/63.jpg)
Appeal to your users!
![Page 64: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/64.jpg)
Thank you• @lfryc +Lukas Fryc• #richfaces @ irc.freenode.net• http://bit.ly/lfryc-blog
![Page 65: Going mobile with RichFaces](https://reader033.fdocuments.net/reader033/viewer/2022042623/54ba374a4a7959a7378b46b1/html5/thumbnails/65.jpg)
• 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