JavaOne 2011 - Going Mobile With Java Based Technologies Today
1. Going Mobile With Java Based Technologies Today
JavaOne 2011
Speaker: Wesley Hales
@wesleyhales
Sunday, October 9, 2011
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
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. Mobile Web Browsers
Available Features
Web Sockets no yes
Web Workers no no
* [10-2-2011] http://caniuse.com/#feat=webworkers
Sunday, October 9, 2011
8. Mobile Web Browsers
Available Features
appCache unlimited 10MB
Web Storage 5MB 5MB
Sunday, October 9, 2011
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
12. TweetStream
• Built to work with mobile
webkit devices
• Not using any mobile
frameworks
• Java app optimized for
mobile
Sunday, October 9, 2011
13. TweetStream
Java Tech Breakdown
• Data Grids with Infinispan
• JSR 299: CDI/Weld + Seam 3
• JMS 1.1 API
• JSF 2.0 + RichFaces 4
Sunday, October 9, 2011
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. TweetStream Twitter4J
•Open source project
•Java API for easy access
•OAuth support
•Streaming feeds
•Historical feeds
Sunday, October 9, 2011
16. TweetStream Infinispan
•Highly scalable
•In memory w/ spool off
options
•Easily clusterable and
manageable
Sunday, October 9, 2011
17. TweetStream Twitter4J
•Reliable and performant
•Flexible clustering
•Perfect for hookup into UI
Sunday, October 9, 2011
18. Access It Live Now!
http://bit.ly/mobilejava
#javaone and #mobilejava
Sunday, October 9, 2011
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 optimizations
Sunday, October 9, 2011
20. Java Mobile Web Settings
• Device and feature detection
• Optimizing RichFaces push
• JSF2 + HTML5
• Touch and gesture support
• Mime mappings
Sunday, October 9, 2011
21. Other Mobile Web Settings
• Minification (html5boilerplate)
• Ajax Improvements
• File Request Reduction
Sunday, October 9, 2011
22. Other Mobile Web Settings
• Minification (html5boilerplate)
• Ajax Improvements
• File Request Reduction
Sunday, October 9, 2011
24. Device & Feature Detection
• MobileESP (server-side)
• Modernizr (client-side)
• CSS3 Media Queries
Sunday, October 9, 2011
25. Server Side Device Detection
• Parsing the USER_AGENT
• MobileESP
• WURFL APIs
Sunday, October 9, 2011
26. Server Side Device Detection
• Parsing the USER_AGENT
• MobileESP
• WURFL APIs
Sunday, October 9, 2011
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. WURFL
Wireless Universal Resource File
• Up to date list of all mobile devices
• Available as XML file
• Wrappers for most languages
Sunday, October 9, 2011
30. Feature Detection
Modernizr
• Adds classnames of available
features to DOM
• Allows use of browser features with
fallback options
• shiv & polyfills
Sunday, October 9, 2011
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
37. JSF2 on Mobile
• Sacrifices...
• Created for the desktop
• What exists for mobile JSF today?
• the future
Sunday, October 9, 2011
38. Using JSF2 with HTML5
• HTML5 allows XML markup (which
is emitted by JSF/Facelets)
• XML Namespaces are only used
server side
Sunday, October 9, 2011
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. Back Button and Bookmarking
• Doable with 3rd party JSF
frameworks like RichFaces
• Uses location.hash
Sunday, October 9, 2011
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. Mobile UI & Experience
Sunday, October 9, 2011
43. Mobile UI & Experience
• Hardware Acceleration
• Page Transitions: Sliding, Flipping, and Rotating
• Fetching and Caching
• Network Detection
• Debugging & Profiling
http://bit.ly/javaonemobile
Sunday, October 9, 2011
44. Touch Events
•Duck Punch approach
http://bit.ly/k8b2aB
•onmousedown / onmouseup
measurements for swipe
Sunday, October 9, 2011
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. Page Transitions
• translate3D(0,0,0)
• Hardware acceleration via the
device GPU
Sunday, October 9, 2011
