0
Jay Balunas | JBoss, By Red HatThe Mobile Web Revealed For    The Java Developer
Who am I• RichFaces Project Lead• JBoss Core Developer• JSF 2.2 Expert Group• Red Hat W3C Member
TweetStream• RichFaces 4.0 + JSF 2• Built to support mobile  webkit devices• No 3rd party front end  frameworks• Completel...
Check It Out For YourselfHosted on OpenShift: http://bit.ly/tweetstream2Matching Tweets Tags:   #JBoss   #RichFaces   #JAX...
Are You A Mobile  Developer?
Mobile Developer?• Do you have mobile requirements today?• How about the near future?• Will your boss know what he/she wan...
Even if you said NOThe answer is probably YES
Why?        • 1 billion smart phones today        • 2014 mobile internet > desktop internet        • End of 2010 53% of co...
So Now What?
What you need to know• Native, Web, Hybrid Applications• The Mobile Web• HTML5 Influence• Framework Support• Links & Wrap Up
A Mobile Device Is:• Smartphone & tablet devices• Support complex native        Not  applications• Access to the standard ...
Native, Mobile Web, Hybrid• Whats the difference, and why I care?• What can the apps do?• Can I use the skills I already h...
Native• Full access to device features  –Software & hardware• Performance• Advanced graphics• Easy offline support• Built ...
Native• New languages & APIs• Controlled marketplace & process• Upgrading• Porting to multiple devices• Lock in
Mobile Web• Write/host once, run anywhere*• Upgrades = refresh• Creative freedom• Use skills you already have• Same back e...
Mobile Web• Limited access to device features• Performance & graphics concerns• Cross browser support issues• Quirky netwo...
Hybrid Apps• Mixes native & web technologies• Many vendors are offering solutions• Claims “best of both”• Lots of variatio...
Hybrid App Variations• Native app that pulls in web content• Native app “compiled” from web technologies• Native app shell...
The Spectrum                                               mixed                Appceleratornative                        ...
So how do you choose?
What you need to know• Native, Web, Hybrid Applications• The Mobile Web• HTML5 Influence• Framework Support• Links & Wrap Up
Great Time For The Mobile Web         • Billions in revenue, and investments         • Device makers & carriers are drivin...
Why The Enterprise Needs          The Mobile Web• You’re not making the next angry birds!• Large investments & requirement...
Different Mobile Webs?• Standard web site with compatibility• Minor variations for compatibility• One page using Markup/CS...
Things to consider• Context and Navigation• Design & Usability Tips• Device/feature detection• Orientation layout support
Context and Navigation• Define your use-cases• Why is the user accessing your site  – From where?  – From what?• Is functi...
Design & Usability• Use view port & scaling• Load only data that is needed• Don’t rely too heavily on resolution• Don’t bu...
Device & Feature Detection
Header InspectionHTTP_HOST == myproxylists.comHTTP_USER_AGENT == Mozilla/5.0 (iPad; U; CPU OS 4_3_2 like Mac OS X; en-us) ...
What Can We Tell?• Operating system• Browser type & version• IP address• Can infer   – Carrier   – Country   – Device bran...
How do I do that?//Retrieve and parse the headerFacesContext facesContext = FacesContext.getCurrentInstance();Map<String, ...
Help Is Out There                 • MobileESP                                   Single Class                              ...
TweetStream & Mobile ESP@Named("userAgent")@RequestScopedpublic class UserAgentProcessor{   @PostConstruct   public void i...
Mobile ESP    public boolean isPhone()    {       //Detects a whole tier of phones that support       // similar functiona...
Bookmarks– Are your pages “bookmarkable” ?– Does the one URL handle all devices?– Can the user choose the format?
home.xhtml                                            Single Point of Entry <c:choose>    <c:when test="#{userAgent.phone}...
Feature Detection• “Future proof”• Enhances device detection• JavaScript object, attribute checking• Good for handling the...
Modernizr ExampleSimple JavaScript File to load   .multiplebgs div p {     /* properties for browsers that        support ...
My Advice• Device detection = high level content  form-factor• Feature detection = nuances within a  device type
Orientation Layout Changes• Supported on most modern devices• Optimize your layout• CSS3 & @media
TweetStream & Orientation/* catch tablet portrait orientation */@media all and (orientation:portrait) {}/* catch tablet la...
What you need to know• Native, Web, Hybrid Applications• The Mobile Web• HTML5 Influence• Framework Support• Links & Wrap Up
HTML5"HTML5 is anything you want it to be as    long as its new and cool."-Peter Paul Koch
HTML5• New semantic tags  – <header>,<aside>,<section>, etc..• Video & Audio tags• New input types, and form elements  – t...
Non-HTML5 HTML5• Canvas 2D                                   <canvas>• Geolocation• Web Storage                           ...
CSS 3• Media Queries  –Display size                   @media all and  –Orientation     (orientation:landscape) {  –Aspect ...
Not All Wonderful• Different vendors have different levels of support• Custom tags, styles for specific browsers• Specific...
Keep Up On The Latest            http://quirksmode.org• Regularly updated browser support tests• Spans OS’s, Browsers, Dev...
What you need to know• Native, Web, Hybrid Applications• The Mobile Web• HTML5 Influence• Framework Support• Links & Wrap Up
Framework Support• Home spun markup, custom JavaScript, and JQuery• Google web toolkit ( GWT )• JSF2 + RichFaces 4
Home Spun• Amazing flexibility• Page structure, style, scripts  all in your control• Separation of concerns• jQuery and ot...
Home Spun• Amazingly flexible• You own it all• Extensive HTML,  JavaScript, CSS skills• Lots to manage, develop,  and main...
GWT• Open source & backed by Google• Write apps mostly using Java – JavaScript compiler• GWT handles a many x-browser issu...
GWT• Really one vendor• Non-standard• Support options are limited                                  or• CSS still required ...
JSF 2 &• Standard based• Full EE6 stack of features• Balanced between implementation & details• Backed by many vendors, an...
Complexity When You Need It• Handle the details  – Don’t hide them• Access to JavaScript/CSS• Use as much or as little of ...
JSF 2 & RichFaces                                    Projects like                                    RichFaces can• Speci...
So How Do I Choose?
What you need to know• Native, Web, Hybrid Applications• The Mobile Web• HTML5 Influence• Framework Support• Links & Wrap Up
For more information    JBoss Projects                           Specification Info•   http://jboss.org                   ...
Q&A•   http://in.relation.to/Bloggers/Jay•   http://twitter.com/tech4j•   http://github.com/balunasj•   jbalunas@jboss.org
The Mobile Web Revealed For The Java Developer
Upcoming SlideShare
Loading in...5
×

The Mobile Web Revealed For The Java Developer

1,233

Published on

Given at JAXConf/JSFSummit, San Jose, June 2011

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Transcript of "The Mobile Web Revealed For The Java Developer"

  1. 1. Jay Balunas | JBoss, By Red HatThe Mobile Web Revealed For The Java Developer
  2. 2. Who am I• RichFaces Project Lead• JBoss Core Developer• JSF 2.2 Expert Group• Red Hat W3C Member
  3. 3. TweetStream• RichFaces 4.0 + JSF 2• Built to support mobile webkit devices• No 3rd party front end frameworks• Completely driven by JBoss tech
  4. 4. Check It Out For YourselfHosted on OpenShift: http://bit.ly/tweetstream2Matching Tweets Tags: #JBoss #RichFaces #JAXConf #JSFSummitSource on GitHub: https://github.com/richfaces/tweetstream
  5. 5. Are You A Mobile Developer?
  6. 6. Mobile Developer?• Do you have mobile requirements today?• How about the near future?• Will your boss know what he/she wants?• Will you be ready for it?
  7. 7. Even if you said NOThe answer is probably YES
  8. 8. Why? • 1 billion smart phones today • 2014 mobile internet > desktop internet • End of 2010 53% of companies will have deployed iPhones • Tablet revenue to surpass $49B by 2015 • And on, and on, and on...http://www.thefonestuff.com/news/10/Mobile-Phone-Facts-2011.htmlAberdeen Group dec 2009
  9. 9. So Now What?
  10. 10. What you need to know• Native, Web, Hybrid Applications• The Mobile Web• HTML5 Influence• Framework Support• Links & Wrap Up
  11. 11. A Mobile Device Is:• Smartphone & tablet devices• Support complex native Not applications• Access to the standard web via advanced browsers
  12. 12. Native, Mobile Web, Hybrid• Whats the difference, and why I care?• What can the apps do?• Can I use the skills I already have?• How can I maintain it?
  13. 13. Native• Full access to device features –Software & hardware• Performance• Advanced graphics• Easy offline support• Built in market place and purchasing• Developer tools from venders
  14. 14. Native• New languages & APIs• Controlled marketplace & process• Upgrading• Porting to multiple devices• Lock in
  15. 15. Mobile Web• Write/host once, run anywhere*• Upgrades = refresh• Creative freedom• Use skills you already have• Same back end services you already have• Easy intranet as well as Internet
  16. 16. Mobile Web• Limited access to device features• Performance & graphics concerns• Cross browser support issues• Quirky network connections• Limited offline support• Market Awareness
  17. 17. Hybrid Apps• Mixes native & web technologies• Many vendors are offering solutions• Claims “best of both”• Lots of variations• Usually boils down to a native application
  18. 18. Hybrid App Variations• Native app that pulls in web content• Native app “compiled” from web technologies• Native app shell around a browser –Varying degrees
  19. 19. The Spectrum mixed Appceleratornative custom web wrapper RhoMobile desktop web mash-ups phone gap
  20. 20. So how do you choose?
  21. 21. What you need to know• Native, Web, Hybrid Applications• The Mobile Web• HTML5 Influence• Framework Support• Links & Wrap Up
  22. 22. Great Time For The Mobile Web • Billions in revenue, and investments • Device makers & carriers are driving technology • HTML 5 technologies advancing • Near native application support is possible • Huge developer base with existing skills • Native apps are increasingly silo’ed techhttp://www.gomonews.com/mobile-web-application-development-platforms-will-generate-2-6-billion-by-201/http://venturebeat.com/2011/04/07/how-html5-will-kill-the-native-app/
  23. 23. Why The Enterprise Needs The Mobile Web• You’re not making the next angry birds!• Large investments & requirements already in place• Intranet support can be a blocker for many• You don’t target the device the device targets you• Transactions, security, messaging, persistence• Cloud functionality only strengthens the argument
  24. 24. Different Mobile Webs?• Standard web site with compatibility• Minor variations for compatibility• One page using Markup/CSS to adjust content• Device/format specific pages with advanced support for app like behaviors
  25. 25. Things to consider• Context and Navigation• Design & Usability Tips• Device/feature detection• Orientation layout support
  26. 26. Context and Navigation• Define your use-cases• Why is the user accessing your site – From where? – From what?• Is functionality different: – Desktop? – Device type?• Limit transitions, and clicks• Don’t offer the world, offer workflows
  27. 27. Design & Usability• Use view port & scaling• Load only data that is needed• Don’t rely too heavily on resolution• Don’t bunch controls• Avoid internal scrollbars• Avoid fluff & complex branding• Don’t launch new pages• Limit input text that is needed
  28. 28. Device & Feature Detection
  29. 29. Header InspectionHTTP_HOST == myproxylists.comHTTP_USER_AGENT == Mozilla/5.0 (iPad; U; CPU OS 4_3_2 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8H7Safari/6533.18.5HTTP_ACCEPT == application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5HTTP_ACCEPT_LANGUAGE == en-usHTTP_ACCEPT_ENCODING == gzip, deflateHTTP_CONNECTION == keep-aliveREMOTE_ADDR == xx.xxx.x.xxxREMOTE_PORT == 53298REQUEST_METHOD == GETREQUEST_URI == /my-http-headersREQUEST_TIME == 1304015649REMOTE_HOST == pool-xx-xxx-x-xxx.fios.verizon.netCOUNTRY == [US] UNITED STATES iPad Request Header
  30. 30. What Can We Tell?• Operating system• Browser type & version• IP address• Can infer – Carrier – Country – Device brand & model
  31. 31. How do I do that?//Retrieve and parse the headerFacesContext facesContext = FacesContext.getCurrentInstance();Map<String, String> headerList = facesContext. getExternalContext().getRequestHeaderMap();String UserAgent = headerList.get("user-agent");//Parse, and manage everything..... Don’t do this to yourself
  32. 32. Help Is Out There • MobileESP Single Class User-Agent Processor • WURFL APIsWireless Universal Resource File
  33. 33. TweetStream & Mobile ESP@Named("userAgent")@RequestScopedpublic class UserAgentProcessor{ @PostConstruct public void init() { .... userAgentStr = request.getHeader("user-agent"); httpAccept = request.getHeader("Accept"); uAgentTest = new UAgentInfo(userAgentStr, httpAccept); } http://bit.ly/twstr_useragent
  34. 34. Mobile ESP 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(); }} http://bit.ly/twstr_useragent
  35. 35. Bookmarks– Are your pages “bookmarkable” ?– Does the one URL handle all devices?– Can the user choose the format?
  36. 36. home.xhtml Single Point of Entry <c:choose> <c:when test="#{userAgent.phone}"> <ui:include src="phoneHome.xhtml"/> </c:when> <c:when test="#{userAgent.tablet}"> <ui:include src="tabletHome.xhtml"/> </c:when> <c:otherwise> <!-- <ui:include src=”desktopHome.xhtml”/> <ui:include src="tabletHome.xhtml"/> </c:otherwise> </c:choose> Detection Made By Form-Factorhttp://bit.ly/twstr_homexhtml
  37. 37. Feature Detection• “Future proof”• Enhances device detection• JavaScript object, attribute checking• Good for handling the nuances• Different project & options out there
  38. 38. Modernizr ExampleSimple JavaScript File to load .multiplebgs div p { /* properties for browsers that support multiple backgrounds */ } .no-multiplebgs div p { /* optional fallback properties for browsers that dont */ }
  39. 39. My Advice• Device detection = high level content form-factor• Feature detection = nuances within a device type
  40. 40. Orientation Layout Changes• Supported on most modern devices• Optimize your layout• CSS3 & @media
  41. 41. TweetStream & Orientation/* catch tablet portrait orientation */@media all and (orientation:portrait) {}/* catch tablet landscape orientation */@media all and (orientation:landscape) {} http://bit.ly/twstr_orientation
  42. 42. What you need to know• Native, Web, Hybrid Applications• The Mobile Web• HTML5 Influence• Framework Support• Links & Wrap Up
  43. 43. HTML5"HTML5 is anything you want it to be as long as its new and cool."-Peter Paul Koch
  44. 44. HTML5• New semantic tags – <header>,<aside>,<section>, etc..• Video & Audio tags• New input types, and form elements – type=email, date, tel, color, etc...• Offline Web Cache
  45. 45. Non-HTML5 HTML5• Canvas 2D <canvas>• Geolocation• Web Storage window.geolocation• Web Workers• Web Socket• Server-side Events• Device Orientation Events
  46. 46. CSS 3• Media Queries –Display size @media all and –Orientation (orientation:landscape) { –Aspect Ratio• Borders, backgrounds, and colors –Gradient colors –Rounded corners• Selectors
  47. 47. Not All Wonderful• Different vendors have different levels of support• Custom tags, styles for specific browsers• Specifications are a long way from final• Some special handling likely always needed
  48. 48. Keep Up On The Latest http://quirksmode.org• Regularly updated browser support tests• Spans OS’s, Browsers, Devices• Covers HTML 5, Webkit extensions, and more
  49. 49. What you need to know• Native, Web, Hybrid Applications• The Mobile Web• HTML5 Influence• Framework Support• Links & Wrap Up
  50. 50. Framework Support• Home spun markup, custom JavaScript, and JQuery• Google web toolkit ( GWT )• JSF2 + RichFaces 4
  51. 51. Home Spun• Amazing flexibility• Page structure, style, scripts all in your control• Separation of concerns• jQuery and others to help you through• Detailed optimizations• Container supported content available
  52. 52. Home Spun• Amazingly flexible• You own it all• Extensive HTML, JavaScript, CSS skills• Lots to manage, develop, and maintain• Get wrapped up in the details quickly• Limited MVC support
  53. 53. GWT• Open source & backed by Google• Write apps mostly using Java – JavaScript compiler• GWT handles a many x-browser issues• User agent support determined at compile time• Additional support announced at Google IO• 3rd party projects out there as well
  54. 54. GWT• Really one vendor• Non-standard• Support options are limited or• CSS still required for style• 3rd party projects are either immature, or stale.
  55. 55. JSF 2 &• Standard based• Full EE6 stack of features• Balanced between implementation & details• Backed by many vendors, and options• Mobile integration today• Advanced mobile features in development• Enterprise support available
  56. 56. Complexity When You Need It• Handle the details – Don’t hide them• Access to JavaScript/CSS• Use as much or as little of EE as you like• Participate, extend, and adjust as needed
  57. 57. JSF 2 & RichFaces Projects like RichFaces can• Specifications can move slowly lead the way!• Integrated, advanced mobile support is in development• CSS, XHMTL, and JavaScript skills needed Nearly fullFunctionality based. functionalityNot too much, not available todaytoo little
  58. 58. So How Do I Choose?
  59. 59. What you need to know• Native, Web, Hybrid Applications• The Mobile Web• HTML5 Influence• Framework Support• Links & Wrap Up
  60. 60. For more information JBoss Projects Specification Info• http://jboss.org • http://html5rocks.com• http://richfaces.org • http://www.w3c.org• http://richfaces.org/showcase • http://jcp.org• http://jboss.org/errai • http://quirksmode.org Mobile Web Device Dev Sites• http://jquerymobile.com • http://developer.apple.com• http://sproutcore.com • http://developer.android.com• http://code.google.com/webtoolkit • http://blackberry.com/developers• http://wurfl.sourceforge.net • http://msdn.microsoft.com/en-us/• http://mobileesp.com windowsmobile/• http://modernizr.com
  61. 61. Q&A• http://in.relation.to/Bloggers/Jay• http://twitter.com/tech4j• http://github.com/balunasj• jbalunas@jboss.org
  1. A particular slide catching your eye?

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

×