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.

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?

5. The Rising Platform

7. Why Mobile Web?

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!

22. But evolving slowly...

23. HTML5 Features

24. Features are Coming
• Slow Adoption
●
Standardization
• Fast Development
●
Browser Vendors

25. Cross-Platform Development

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)

40. Too many concerns...

41. Frameworks save our but!

42. RichFaces Slidfast.js

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

57. The RichFaces Community

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/