A Snapshot of the Mobile HTML5 Revolution
4 likes2,547 views
The document discusses the evolution of HTML5 and mobile applications. It notes that HTML5 allows building applications that work across different devices using a single codebase, but that native apps still have advantages in terms of performance and access to device functionality. Hybrid apps use a native wrapper and WebView to bridge this gap by allowing HTML5 apps to access device APIs while retaining cross-platform capabilities. Overall the document examines the tradeoffs between different mobile app approaches.
![<!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>](https://image.slidesharecdn.com/asnapshotofthemobilehtml5revolution-111108202449-phpapp02/85/A-Snapshot-of-the-Mobile-HTML5-Revolution-27-320.jpg)
![<input type="file" id="picker"
accept="image/*"
capture="camera"
>
// camcorder
// microphone
// filesystem
var image = picker.files[0];](https://image.slidesharecdn.com/asnapshotofthemobilehtml5revolution-111108202449-phpapp02/85/A-Snapshot-of-the-Mobile-HTML5-Revolution-63-320.jpg)
A Snapshot of the Mobile HTML5 Revolution
- 1. A Snapshot of the Mobile HTML5 Revolution @ jamespearce
- 2. The Pledge
- 3. Single device Multi device Sedentary user Mobile user * Declarative Imperative Thin client Thick client Documents Applications * or supine, or sedentary, or passive, or...
- 4. A badge for all these ways the web is changing
- 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)HTML to more adequately address Web applications. - WHATWG Wiki
- 6. WHATWG
- 7. What is an Application?
- 8. Consumption vs Creation? Linkable? User Experience? Architecture?
- 9. Web Site sites Web apps Native App apps Nativeness
- 10. MS RIM Google Apple Top US Smartphone Platforms August 2011, comScore MobiLens
- 11. C# J2ME/Air Java/C++ Obj-C Native programming languages you’ll need August 2011
- 12. IE WebKit WebKit WebKit Browser platforms to target August 2011
- 13. There is no WebKit on Mobile - @ppk
- 14. But at least we are using one language, one markup, one style system
- 15. One Stack
- 16. Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
- 19. The Turn
- 20. IE Chrome Safari Firefox iOS BBX Android @font-face Canvas HTML5 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 hashchange X-window Messaging History Management applicationCache Web Sockets Web Workers Web SQL Database WebGL IndexedDB
- 21. Stay on top of diversity Can I Use? http://caniuse.com Modernizr http://modernizr.com DeviceAtlas http://deviceatlas.com
- 22. 100% Support Browsers Capabilities & specifications
- 23. 100% Support Browsers Polyfills Frameworks Capabilities & specifications
- 25. <!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>
- 27. <!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>
- 29. One Web stack request User interface Rendering response Business logic Storage server client
- 30. An Alternative Web Stack User interface sync API Business logic Storage Storage server client
- 31. But there is a a place for both
- 34. But...
- 35. HTML5 apps can’t match native performance (true, sometimes)
- 37. Are HTML5 apps more e cient to develop? (yes, in theory, but it’s early days)
- 39. 24 dev-months for iOS http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
- 40. 12 further dev-months for Android & BlackBerry http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
- 42. Mobile HTML5 development lacks good tooling (yes)
- 44. Weinre
- 45. HTML5 apps can’t be monetized, can’t be distributed (not a technology problem)
- 46. Web Compromise sites Web apps Hybrid apps Native apps Nativeness
- 47. Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
- 48. Browser Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
- 49. Native Wrapper WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
- 51. Native app stores have a dirty secret
- 53. HTML5 apps can’t access device functionality (goddamn it)
- 54. Native Wrapper WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
- 55. Hybrid apps - the ultimate polyfill
- 56. PhoneGap^H^H^H Apache Callback AppMobi NimbleKit
- 58. iOS 5 Input types contenteditable position:fixed classList XHR2 Script defer & async Inline SVG Web Workers
- 61. Android 4 SVG at all CSS3 3D transforms classList XHR2 Script defer & async <details> & <summary> File reader Device orientation Navigation timing
- 63. <input type="file" id="picker" accept="image/*" capture="camera" > // camcorder // microphone // filesystem var image = picker.files[0];
- 64. The Prestige
- 65. Sir Isaac Newton
- 66. Three Laws of Motion (the universe works as we might expect it to)
- 67. Albert Michelson Edward Morley
- 68. Light Travels at a Constant Speed (the universe doesn’t work as we thought it would)
- 70. Relativistic Mechanics Exploration Classical Mechanics Familiarity Quantum Mechanics Exploration
- 71. The Web Today is like Physics in 1900
- 72. Mobile is our Michelson-Morley Experiment
- 73. 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)
- 74. What does the web look like when you have...
- 76. Media Capture (HTML) Media Capture (API) Battery status Application Registration Contacts Calendar Messaging (SMS, MMS...) Feature Permissions Network Information API Sensor API Vibration API Menu API Audio Volume Permissions for APIs Beep Gallery Systems info and events Tasks
- 77. Accelerometer APDU (SmartCard) Orientation Bluetooth Camera Crypto DeviceStatus DLNA Filesystem Server Push Messaging Sensor Geolocation Telephony PIM Contacts Calendar Tasks DeviceInteraction
- 79. The mobile web becomes more than a 320px web
- 80. 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)
- 82. Mobile device APIs are the web’s next great leap forward