Cross platform mobile web apps
35 likes14,062 views
The document discusses the state of cross-platform mobile web apps. It notes that while HTML5 provides many capabilities of native mobile apps, developing cross-platform web apps remains challenging due to differences in browser platforms and a lack of universal support for HTML5 features. Hybrid mobile apps that use a native wrapper and HTML5 for app logic offer greater access to device functionality but still must target multiple platforms. Ultimately, no solution provides the same level of "nativeness" as truly native mobile apps.
![<!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/cross-platformmobilewebapps-110916134947-phpapp02/85/Cross-platform-mobile-web-apps-35-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (14)
Ad
Similar to Cross platform mobile web apps (20)
Ad
More from James Pearce (14)
Recently uploaded (20)
Cross platform mobile web apps
- 1. Cross-platform mobile web apps @ jamespearce
- 3. Three Laws of Motion (the universe works as we might expect it to)
- 4. Albert Michelson Edward Morley
- 5. Light Travels at a Constant Speed (the universe doesn’t work as we thought it would)
- 7. Relativistic Mechanics Exploration Classical Mechanics Familiarity Quantum Mechanics Exploration
- 8. The Web Today is like Physics in 1900
- 9. Mobile is our Michelson-Morley Experiment
- 10. Mobile Context? One Web? Responsive Design? Apps or Sites? (an inability to answer these questions does not constitute an excuse not to innovate)
- 11. Single device Multi device Sedentary user Mobile user * Declarative Imperative Thin client Thick client Documents Applications * or supine, or sedentary, or passive, or...
- 12. A badge for all these ways the web is changing
- 14. What is an app?
- 15. Consumption vs Creation Linkability User Experience Architecture
- 16. Web Compromise sites Web apps Native apps Nativeness
- 18. 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
- 19. WebFont Video Audio Graphics Device Access Camera CSS Styling & Layout Network Location HTTP JavaScript Contacts AJAX SMS Semantic HTML Events Orientation Sockets File Systems Workers & Cross-App Gyro Databases Parallel SSL Messaging App Caches Processing (all the elements of a modern application platform)
- 20. The web is now as much a stack as it is a medium
- 24. MS RIM Symbian Apple Android Top European Smartphone Platforms July 2011, comScore MobiLens
- 25. .NET J2ME C++ Obj-C Java Native programming languages you’ll need July 2011
- 26. IE WebKit WebKit WebKit WebKit Browser platforms to target July 2011
- 27. There is no WebKit on Mobile - @ppk
- 28. But at least we are using one language, one markup, one style system
- 29. IE 10 PR Chrome 10 Safari 5 Firefox 4 iOS4.31 Playbook Honeycomb @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
- 30. 100% Support Browsers Capabilities & specifications
- 31. 100% Support Browsers Polyfills Frameworks Capabilities & specifications
- 33. <!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>
- 35. <!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>
- 37. Myth busting
- 38. HTML5 apps can’t run o ine (hybrid, appcache, and localStorage...)
- 39. HTML5 apps can’t match native performance (true, sometimes)
- 40. HTML5 apps can’t be monetized (is this a technology problem?)
- 41. HTML5 apps can’t access device functionality (weren’t you listening to Brian?)
- 42. Web Compromise sites Web apps Hybrid apps Native apps Nativeness
- 43. 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
- 44. 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
- 45. 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
- 47. Native app stores have a dirty secret
- 49. built with Apps vs web technology
- 51. Well-established hierarchies are not easily uprooted; Closely held beliefs are not easily released; So ritual enthralls generation after generation. Tao Te Ching; 38 Ritual