Going mobile with RichFaces
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Going mobile with RichFaces

  • 5,923 views
Uploaded on

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......

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 in: Technology , Sports
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,923
On Slideshare
5,917
From Embeds
6
Number of Embeds
1

Actions

Shares
Downloads
46
Comments
0
Likes
2

Embeds 6

http://lanyrd.com 6

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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