HTML5 and its related technologies are enabling new ways to build beautiful sites and applications for contemporary mobile devices. Native mobile developers can now use web technologies to surmount cross-platform headaches, and desktop web developers can reach mobile users in familiar, app-like ways. This session explores the state of the art in HTML5-based mobile web frameworks, and demonstrates the practical possibilities that this powerful and standards-based approach can bring.

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

3. HTML5 and the dawn of
rich mobile web
applications

4. or

5. Everything I know about HTML5 I learned from

6. How Mobile Rolls

7. 2008

8. We must have an
iPhone App!

11. 2010

12. We must have an
Android App!

15. 2011

16. omfg

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

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

21. Device diversity

22. App Stores Updates

23. The Promise of
Web Technologies

24. The Web
Cross-platform
Familiar skills & tools
Decentralized
Easily updated
Indexed
Well-understood
...
Mobile: the next era of the web as we know it

25. http://www.victoriassecret.com

26. http://mobile.victoriassecret.com

27. The
mobile web
is not a
320px web

28. (“responsive web design”)

32. The Web
Cross-platform
Familiar skills & tools
Decentralized
Easily updated
Indexed
Well-understood
...
But wait! Weren’t we talking about apps?

33. Hypothesis:
Web technologies
are a
viable alternative
to native development

34. The Web is Evolving...
Documents Applications
Declarative HTML Programmatic DOM
Templates APIs
URLs Arguments
Request/Response Synchronization
Thin client Thick client

37. -webkit
accelerometer
@page
localStorage
CSS Text
@media
manifest
transform
<video>
WebSQL
GeoLocation
type=camera canvas
keyframe gradient

41. this is uncanny

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

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

47. Web technologies
are a
viable alternative
to native development

48. Caveats?
Performance
Browser support
Device access All less of a issue
than you might think
Discoverability
Monetization
App ‘experience’

49. Progressive enhancement

50. assumption
HTML JS CSS
progressive
enhancement
app
doc
vs
assumption
HTML JS CSS
app

51. State of the Art:
Mobile HTML5

52. Environments
?

53. Browsers
WebKit FOEs

54. HTML5 support
IE 9 PR Chrome 7 Safari 5 Firefox 4b iPhone 4 BB Torch Android 2.2
@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

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

56. Enter The Framework

57. Why use a framework?
Provide user interface components
Smooth browser inconsistencies
Mimic native or server paradigms
Create consistent application architectures
...and more

59. Strokes for folks
Sites & Documents Applications
Declarative HTML Programmatic DOM
Templates APIs
URLs Arguments
Request/Response Synchronization
Thin client Thick client

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

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

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

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

64. 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
* to come

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

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

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

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

69. Forms

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

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

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

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

74. Implementing Mobile Web
Sites|Apps

75. Evolving sites for mobile
Views
HTML, CSS...
Controllers
Models

76. Evolving sites for mobile
Desktop
Switcher
HTML, CSS...
Mobile
Controllers
Models

77. Mobile detection
class ApplicationController < ActionController::Base
has_mobile_fu
end
*.mobile.erb
is_mobile_device?
in_mobile_view?
https://github.com/brendanlim/mobile-fu

78. Smart detection
& user choice
“Switch to our desktop site”

80. Thematic consistency
w3c-speak
http://mysite.com/posts/123
http://mysite.mobi/posts/123

81. Mobile switching
http://tinyurl.com/mobswi1 http://tinyurl.com/mobswi2

82. Then to an app...
Desktop
Switchers
Mobile
REST
Controllers JSO
N
Models

83. Thematic consistency
http://mysite.com/posts/123
http://mysite.com/#!/posts/123

84. The stack of the present
req/res
User interface Rendering
Business logic
Storage

85. The stack of the future
User interface
sync
Security Business logic
Storage Storage
The return of
the thick client!

86. Do we have time for
some code?

87. Brand consistency

88. Getting help from the cloud
http://i.tinysrc.mobi/http://mysite.com/myimage.png
http://tinysrc.net/

89. Mobile devices
are di erent
Geolocation
Telephony
Camera
Messaging
And mobile users
are different too!

90. Going Hybrid

91. PhoneGap
A platform that allows you to author native applications
with web technologies and get access to device APIs
http://phonegap.com

92. +

93. Full API list:
Accelerometer File
Camera Geolocation
Compass Media
Contacts Network
Device Notification
Events Storage
http://docs.phonegap.com
http://www.sencha.com/learn/
Tutorial:Sencha_Touch_PhoneGap

94. PhoneGap Build

95. A word about app stores
(pssst: they’re an admission of defeat)

96. Doing mobile right
Everyone loves apps - but native development sucks
This is the year of the mobile web - but caveats apply
Web technologies are a viable alternative to native apps

97. built with
Apps vs Web technology

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