JavaOne 2011 - Going Mobile With Java Based Technologies Today

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


Mobile Platforms

Mobile Frameworks

And many more...


Todays Focus


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


Mobile Web Browsers

Web Sockets no yes

Web Workers no no

* [10-2-2011] http://caniuse.com/#feat=webworkers

Available Features


http://caniuse.com/#feat=webworkers

http://caniuse.com/#feat=webworkers

Mobile Web Browsers

appCache unlimited 10MB

Web Storage 5MB 5MB

Available Features


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>


http://dev.w3.org/html5/spec-author-view/iana.html#text-html-sandboxed

http://dev.w3.org/html5/spec-author-view/iana.html#text-html-sandboxed

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


About The Demo


TweetStream

• Built to work with mobile webkit devices

• Not using any mobile frameworks

• Java app optimized for mobile


Java Tech Breakdown

• Data Grids with Infinispan

• JSR 299: CDI/Weld + Seam 3

• JMS 1.1 API

• JSF 2.0 + RichFaces 4

TweetStream


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.


TweetStream Twitter4J

•Open source project

•Java API for easy access

•OAuth support

•Streaming feeds

•Historical feeds


TweetStream Infinispan

•Highly scalable

•In memory w/ spool off

options

•Easily clusterable and

manageable


TweetStream Twitter4J

•Reliable and performant

•Flexible clustering

•Perfect for hookup into UI


Access It Live Now!http://bit.ly/mobilejava

#javaone and #mobilejava


http://bit.ly/mobilejava

http://bit.ly/mobilejava

http://bit.ly/goingmobile

http://bit.ly/goingmobile

• 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?


• Device and feature detection

• Optimizing RichFaces push

• JSF2 + HTML5

• Touch and gesture support

• Mime mappings

Java Mobile Web Settings


• Minification (html5boilerplate)

• Ajax Improvements

• File Request Reduction

Other Mobile Web Settings


Device & Feature Detection


• MobileESP (server-side)

• Modernizr (client-side)

• CSS3 Media Queries

Device & Feature Detection


• Parsing the USER_AGENT

•

• WURFL APIs

Server Side Device Detection

MobileESP


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(); }}


WURFLWireless Universal Resource File

• Up to date list of all mobile devices

• Available as XML file

• Wrappers for most languages


• <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


• Adds classnames of available features to DOM

• Allows use of browser features with fallback options

• shiv & polyfills

Modernizr

Feature Detection


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;}


Web Sockets


• Integrates with Atmosphere

• Supports Comet & WebSockets

• Allows usage JMS queues/topic

• Optimizable with custom queueing or use of CDI events

RichFaces Push


• 2 options

• render specific UI regions on push

• parse response as JSON

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>

RichFaces Push


JSF + Mobile


• Sacrifices...

• Created for the desktop

• What exists for mobile JSF today?

• the future

JSF2 on Mobile


• HTML5 allows XML markup (which is emitted by JSF/Facelets)

• XML Namespaces are only used server side

Using JSF2 with HTML5


<!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...


http://java.sun.com/jsf/core

http://java.sun.com/jsf/core

http://java.sun.com/jsf/html

http://java.sun.com/jsf/html

• Doable with 3rd party JSF frameworks like RichFaces

• Uses location.hash

Back Button and Bookmarking


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


http://someurl.com/#

http://someurl.com/#

Mobile UI & Experience


Mobile UI & Experience• Hardware Acceleration

• Page Transitions: Sliding, Flipping, and Rotating

• Fetching and Caching

• Network Detection

• Debugging & Profiling

http://bit.ly/javaonemobile


http://www.html5rocks.com/en/mobile/optimization-and-performance.html

http://www.html5rocks.com/en/mobile/optimization-and-performance.html

Touch Events

•Duck Punch approach http://bit.ly/k8b2aB

•onmousedown / onmouseup measurements for swipe


http://bit.ly/k8b2aB

http://bit.ly/k8b2aB

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


• translate3D(0,0,0)

• Hardware acceleration via the device GPU

Page Transitions


Network Detectionnavigator.connection { "type": "3", "UNKNOWN": "0", "ETHERNET": "1", "WIFI": "2", "CELL_2G": "3", "CELL_3G": "4" }


• Getting close to a native feel

• Start with WebKit Dev Tools, SpeedTracer, yslow, etc...

Profiling and Optimizations


Demos


[email protected]:richfaces/tweetstream.git


mailto:[email protected]

mailto:[email protected]

JavaOne 2011 - Going Mobile With Java Based Technologies Today

Technology

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