1.
James Pearce
Director, Developer Relations
@ jamespearce
jamesp@sencha.com

2.
Building Cross-Platform
Mobile Web Apps
with
HTML CSS JS

3.
building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);

4.
building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);

5.
2008
We must have an
iPhone App!

6.
2009
We must have an
Android App!

7.
2010
We must have an
iPad App!

8.
2011
We must have a...

9.
omfg

10.
JS
C# Palm
Microsoft Java
Android
Android RIM
Apple
Apple
C++ Microsoft
Obj-C Palm
J2ME
RIM Top U.S. Smartphone Platforms,
3 Month Average Ending Mar 2011
Air comScore MobiLens 2011

11.
J2ME
C# RIM C
Microsoft Nokia
Python Apple
Java Android
Android Nokia Microsoft
C++ RIM
Lua
Obj-C
Apple ... Top EU5 Smartphone Platforms,
3 Month Average Ending December 2010
comScore MobiLens 2010
http://www.cloudfour.com/a-comprehensive-guide-to-mobile-statistics/

12.
building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);

13.
The Mobile Web
Cross-platform
Familiar skills & tools
Decentralized
Easily updated
Indexed
Well-understood technologies

14.
Documents
Applications

15.
Declarative HTML
Programmatic JS

16.
Thin client
Thick client

17.
One PC
Multiple devices

18.
Sedentary usage
Mobile usage

19.
building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);

20.
A New Mobile App Stack
WebFonts Video Audio Graphics
Device Access Server & Services
Camera CSS Styling & Layout HTTP
Location AJAX
Javascript
Contacts Events
SMS Semantic HTML Sockets
Orientation SSL
File Systems Worker
x-App
Gyro DBs Parallel More...
Messaging
App Cache Processing

21.
Rich Media & StylingO RM
TF
LA
Full Resource PP PAccess
A
RN
ParallelDProcessing
E
O
M Communication
Inter-AppTE
LE
P O ine Capability
C Full
OM

22.
building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);

23.
building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);

24.
WebKit FOEs

25.
HTML5 Support
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

26.
Stay on top of diversity
Can I Use?
http://caniuse.com
Modernizr
http://modernizr.com
DeviceAtlas
http://deviceatlas.com

27.
Documents Applications
Declarative HTML Programmatic DOM
Thin client Thick client
Themes APIs
URLs Arguments
Request/Response Synchronization

28.
jQTouch
UI layer on top of jQuery
Declarative HTML
Library progressively enhances
Browsers:
iOS (iPhone/iPod)
Android
BlackBerry v6
Most WebKit-based browsers
http://jQTouch.com

29.
jQTouch
Scripts & stylesheets
CSS classes for semantics & config

30.
jQuery Mobile (alpha)
UI layer on top of jQuery
Declarative HTML
Library progressively enhances
Browsers:
iOS (iPhone/iPad)
Android
BlackBerry v5+
Symbian v5, MeeGo, webOS
http://jquerymobile.com

31.
jQuery Mobile
Scripts & stylesheet
data-* for semantics
& config

32.
Sencha Touch
Self-contained library
Programmatic Javascript
Standalone MVC applications
Browsers:
iOS (iPhone/iPad)
Android
BlackBerry v6 & QNX
Bada, MeeGo & other WebKit
Windows Phone 7*
http://sencha.com/touch
* with IE9

33.
Sencha Touch
Data model
& records
Programmatically create
toolbar & list

34.
Progressive Enhancement?

35.
What’s in a good framework?
Layouts & components
Theming & icons
Orientation & animation
Touch events & scroller
Data package
MVC framework

36.
Components
Lists
- Nested, Grouped, Sortable
Carousel
Picker
Overlay
Slider
Forms & fields
Toolbars & buttons
HTML5
- Audio
- Video
- GeoLocation

37.
Theming
Use CSS3 & SASS
- Flexible themes
- Highly optimized

38.
Forms

39.
Scrolling
Momentum/bounce physics
Hardware accelerated
Throughout all components:
- Lists
- Carousel
- Pickers

40.
Touch Events
Built on native events
Abstracted for performance
Additional events
- Tap
- Double tap
- Tap and hold
- Swipe
- Rotate
- Drag & drop

41.
Data Package
Models, Stores, and Proxies
- Associations
- Validation
- Local & server storage
Easily consume web services
- JSON/P
- XML
- YQL

42.
“The Kitchen Sink”
http://sencha.com/x/5e

43.
building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);

44.
Evolving the web for mobile
Views
HTML, CSS...
Controllers
Models

45.
Evolving the web for mobile
Desktop
Switcher
HTML, CSS...
Mobile
Controllers
Models

46.
Evolving the web for mobile
Desktop
Switchers
Mobile
REST
JSO on
Controllers N
ce
Models

47.
The classic web stack
req/res
User interface Rendering
Business logic
Storage

48.
The next web stack?
User interface
sync
Security Business logic
Storage Storage

49.
Write once,
run anywhere?

50.
Er, no.

51.
“ The Mobile Web
is not a
”
320px Web

52.
But you can re-use
a lot of code

53.
Views Views
Controllers
Models
Stores
Proxies
n
jso

54.
Thick client, thin server
The shortfall in the cloud

55.
Location Services
Adaptation Analytics
Web Fonts Data Sync
Video Serving Ad Serving
$
Image Serving Commerce
Network APIs

56.
http://mysite.com/myimage.png
http://src.sencha.io/http://mysite.com/myimage.png

57.
Do we have time for
some code?

58.
List
var list = new Ext.List({
store: store,
itemTpl:
'{firstName} {lastName}',
grouped: true,
indexBar: true
});

59.
Nested List
var list = new Ext.NestedList({
store: store,
displayField: 'name',
title: 'My List',
updateTitleText: true,
getDetailCard:
function(record, parent) {..}
});

60.
Carousel
var car = new Ext.Carousel({
direction: 'horizontal',
indicator: true,
items: [
..
]
});

61.
Sheets
var sheet = new Ext.ActionSheet({
items: [
{
text: 'Delete draft',
ui: 'decline'
}, {
text: 'Save draft'
}, {
text: 'Cancel',
}
]
});
sheet.show();

62.
http://senchalearn.github.com/seattlebars/

63.
The cloud at work...
Location API to get lat/long
MongoLabs to get city name
Yelp to get businesses

64.
https://github.com/
senchalearn/
seattlebars

65.
Going o ine

66.
PhoneGap
A platform that allows you to author native applications
with web technologies and get access to device APIs
UIWebView WebView
HTML
CSS Stores
JS

67.
Device Access
Accelerometer File
Camera Geolocation
Compass Media
Contacts Network
Device Notification
Events Storage
http://docs.phonegap.com

68.
Weinre
http://pmuellr.github.com/weinre/

69.
building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);

70.
built with
Apps vs Web technology

71.
James Pearce
Director, Developer Relations
@ jamespearce
jamesp@sencha.com