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