0
Going Mobile With Java Based Technologies Today          JavaOne 2011          Speaker: Wesley Hales        @wesleyhalesSu...
Wesley Hales                          • Senior Developer at Red Hat           @w                                          ...
Sunday, October 9, 2011
Mobile Platforms                          Mobile Frameworks                           And many more...Sunday, October 9, 2...
Todays FocusSunday, October 9, 2011
Mobile Web Browsers                                       Available Features                          • As a Java develope...
Mobile Web Browsers                                        Available Features                          Web Sockets        ...
Mobile Web Browsers                                        Available Features                           appCache      unli...
HTML5 Mime Mappings                          <mime-mapping>                            <extension>appcache</extension>    ...
Top 5 Best Practices                                     When working with HTML5                          1) Use client si...
About The DemoSunday, October 9, 2011
TweetStream                               • Built to work with mobile                                 webkit devices      ...
TweetStream                            Java Tech Breakdown                          • Data Grids with Infinispan           ...
TweetStream Architectural Overview                                                                                        ...
TweetStream Twitter4J                                        •Open source project                                        •...
TweetStream Infinispan                                        •Highly scalable                                        •In m...
TweetStream Twitter4J                                        •Reliable and performant                                     ...
Access It Live Now!                             http://bit.ly/mobilejava                            #javaone and #mobileja...
How Does Mobile Affect My Code?                          • Airplane mode                          • Integration and Extend...
Java Mobile Web Settings                • Device and feature detection                • Optimizing RichFaces push         ...
Other Mobile Web Settings                           • Minification (html5boilerplate)                           • Ajax Impr...
Other Mobile Web Settings                           • Minification (html5boilerplate)                           • Ajax Impr...
Device & Feature DetectionSunday, October 9, 2011
Device & Feature Detection                           • MobileESP (server-side)                           • Modernizr (clie...
Server Side Device Detection                            • Parsing the USER_AGENT                            • MobileESP   ...
Server Side Device Detection                            • Parsing the USER_AGENT                            • MobileESP   ...
MobileESP                   ...{                     HttpServletRequest request...                     userAgentStr = requ...
WURFL                                         Wireless Universal Resource File                          • Up to date list ...
Feature Detection                           Modernizr                          • <html class="js canvas canvastext        ...
Feature Detection                            Modernizr                          • Adds classnames of available            ...
Feature Detection                          “Cascading” the detection:                          #nice {                    ...
Web SocketsSunday, October 9, 2011
RichFaces Push                          • Integrates with Atmosphere                            • Supports Comet & WebSock...
RichFaces Push                          • 2 options                            • render specific UI regions on             ...
RichFaces Push                          <a4j:jsFunction name="updateContent" action="                          #{twitterAg...
JSF + MobileSunday, October 9, 2011
JSF2 on Mobile                          • Sacrifices...                          • Created for the desktop                 ...
Using JSF2 with HTML5                          • HTML5 allows XML markup (which                            is emitted by J...
Using JSF2 with HTML5                    Normal JSF Markup...                            Renders to...                    ...
Back Button and Bookmarking                            • Doable with 3rd party JSF                              frameworks...
Back Button and Bookmarking                    http://someurl.com/#foo:bar                    <a4j:jsFunction name="handle...
Mobile UI & ExperienceSunday, October 9, 2011
Mobile UI & Experience                          • Hardware Acceleration                          • Page Transitions: Slidi...
Touch Events                          •Duck Punch approach                           http://bit.ly/k8b2aB                 ...
CSS3 Media Queries                                          Orientation Detection                          • Orientation D...
Page Transitions                          • translate3D(0,0,0)                          • Hardware acceleration via the   ...
Network Detection                          navigator.connection                          {                              "t...
Profiling and Optimizations                          • Getting close to a native feel                          • Start with...
DemosSunday, October 9, 2011
Questions?                          git@github.com:richfaces/tweetstream.gitSunday, October 9, 2011
Upcoming SlideShare
Loading in...5
×

JavaOne 2011 - Going Mobile With Java Based Technologies Today

1,864

Published on

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

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

No notes for slide

Transcript of "JavaOne 2011 - Going Mobile With Java Based Technologies Today"

  1. 1. Going Mobile With Java Based Technologies Today JavaOne 2011 Speaker: Wesley Hales @wesleyhalesSunday, October 9, 2011
  2. 2. Wesley Hales • Senior Developer at Red Hat @w esle • W3C Member yha les • JSR 301/329 Rep. • HTML5 User Group Founder • html5rocks.com, DZone Refcard, and author of many other articles around the web.Sunday, October 9, 2011
  3. 3. Sunday, October 9, 2011
  4. 4. Mobile Platforms Mobile Frameworks And many more...Sunday, October 9, 2011
  5. 5. Todays FocusSunday, October 9, 2011
  6. 6. Mobile Web Browsers Available Features • As a Java developer, which HTML5 features should I care about? • Web Workers • Web Sockets • Web Storage • Application Cache • Notifications, Geolocation, etc...Sunday, October 9, 2011
  7. 7. Mobile Web Browsers Available Features Web Sockets no yes Web Workers no no * [10-2-2011] http://caniuse.com/#feat=webworkersSunday, October 9, 2011
  8. 8. Mobile Web Browsers Available Features appCache unlimited 10MB Web Storage 5MB 5MBSunday, October 9, 2011
  9. 9. HTML5 Mime Mappings <mime-mapping> <extension>appcache</extension> <mime-type>text/cache-manifest</mime-type> </mime-mapping> <mime-mapping> <extension>html</extension> <mime-type>text/html-sandboxed</mime-type> </mime-mapping>Sunday, October 9, 2011
  10. 10. Top 5 Best Practices When working with HTML5 1) Use client side DBs instead of server round trips (localStorage) 2) Use CSS transitions instead of javascript animations (Enable hardware acceleration) 3) Boost performance with javascript 1.6 (no more "for loops")... [‘apples’,‘oranges’,‘forge’].forEach{...} 4) Use cache manifests for live sites, not just offline apps (reduce requests) 5) HTML5 Form attributes and input styles (paceholder, pattern, etc...)Sunday, October 9, 2011
  11. 11. About The DemoSunday, October 9, 2011
  12. 12. TweetStream • Built to work with mobile webkit devices • Not using any mobile frameworks • Java app optimized for mobileSunday, October 9, 2011
  13. 13. TweetStream Java Tech Breakdown • Data Grids with Infinispan • JSR 299: CDI/Weld + Seam 3 • JMS 1.1 API • JSF 2.0 + RichFaces 4Sunday, October 9, 2011
  14. 14. TweetStream Architectural Overview TwitterSource gets JUDCon tweet history based on "tracks", on application start CacheBuilder stores Css Transitions .js DOM tweet filtering different key value sets into infinispan. Richfaces / Weld / Seam Front End / User Interface TweetListenerBean listens for real time socket/comet div update tweets based on hashtag. Triggers refresh of CacheBuilder CacheListener Listens for infinispan events and publishes refreshed view a4j:push subscribes to topic and gets updates as needed.Sunday, October 9, 2011
  15. 15. TweetStream Twitter4J •Open source project •Java API for easy access •OAuth support •Streaming feeds •Historical feedsSunday, October 9, 2011
  16. 16. TweetStream Infinispan •Highly scalable •In memory w/ spool off options •Easily clusterable and manageableSunday, October 9, 2011
  17. 17. TweetStream Twitter4J •Reliable and performant •Flexible clustering •Perfect for hookup into UISunday, October 9, 2011
  18. 18. Access It Live Now! http://bit.ly/mobilejava #javaone and #mobilejavaSunday, October 9, 2011
  19. 19. How Does Mobile Affect My Code? • Airplane mode • Integration and Extending features • Web Storage • Web Sockets • XHR2, File System API, etc... • Latency and file requests are everything • Dynamic resource serving optimizationsSunday, October 9, 2011
  20. 20. Java Mobile Web Settings • Device and feature detection • Optimizing RichFaces push • JSF2 + HTML5 • Touch and gesture support • Mime mappingsSunday, October 9, 2011
  21. 21. Other Mobile Web Settings • Minification (html5boilerplate) • Ajax Improvements • File Request ReductionSunday, October 9, 2011
  22. 22. Other Mobile Web Settings • Minification (html5boilerplate) • Ajax Improvements • File Request ReductionSunday, October 9, 2011
  23. 23. Device & Feature DetectionSunday, October 9, 2011
  24. 24. Device & Feature Detection • MobileESP (server-side) • Modernizr (client-side) • CSS3 Media QueriesSunday, October 9, 2011
  25. 25. Server Side Device Detection • Parsing the USER_AGENT • MobileESP • WURFL APIsSunday, October 9, 2011
  26. 26. Server Side Device Detection • Parsing the USER_AGENT • MobileESP • WURFL APIsSunday, October 9, 2011
  27. 27. MobileESP ...{ HttpServletRequest request... userAgentStr = request.getHeader("user-agent"); httpAccept = request.getHeader("Accept"); uAgentTest = new UAgentInfo(userAgentStr, httpAccept); } public boolean isPhone() { //Detects a whole tier of phones that support similar functionality as the iphone return uAgentTest.detectTierIphone(); } public boolean isTablet() { //Detect ipads, xooms, blackberry tablets, but not galaxy - they use a strange user-agent return uAgentTest.detectTierTablet(); }Sunday, October 9, 2011
  28. 28. WURFL Wireless Universal Resource File • Up to date list of all mobile devices • Available as XML file • Wrappers for most languagesSunday, October 9, 2011
  29. 29. Feature Detection Modernizr • <html class="js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface">Sunday, October 9, 2011
  30. 30. Feature Detection Modernizr • Adds classnames of available features to DOM • Allows use of browser features with fallback options • shiv & polyfillsSunday, October 9, 2011
  31. 31. Feature Detection “Cascading” the detection: #nice {     background: url(background-one.png) top left repeat-x;     background: url(background-one.png) top left repeat-x,     url(background-two.png) bottom left repeat-x; } Using Modernizr: #nice {     background: url(background-one.png) top left repeat-x; } .multiplebgs #nice {     background: url(background-one.png) top left repeat-x,     url(background-two.png) bottom left repeat-x; }Sunday, October 9, 2011
  32. 32. Web SocketsSunday, October 9, 2011
  33. 33. RichFaces Push • Integrates with Atmosphere • Supports Comet & WebSockets • Allows usage JMS queues/topic • Optimizable with custom queueing or use of CDI eventsSunday, October 9, 2011
  34. 34. RichFaces Push • 2 options • render specific UI regions on push • parse response as JSONSunday, October 9, 2011
  35. 35. RichFaces Push <a4j:jsFunction name="updateContent" action=" #{twitterAgent.refreshList}" render="list-form"/> <a4j:push address="content@twitter" onerror="alert(Error retrieving pushed data)" ondataavailable="updateContent()"> </a4j:push>Sunday, October 9, 2011
  36. 36. JSF + MobileSunday, October 9, 2011
  37. 37. JSF2 on Mobile • Sacrifices... • Created for the desktop • What exists for mobile JSF today? • the futureSunday, October 9, 2011
  38. 38. Using JSF2 with HTML5 • HTML5 allows XML markup (which is emitted by JSF/Facelets) • XML Namespaces are only used server sideSunday, October 9, 2011
  39. 39. Using JSF2 with HTML5 Normal JSF Markup... Renders to... <!DOCTYPE html> <html lang="en" <!DOCTYPE html>     xmlns:f="http://java.sun.com/jsf/core" <html lang="en">     xmlns:h="http://java.sun.com/jsf/html">     <h:head>     <head>         <title>Title</title>         <title>Title</title>     </h:head>     <h:body>     </head>         <h:outputText value="#{bean.text}" />     <body>     </h:body> </html>         Some text     </body> </html>Sunday, October 9, 2011
  40. 40. Back Button and Bookmarking • Doable with 3rd party JSF frameworks like RichFaces • Uses location.hashSunday, October 9, 2011
  41. 41. Back Button and Bookmarking http://someurl.com/#foo:bar <a4j:jsFunction name="handleHashChange" render="@form" oncomplete="slideTo(foo location.hash.split(:)             <f:param name="demo" value="param1"/>             <f:param name="sample" value="param2"/> </a4j:jsFunction> window.onhashchange = function(){ handleHashChange(location.hash.split(:)) };Sunday, October 9, 2011
  42. 42. Mobile UI & ExperienceSunday, October 9, 2011
  43. 43. Mobile UI & Experience • Hardware Acceleration • Page Transitions: Sliding, Flipping, and Rotating • Fetching and Caching • Network Detection • Debugging & Profiling http://bit.ly/javaonemobileSunday, October 9, 2011
  44. 44. Touch Events •Duck Punch approach http://bit.ly/k8b2aB •onmousedown / onmouseup measurements for swipeSunday, October 9, 2011
  45. 45. CSS3 Media Queries Orientation Detection • Orientation Detection @media screen and (max-device-width: 320px) and (orientation:portrait) { • Viewport Settings <meta name="viewport" content="width=device-width,minimum- scale=1.0, maximum-scale=1.0"/>Sunday, October 9, 2011
  46. 46. Page Transitions • translate3D(0,0,0) • Hardware acceleration via the device GPUSunday, October 9, 2011
  47. 47. Network Detection navigator.connection {     "type": "3",     "UNKNOWN": "0",     "ETHERNET": "1",     "WIFI": "2",     "CELL_2G": "3",     "CELL_3G": "4"   }  Sunday, October 9, 2011
  48. 48. Profiling and Optimizations • Getting close to a native feel • Start with WebKit Dev Tools, SpeedTracer, yslow, etc...Sunday, October 9, 2011
  49. 49. DemosSunday, October 9, 2011
  50. 50. Questions? git@github.com:richfaces/tweetstream.gitSunday, October 9, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×