1. A Mobile Web App
for Android
in 75 Minutes
@ jamespearce
2. Single device Multi device
Sedentary user Mobile user
*
Declarative Imperative
Thin client Thick client
Documents Applications
* or supine, or sedentary, or passive, or...
4. 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)
38. The app...
var
va
=
new
Ext.Application({
launch:
function()
{
this.listCard
=
new
Ext.Panel({
html:
'I
am
the
list'
});
this.detailCard
=
new
Ext.Panel({
html:
'I
am
the
detail'
});
this.viewport
=
new
Ext.Panel({
layout:
'card',
fullscreen:
true,
cardSwitchAnimation:
'slide',
items:
[this.listCard,
this.detailCard]
});
}
});
81. And if we’d had time...
Add to home screen
- Icon
- Splash screen
Hybrid app with device APIs
http://sencha.com/x/cy
http://sencha.com/x/de
82. O ine app
$>
phantomjs
confess.js
http://github/valley/
CACHE
MANIFEST
#
This
manifest
was
created
by
confess.js
#
Time:
Wed
Sep
14
2011
10:14:45
GMT-‐0700
(PDT)
#
User-‐agent:
Mozilla/5.0
...
CACHE:
app/app.js
app/yelp.js
http://cdn.sencha.io/touch/1.1.0/sencha-‐touch.js
http://maps.google.com/maps/api/js?sensor=true
http://maps.gstatic.com/intl/en_us/mapfiles/api-‐3/6/4/main.js
theming/valley.css
NETWORK:
*
http://github.com/jamesgpearce/confess
83. O ine data
Taking Yelp data o ine
Taking images o ine
- src.sencha.io to generate cross-origin B64
Detecting network connection changes
http://sencha.com/x/df