JSF & RichFaces Conference UNIQA RichFaces 4  Rolling into  Mobile Era by  Lukáš Fryč 9.9.2011
Introduction <ul><li>Lukáš Fryč </li><ul><li>[Luka:ʃ Frɪdʒ]
@lfryc, #RichFaces </li></ul><li>Software Engineer at JBoss by Red Hat </li><ul><li>RichFaces Core Developer
Seam, Arquillian and HTML5 enthusiast
JBoss Testing Initiative  member </li></ul></ul>
Agenda <ul><li>Mobile Development </li><ul><li>Considerations & Requirements </li></ul><li>JSF / RichFaces on Mobiles </li...
Future goals </li></ul></ul>
Checklist <ul><li>Are you familiar with... </li><ul><li>today's mobile requirements?
JSF support of mobile devices?
insight what is currently baking in our labs? </li></ul></ul>
Are You a Mobile Developer?
Mobile Developer? <ul><li>Do you have mobile requirements?
How about the near future? </li></ul>
Mobile Developer? <ul><li>Even if you said  NO
The answer is probably  YES </li></ul>
Why YES to Mobiles? <ul><li>1 billion smart phones today
2014: mobile internet > desktop internet
2011: 53% of companies will have deployed iPhones
2015: Tablet revenue to surpass $49B
... </li></ul>
Are you prepared?
Are you prepared? <ul><li>Does your boss know what he wants? </li></ul>
What do you need for Mobile Web?
What is mobile web? <ul><li>Mobile web application is like any other </li><ul><li>With escalated demands </li></ul></ul>
Things to Consider <ul><li>Context and Navigation
Design & Usability
Resource Loading Optimizations
Device and Feature Detection
Technology Details Experiences </li></ul>
Context & Navigation <ul><li>Why is the user accessing your site? </li><ul><li>From what?
From where?
Why? </li></ul><li>Limit transitions and clicks </li></ul>
Design & Usability <ul><li>View port & Scaling </li><ul><li>Limit scaling </li></ul><li>Don't rely on resolution too heavily
Avoid internal scrollbars
Keep touch interface in mind </li></ul>
Design & Usability <ul><li>Load only data that are needed
Avoid fluff & complex branding
Don't launch new pages </li></ul>
Device & Feature Detection <ul><li>Header Inspection </li><ul><li>Operating system
Browser type & version
Can infer </li><ul><li>Carrier
Country
Device brand & model </li></ul></ul></ul>
Summary <ul><li>Mobile web application is like any other </li><ul><li>Additional demands </li><ul><li>Technology Knowledge...
Compatibility Testing </li></ul></ul></ul>
Where does your framework fit?
Where does the JSF help? <ul><li>Facelets VDL </li><ul><li>Powerful view definition and templating engine </li></ul><li>Re...
Cross-Cutting Concerns <ul><li>Resource Loading
Partial State Saving
Upcoming SlideShare
Loading in...5
×

RichFaces 4 rolling to Mobile Era

1,856

Published on

RichFaces 4 rolling to Mobile Era
A session at JSF and RichFaces Workshop/Conference

Mobile devices and smart phones are rapidly becoming the primary web client for significant amount of users. For the web developers it represents new area where they should focus when developing applications. They need to handle device specifics as feature support and display possibilities.

RichFaces is opening doors for engineers which are focused on application development and rely on framework to handle consequences. RichFaces comprises suite of component which is optimized for use on both, mobile and desktop clients.

