JavaOne 2011 - Going Mobile With Java Based Technologies Today

Going Mobile With Java Based Technologies Today JavaOne 2011 Speaker: Wesley Hales @wesleyhalesSunday, October 9, 2011

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

Sunday, October 9, 2011

Mobile Platforms Mobile Frameworks And many more...Sunday, October 9, 2011

Todays FocusSunday, October 9, 2011

Mobile Web Browsers Available Features • As a Java developer, which HTML5 features should I care about? • Web Workers • Web Sockets • Web Storage • Application Cache • Notiﬁcations, Geolocation, etc...Sunday, October 9, 2011

Mobile Web Browsers Available Features Web Sockets no yes Web Workers no no * [10-2-2011] http://caniuse.com/#feat=webworkersSunday, October 9, 2011

Mobile Web Browsers Available Features appCache unlimited 10MB Web Storage 5MB 5MBSunday, October 9, 2011

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

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

About The DemoSunday, October 9, 2011

TweetStream • Built to work with mobile webkit devices • Not using any mobile frameworks • Java app optimized for mobileSunday, October 9, 2011

TweetStream Java Tech Breakdown • Data Grids with Inﬁnispan • JSR 299: CDI/Weld + Seam 3 • JMS 1.1 API • JSF 2.0 + RichFaces 4Sunday, October 9, 2011

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

TweetStream Twitter4J •Open source project •Java API for easy access •OAuth support •Streaming feeds •Historical feedsSunday, October 9, 2011

TweetStream Inﬁnispan •Highly scalable •In memory w/ spool off options •Easily clusterable and manageableSunday, October 9, 2011

TweetStream Twitter4J •Reliable and performant •Flexible clustering •Perfect for hookup into UISunday, October 9, 2011

Access It Live Now! http://bit.ly/mobilejava #javaone and #mobilejavaSunday, October 9, 2011

How Does Mobile Affect My Code? • Airplane mode • Integration and Extending features • Web Storage • Web Sockets • XHR2, File System API, etc... • Latency and ﬁle requests are everything • Dynamic resource serving optimizationsSunday, October 9, 2011

Java Mobile Web Settings • Device and feature detection • Optimizing RichFaces push • JSF2 + HTML5 • Touch and gesture support • Mime mappingsSunday, October 9, 2011

Other Mobile Web Settings • Miniﬁcation (html5boilerplate) • Ajax Improvements • File Request ReductionSunday, October 9, 2011

Device & Feature DetectionSunday, October 9, 2011

Device & Feature Detection • MobileESP (server-side) • Modernizr (client-side) • CSS3 Media QueriesSunday, October 9, 2011

Server Side Device Detection • Parsing the USER_AGENT • MobileESP • WURFL APIsSunday, October 9, 2011

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

WURFL Wireless Universal Resource File • Up to date list of all mobile devices • Available as XML ﬁle • Wrappers for most languagesSunday, October 9, 2011

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

Feature Detection Modernizr • Adds classnames of available features to DOM • Allows use of browser features with fallback options • shiv & polyﬁllsSunday, October 9, 2011

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

Web SocketsSunday, October 9, 2011

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

RichFaces Push • 2 options • render speciﬁc UI regions on push • parse response as JSONSunday, October 9, 2011

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

JSF + MobileSunday, October 9, 2011

JSF2 on Mobile • Sacriﬁces... • Created for the desktop • What exists for mobile JSF today? • the futureSunday, October 9, 2011

Using JSF2 with HTML5 • HTML5 allows XML markup (which is emitted by JSF/Facelets) • XML Namespaces are only used server sideSunday, October 9, 2011

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

Back Button and Bookmarking • Doable with 3rd party JSF frameworks like RichFaces • Uses location.hashSunday, October 9, 2011

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

Mobile UI & ExperienceSunday, October 9, 2011

Mobile UI & Experience • Hardware Acceleration • Page Transitions: Sliding, Flipping, and Rotating • Fetching and Caching • Network Detection • Debugging & Proﬁling http://bit.ly/javaonemobileSunday, October 9, 2011

Touch Events •Duck Punch approach http://bit.ly/k8b2aB •onmousedown / onmouseup measurements for swipeSunday, October 9, 2011

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

Page Transitions • translate3D(0,0,0) • Hardware acceleration via the device GPUSunday, October 9, 2011

Network Detection navigator.connection { "type": "3", "UNKNOWN": "0", "ETHERNET": "1", "WIFI": "2", "CELL_2G": "3", "CELL_3G": "4" } Sunday, October 9, 2011

Proﬁling and Optimizations • Getting close to a native feel • Start with WebKit Dev Tools, SpeedTracer, yslow, etc...Sunday, October 9, 2011

DemosSunday, October 9, 2011

Questions? git@github.com:richfaces/tweetstream.gitSunday, October 9, 2011

JavaOne 2011 - Going Mobile With Java Based Technologies Today

by wesleyhales on Oct 09, 2011

Accessibility

Categories

Upload Details

Usage Rights

Statistics

JavaOne 2011 - Going Mobile With Java Based Technologies Today Presentation Transcript