A Snapshot of the Mobile HTML5 Revolution

3,194 views
3,060 views

Published on

HTML5 Live conference, November 2011

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

No Downloads
Views
Total views
3,194
On SlideShare
0
From Embeds
0
Number of Embeds
155
Actions
Shares
0
Downloads
58
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

A Snapshot of the Mobile HTML5 Revolution

  1. 1. A Snapshot of the Mobile HTML5 Revolution @ jamespearce
  2. 2. The Pledge
  3. 3. Single device Multi deviceSedentary user Mobile user *Declarative ImperativeThin client Thick clientDocuments Applications * or supine, or sedentary, or passive, or...
  4. 4. A badge for all these ways the web is changing
  5. 5. HTML5 is a new version of HTML4, XHTML1, and DOM Level 2 HTML addressing many of the issues of those specifications while at the same time enhancing (X)HTMLto more adequately address Web applications. - WHATWG Wiki
  6. 6. WHATWG
  7. 7. What is an Application?
  8. 8. Consumption vs Creation? Linkable? User Experience? Architecture?
  9. 9. WebSite sites Web apps NativeApp apps Nativeness
  10. 10. MS RIM Google Apple Top US Smartphone PlatformsAugust 2011, comScore MobiLens
  11. 11. C# J2ME/Air Java/C++ Obj-CNative programming languages you’ll need August 2011
  12. 12. IE WebKit WebKit WebKitBrowser platforms to target August 2011
  13. 13. There is no WebKit on Mobile - @ppk
  14. 14. But at least we are using one language, one markup, one style system
  15. 15. One Stack
  16. 16. Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript SocketsOrientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  17. 17. The Turn
  18. 18. IE Chrome Safari Firefox iOS BBX Android @font-face CanvasHTML5 Audio & Video rgba(), hsla() border-image: border-radius: box-shadow: text-shadow: opacity:Multiple backgrounds Flexible Box Model CSS Animations CSS Columns CSS Gradients CSS Reflections CSS 2D Transforms CSS 3D Transforms CSS Transitions Geolocation API local/sessionStorage SVG/SVG Clipping SMIL Inline SVG Drag and Drop hashchangeX-window Messaging History Management applicationCache Web Sockets Web Workers Web SQL Database WebGL IndexedDB
  19. 19. Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
  20. 20. 100%Support Browsers Capabilities & specifications
  21. 21. 100%Support Browsers Polyfills Frameworks Capabilities & specifications
  22. 22. <!DOCTYPE html><html> <head> <title>jQuery Mobile</title> <script src="jq.js"></script><script src="jqm.js"></script> <link rel="stylesheet" href="jqm.css" /> </head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>Hello World</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Continents</li> <li><a href="na.html">North America</a></li> <li><a href="sa.html">South America</a></li> <li><a href="eu.html">Europe</a></li> </ul> </div> </div> </body></html>
  23. 23. <!DOCTYPE html><html> <head> <title>Sencha Touch</title> <script src="st.js"></script> <link rel="stylesheet" href="st.css" /> <script type="text/javascript" charset="utf-8"> new Ext.Application({ launch: function() { var continents = new Ext.data.Store({ model: Ext.regModel(, {fields: [name, link]}), data: [ {name: North America, link:na}, {name: South America, link:sa}, {name: Europe, link:eu} ] }); new Ext.Panel({ fullscreen: true, dockedItems: [{ xtype: toolbar, title: Hello World, }], items: [{ xtype: list, store: continents, itemTpl: {name} }] }); } }); </script> </head><body></body></html>
  24. 24. One Web stack requestUser interface Rendering responseBusiness logic Storage server client
  25. 25. An Alternative Web Stack User interface sync API Business logicStorage Storage server client
  26. 26. But there is aa place for both
  27. 27. But...
  28. 28. HTML5 apps can’t match native performance (true, sometimes)
  29. 29. http://vimeo.com/30296006http://vimeo.com/30324079
  30. 30. Are HTML5 apps more e cient to develop? (yes, in theory, but it’s early days)
  31. 31. 24 dev-months for iOShttp://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
  32. 32. 12 further dev-monthsfor Android & BlackBerry http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
  33. 33. ...but moreengagementthanthe native app
  34. 34. Mobile HTML5 developmentlacks good tooling (yes)
  35. 35. http://github.com/jamesgpearce/confess
  36. 36. Weinre
  37. 37. HTML5 appscan’t be monetized,can’t be distributed (not a technology problem)
  38. 38. WebCompromise sites Web apps Hybrid apps Native apps Nativeness
  39. 39. Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript SocketsOrientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  40. 40. Browser Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript SocketsOrientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  41. 41. Native Wrapper WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript SocketsOrientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  42. 42. Native app storeshave a dirty secret
  43. 43. HTML5 apps can’t accessdevice functionality (goddamn it)
  44. 44. Native Wrapper WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript SocketsOrientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  45. 45. Hybrid apps- the ultimate polyfill
  46. 46. PhoneGap^H^H^H Apache Callback AppMobi NimbleKit
  47. 47. Recent browser updates
  48. 48. iOS 5Input typescontenteditableposition:fixedclassListXHR2Script defer & asyncInline SVGWeb Workers
  49. 49. overflow: scroll;-webkit-overflow-scrolling: touch;
  50. 50. http://jamesgpearce.github.com/compios5/
  51. 51. Android 4SVG at allCSS3 3D transformsclassListXHR2Script defer & async<details> & <summary>File readerDevice orientationNavigation timing
  52. 52. window.performance
  53. 53. <input type="file" id="picker" accept="image/*" capture="camera">// camcorder// microphone// filesystemvar image = picker.files[0];
  54. 54. The Prestige
  55. 55. Sir Isaac Newton
  56. 56. Three Laws of Motion(the universe works as we might expect it to)
  57. 57. Albert Michelson Edward Morley
  58. 58. Light Travels at a Constant Speed(the universe doesn’t work as we thought it would)
  59. 59. Relativistic Mechanics Exploration Classical Mechanics Familiarity Quantum Mechanics Exploration
  60. 60. The Web Today is likePhysics in 1900
  61. 61. Mobileis our Michelson-Morley Experiment
  62. 62. Apps or Sites? Responsive Design? Browser diversity? Mobile Context? One Web?(an inability to answer these questions does not constitute an excuse not to innovate)
  63. 63. What does the web look like when you have...
  64. 64. CameraMicrophone Contacts CalendarMessagingTelephony NFC ?
  65. 65. Media Capture (HTML) Media Capture (API)Battery status Application RegistrationContacts CalendarMessaging (SMS, MMS...) Feature PermissionsNetwork Information API Sensor API Vibration API Menu APIAudio Volume Permissions for APIsBeepGallerySystems info and eventsTasks
  66. 66. Accelerometer APDU (SmartCard)Orientation BluetoothCamera CryptoDeviceStatus DLNAFilesystem Server PushMessaging SensorGeolocation TelephonyPIM ContactsCalendarTasksDeviceInteraction
  67. 67. TelephonyMessagingContactsClockCameraFilesystemCalculatorDevice StatusSettingsAccelerometerMouse LockMaps
  68. 68. The mobile web becomes more than a 320px web
  69. 69. window.addEventListener( appointmentdue, function(appt) { if (device.near(WORK)) { siri.remind( contacts.get(Peter), calendar.getDetails(appt) ); } }, false); (PS: This code does not work. Yet)
  70. 70. Mobile device APIs are the web’s next great leap forward
  71. 71. James Pearce@ jamespearce

×