Lukas discuss where HTML5 and CSS3 fits into the picture and how can JSF and RichFaces

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,856
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "RichFaces 4 rolling to Mobile Era"

  1. 1. JSF & RichFaces Conference UNIQA RichFaces 4 Rolling into Mobile Era by Lukáš Fryč 9.9.2011
  2. 2. Introduction <ul><li>Lukáš Fryč </li><ul><li>[Luka:ʃ Frɪdʒ]
  3. 3. @lfryc, #RichFaces </li></ul><li>Software Engineer at JBoss by Red Hat </li><ul><li>RichFaces Core Developer
  4. 4. Seam, Arquillian and HTML5 enthusiast
  5. 5. JBoss Testing Initiative member </li></ul></ul>
  6. 6. Agenda <ul><li>Mobile Development </li><ul><li>Considerations & Requirements </li></ul><li>JSF / RichFaces on Mobiles </li><ul><li>Current standing
  7. 7. Future goals </li></ul></ul>
  8. 8. Checklist <ul><li>Are you familiar with... </li><ul><li>today's mobile requirements?
  9. 9. JSF support of mobile devices?
  10. 10. insight what is currently baking in our labs? </li></ul></ul>
  11. 11. Are You a Mobile Developer?
  12. 12. Mobile Developer? <ul><li>Do you have mobile requirements?
  13. 13. How about the near future? </li></ul>
  14. 14. Mobile Developer? <ul><li>Even if you said NO
  15. 15. The answer is probably YES </li></ul>
  16. 16. Why YES to Mobiles? <ul><li>1 billion smart phones today
  17. 17. 2014: mobile internet > desktop internet
  18. 18. 2011: 53% of companies will have deployed iPhones
  19. 19. 2015: Tablet revenue to surpass $49B
  20. 20. ... </li></ul>
  21. 21. Are you prepared?
  22. 22. Are you prepared? <ul><li>Does your boss know what he wants? </li></ul>
  23. 23. What do you need for Mobile Web?
  24. 24. What is mobile web? <ul><li>Mobile web application is like any other </li><ul><li>With escalated demands </li></ul></ul>
  25. 25. Things to Consider <ul><li>Context and Navigation
  26. 26. Design & Usability
  27. 27. Resource Loading Optimizations
  28. 28. Device and Feature Detection
  29. 29. Technology Details Experiences </li></ul>
  30. 30. Context & Navigation <ul><li>Why is the user accessing your site? </li><ul><li>From what?
  31. 31. From where?
  32. 32. Why? </li></ul><li>Limit transitions and clicks </li></ul>
  33. 33. Design & Usability <ul><li>View port & Scaling </li><ul><li>Limit scaling </li></ul><li>Don't rely on resolution too heavily
  34. 34. Avoid internal scrollbars
  35. 35. Keep touch interface in mind </li></ul>
  36. 36. Design & Usability <ul><li>Load only data that are needed
  37. 37. Avoid fluff & complex branding
  38. 38. Don't launch new pages </li></ul>
  39. 39. Device & Feature Detection <ul><li>Header Inspection </li><ul><li>Operating system
  40. 40. Browser type & version
  41. 41. Can infer </li><ul><li>Carrier
  42. 42. Country
  43. 43. Device brand & model </li></ul></ul></ul>
  44. 44. Summary <ul><li>Mobile web application is like any other </li><ul><li>Additional demands </li><ul><li>Technology Knowledge </li></ul><li>Elevated demands </li><ul><li>Developer Experience
  45. 45. Compatibility Testing </li></ul></ul></ul>
  46. 46. Where does your framework fit?
  47. 47. Where does the JSF help? <ul><li>Facelets VDL </li><ul><li>Powerful view definition and templating engine </li></ul><li>Render Kits </li><ul><li>Desktop, mobile </li></ul><li>Cross-cutting concerns </li><ul><li>JSF delegates to custom implementation where specification falls short </li></ul></ul>
  48. 48. Cross-Cutting Concerns <ul><li>Resource Loading
  49. 49. Partial State Saving
  50. 50. Behaviors </li></ul>
  51. 51. Is it enough?
  52. 52. Is it enough? <ul><li>YES it is </li></ul>
  53. 53. TweetStream app <ul><li>RichFaces Push
  54. 54. HTML 5
  55. 55. CSS 3
  56. 56. Feature detection </li><ul><li>Server-side device detection
  57. 57. Client-side feature detection
  58. 58. Client-side layout and orientation detection </li></ul></ul>
  59. 59. Is it really enough?
  60. 60. It is really enough? <ul><li>NO it isn't </li><ul><li>Leads into home-spun solutions
  61. 61. Frameworks to fill the gap </li></ul></ul>
  62. 62. How can RichFaces help you?
  63. 63. Filling the gaps in JSF <ul><li>Push data
  64. 64. Resource loading
  65. 65. Device & feature detection
  66. 66. Layout & orientation support
  67. 67. Navigation enhancements
  68. 68. Mobile-ready Components </li></ul>
  69. 69. Push Data <ul><li>Updates page content
  70. 70. Immediately
  71. 71. Integrates with Atmosphere </li><ul><li>Comet/Websockets </li></ul></ul>
  72. 72. Push Data <ul><li>JMS
  73. 73. TopicsContext
  74. 74. Direct DOM update
  75. 75. Partial Page Rendering </li></ul>
  76. 76. Resource Loading <ul><li>Optimal way </li><ul><li>Download only required resources
  77. 77. Minified
  78. 78. Compressed
  79. 79. In single file per resource type </li><ul><li>HTML, CSS, JavaScript </li></ul></ul><li>Initialize JavaScript when page is ready </li></ul>
  80. 80. Device Detection <ul><li>Provides device-specific metadata on the server </li><ul><li>In simple way
  81. 81. Which you can use for customizations
  82. 82. Future proof </li></ul></ul>
  83. 83. Feature Detection <ul><li>Provides client-side metadata of detected features </li><ul><li>CSS classes
  84. 84. JavaScript API </li></ul></ul>
  85. 85. Layout and Orientation <ul><li>Layout Templates </li><ul><li>Desktop
  86. 86. Tablet
  87. 87. Smartphones </li></ul><li>Including support for orientation changes </li></ul>
  88. 88. Navigation Enhancements <ul><li>Providing user with progress </li><ul><li>Status indication </li></ul><li>Bookmarks support </li><ul><li>Supports AJAX </li></ul></ul>
  89. 89. Navigation Optimization <ul><li>Pre-loading </li><ul><li>Content
  90. 90. Resources </li></ul><li>Smooth transitions </li><ul><li>Near native experience </li></ul></ul>
  91. 91. Two Paths
  92. 92. Mobile-ready Components <ul><li>Two paths </li><ul><li>1) Supporting mobiles </li><ul><li>Current application </li></ul><li>2) Targeting mobiles </li><ul><li>Components targeting specific requirements of mobile devices </li></ul></ul></ul>
  93. 93. 1) Support Mobiles <ul><li>Don't mess with mobile-specifics
  94. 94. Trust the framework
  95. 95. Don't lose usability </li></ul>
  96. 96. 1) Support Mobiles <ul><li>Desktop application on mobiles </li><ul><li>View-port is not optimized
  97. 97. Clients needs to scale </li></ul><li>Optimized page layout </li></ul>
  98. 98. 1) Support Mobiles <ul><li>Mobile integration today (4.0)
  99. 99. Testing for device compatibility
  100. 100. Full-support in 4.1 (Fall 2011) </li><ul><li>optimized RichFaces Showcase </li></ul><li>Enterprise support available </li></ul>
  101. 101. 2) Targeting Mobiles <ul><li>Targeting mobile-specific needs with </li><ul><li>User Experience
  102. 102. Navigation
  103. 103. Optimizations </li></ul></ul>
  104. 104. Mobile Showcase
  105. 105. Wrap up
  106. 106. Conclusion <ul><li>JSF doesn't target mobiles
  107. 107. Extension libraries to fill the gap </li><ul><li>Develop in component-oriented way
  108. 108. Care about good-practices
  109. 109. Leave the hard-job to library
  110. 110. Reuse what you already know </li></ul></ul>
  111. 111. Checklist <ul><li>Are you familiar with... </li><ul><li>today's mobile requirements?
  112. 112. JSF support of mobile devices?
  113. 113. insight what is currently baking in our labs? </li></ul></ul>
  114. 114. Feedback <ul><li>RichFaces Community Forums </li><ul><ul><li>bit.ly/9hRNzd </li></ul></ul><li>irc.freenode.net #richfaces </li></ul>
  115. 115. Follow Up <ul><li>[email_address]
  116. 116. Twitter: @lfryc #RichFaces
  117. 117. rik-ansikter.blogspot.com </li><ul><ul><li>bit.ly/oKlSKF </li></ul></ul><li>Planet RichFaces </li><ul><ul><li>All RichFaces bloggers
  118. 118. bit.ly/r1CSob </li></ul></ul></ul>
  119. 119. RichFaces 4 Rolling into Mobile Era Q/A by Lukáš Fryč

×