Going mobile with RichFaces

6,019 views
5,782 views

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

Published in: Technology, Sports
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,019
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
57
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Going mobile with RichFaces

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

×