Post on 12-May-2015
Going Mobile With Java Based Technologies TodayJavaOne 2011Speaker: Wesley Hales@wesleyhales
Sunday, October 9, 2011
• Senior Developer at Red Hat
• W3C Member
• JSR 301/329 Rep.
• HTML5 User Group Founder
• html5rocks.com, DZone Refcard, and author of many other articles around the web.
Wesley Hales@wesleyhales
Sunday, October 9, 2011
Sunday, October 9, 2011
Mobile Platforms
Mobile Frameworks
And many more...
Sunday, October 9, 2011
Todays Focus
Sunday, October 9, 2011
Mobile Web Browsers
• As a Java developer, which HTML5 features should I care about?
• Web Workers
• Web Sockets
• Web Storage
• Application Cache
• Notifications, Geolocation, etc...
Available Features
Sunday, October 9, 2011
Mobile Web Browsers
Web Sockets no yes
Web Workers no no
* [10-2-2011] http://caniuse.com/#feat=webworkers
Available Features
Sunday, October 9, 2011
Mobile Web Browsers
appCache unlimited 10MB
Web Storage 5MB 5MB
Available Features
Sunday, 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 Practices1) 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...)
When working with HTML5
Sunday, October 9, 2011
About The Demo
Sunday, October 9, 2011
TweetStream
• Built to work with mobile webkit devices
• Not using any mobile frameworks
• Java app optimized for mobile
Sunday, October 9, 2011
Java Tech Breakdown
• Data Grids with Infinispan
• JSR 299: CDI/Weld + Seam 3
• JMS 1.1 API
• JSF 2.0 + RichFaces 4
TweetStream
Sunday, October 9, 2011
TweetStream Architectural Overview
Fron
t End
/ U
ser I
nter
face
Ric
hfac
es /
Wel
d / S
eam
TwitterSource gets JUDCon tweet historybased on "tracks", on application start
CacheListener Listens for infinispan events and publishes refreshed view
TweetListenerBean listens for real time tweets based on hashtag.Triggers refresh of CacheBuilder
Css
Tra
nsiti
ons
sock
et/c
omet
div
upd
ate
.js D
OM
twee
t filte
ring
CacheBuilder stores different key value sets into infinispan.
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 feeds
Sunday, October 9, 2011
TweetStream Infinispan
•Highly scalable
•In memory w/ spool off
options
•Easily clusterable and
manageable
Sunday, October 9, 2011
TweetStream Twitter4J
•Reliable and performant
•Flexible clustering
•Perfect for hookup into UI
Sunday, October 9, 2011
Access It Live Now!http://bit.ly/mobilejava
#javaone and #mobilejava
Sunday, October 9, 2011
• 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
How Does Mobile Affect My Code?
Sunday, October 9, 2011
• Device and feature detection
• Optimizing RichFaces push
• JSF2 + HTML5
• Touch and gesture support
• Mime mappings
Java Mobile Web Settings
Sunday, October 9, 2011
• Minification (html5boilerplate)
• Ajax Improvements
• File Request Reduction
Other Mobile Web Settings
Sunday, October 9, 2011
• Minification (html5boilerplate)
• Ajax Improvements
• File Request Reduction
Other Mobile Web Settings
Sunday, October 9, 2011
Device & Feature Detection
Sunday, October 9, 2011
• MobileESP (server-side)
• Modernizr (client-side)
• CSS3 Media Queries
Device & Feature Detection
Sunday, October 9, 2011
• Parsing the USER_AGENT
•
• WURFL APIs
Server Side Device Detection
MobileESP
Sunday, October 9, 2011
• Parsing the USER_AGENT
•
• WURFL APIs
Server Side Device Detection
MobileESP
Sunday, 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
WURFLWireless Universal Resource File
• Up to date list of all mobile devices
• Available as XML file
• Wrappers for most languages
Sunday, October 9, 2011
• <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">
Modernizr
Feature Detection
Sunday, October 9, 2011
• Adds classnames of available features to DOM
• Allows use of browser features with fallback options
• shiv & polyfills
Modernizr
Feature Detection
Sunday, 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 Sockets
Sunday, October 9, 2011
• Integrates with Atmosphere
• Supports Comet & WebSockets
• Allows usage JMS queues/topic
• Optimizable with custom queueing or use of CDI events
RichFaces Push
Sunday, October 9, 2011
• 2 options
• render specific UI regions on push
• parse response as JSON
RichFaces Push
Sunday, October 9, 2011
<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>
RichFaces Push
Sunday, October 9, 2011
JSF + Mobile
Sunday, October 9, 2011
• Sacrifices...
• Created for the desktop
• What exists for mobile JSF today?
• the future
JSF2 on Mobile
Sunday, October 9, 2011
• HTML5 allows XML markup (which is emitted by JSF/Facelets)
• XML Namespaces are only used server side
Using JSF2 with HTML5
Sunday, October 9, 2011
<!DOCTYPE html><html lang="en" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html"> <h:head> <title>Title</title> </h:head> <h:body> <h:outputText value="#{bean.text}" /> </h:body></html>
Using JSF2 with HTML5
<!DOCTYPE html><html lang="en"> <head> <title>Title</title> </head> <body> Some text </body></html>
Normal JSF Markup... Renders to...
Sunday, October 9, 2011
• Doable with 3rd party JSF frameworks like RichFaces
• Uses location.hash
Back Button and Bookmarking
Sunday, October 9, 2011
Back Button and Bookmarking
<a4j:jsFunction name="handleHashChange" render="@form" oncomplete="slideTo('foo')"> <f:param name="demo" value="param1"/> <f:param name="sample" value="param2"/></a4j:jsFunction>
window.onhashchange = function(){ handleHashChange(location.hash.split(':'))};
location.hash.split(':')
http://someurl.com/#foo:bar
Sunday, October 9, 2011
Mobile UI & Experience
Sunday, October 9, 2011
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
Touch Events
•Duck Punch approach http://bit.ly/k8b2aB
•onmousedown / onmouseup measurements for swipe
Sunday, October 9, 2011
CSS3 Media Queries• 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"/>
Orientation Detection
Sunday, October 9, 2011
• translate3D(0,0,0)
• Hardware acceleration via the device GPU
Page Transitions
Sunday, October 9, 2011
Network Detectionnavigator.connection { "type": "3", "UNKNOWN": "0", "ETHERNET": "1", "WIFI": "2", "CELL_2G": "3", "CELL_3G": "4" }
Sunday, October 9, 2011
• Getting close to a native feel
• Start with WebKit Dev Tools, SpeedTracer, yslow, etc...
Profiling and Optimizations
Sunday, October 9, 2011
Demos
Sunday, October 9, 2011
Questions?git@github.com:richfaces/tweetstream.git
Sunday, October 9, 2011