Frameworks like Sencha Touch are heralding a new way of building mobile services using Javascript, HTML5 and CSS3. If you want to discover how to use standard web technologies to reach your mobile users in beautiful app-like ways, this session is for you. We explore the possibilities that each of these rich, standards-based libraries can bring, we show how the mobile device is fast becoming a first-class Javascript run-time environment, and we discuss how we might be on the dawn of a new web age, where mobile and client-side applications can immerse billions of users with exciting, contextually-aware experiences.

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

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

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

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

6. 2008
We must have an
iPhone App!

7. 2009
We must have an
Android App!

8. 2010
We must have an
iPad App!

9. 2011
We must have a...

11. omfg

12. 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

13. 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/

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

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

18. Documents
Applications

19. Declarative HTML
Programmatic JS

20. Thin client
Thick client

21. One PC
Multiple devices

22. Sedentary usage
Mobile usage

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

27. 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

28. 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

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

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

34. WebKit FOEs

35. 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

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

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

39. 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

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

41. 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

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

43. 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

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

45. Progressive Enhancement?

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

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

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

49. Forms

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

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

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

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

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

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

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

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

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

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

60. Write once,
run anywhere?

61. Er, no.

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

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

65. Views Views
Controllers
Models
Stores
Proxies
n
jso

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

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

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

70. Do we have time for
some code?

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

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

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

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

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

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

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

79. Going o ine

80. 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

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

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

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

84. built with
Apps vs Web technology

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