Michael Mullany presented about Sencha Touch HTML5 mobile web applications at Silicon Valley User Group in April 2011.

1. HTML5 and the dawn
of rich mobile web
applications
SENCHA: HTML5 SVUG April 2011

2. 2008

3. We must have an
iPhone App!

7. 2010

8. We must have an
Android App!

11. 2011

12. OMG

13. Palm
Microsoft
RIM RIM
Android
Apple
Apple Microsoft
Palm
Android Top U.S. Smartphone Platforms,
3 Month Average Ending December 2010
comScore MobiLens 2010

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

15. J2ME
C# RIM C/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

16. J2ME
C# RIM C/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/

19. Device diversity

20. The Promise of
Web Technologies

21. The Web
Cross-platform
Standards-process
Familiar skills & tools
Decentralized
Easily updated
Indexed
Well-understood
...

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

23. http://www.victoriassecret.com

24. http://mobile.victoriassecret.com

25. The
mobile web
is not a
320px web

26. (“responsive web design”)

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

31. The Web is Evolving...

32. The Web is Evolving...
Documents Applications

33. The Web is Evolving...
Documents Applications
Declarative HTML Programmatic DOM

34. The Web is Evolving...
Documents Applications
Declarative HTML Programmatic DOM
Templates APIs

35. The Web is Evolving...
Documents Applications
Declarative HTML Programmatic DOM
Templates APIs
URLs Arguments

36. The Web is Evolving...
Documents Applications
Declarative HTML Programmatic DOM
Templates APIs
URLs Arguments
Request/Response Synchronization

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

39. "If you write Web-based applications, I
would be interested in hearing about what
your needs are. Please let me know"
Ian Hickson 2004
WhatWG “Founding Post”

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

43. A New Mobile App
Stack
CSS Styling & Layout
Javascript
Semantic HTML

44. A New Mobile App
Stack
WebFont Video Audio Graphics
CSS Styling & Layout
Javascript
Semantic HTML

45. A New Mobile App
Stack
WebFont Video Audio Graphics
CSS Styling & Layout
Javascript
Semantic HTML
File Systems
DBs
App Cache

46. A New Mobile App
Stack
WebFont Video Audio Graphics
CSS Styling & Layout
Javascript
Semantic HTML
File Systems Worker
DBs Parallel
App Cache Processing

47. A New Mobile App
Stack
WebFont Video Audio Graphics
CSS Styling & Layout
Javascript
Semantic HTML
File Systems Worker
x-App
DBs Parallel
Messaging
App Cache Processing

48. A New Mobile App
Stack
WebFont Video Audio Graphics
Device Access
Camera CSS Styling & Layout
Location
Javascript
Contacts
SMS Semantic HTML
Orientation
File Systems Worker
x-App
Gyro DBs Parallel
Messaging
App Cache Processing

49. A New Mobile App
Stack
WebFont 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

50. Rich Media & Styling
Full Resource Access
Parallel Processing
Inter-App
Communication Full
Offline Capability

51. Rich Media & Styling R M
F O
A T
Full Resource Access P L
A PP
Parallel ProcessingRN
D E
Inter-App
M O
T E
Communication Full
P LE
M
O Offline Capability
C

52. Demo 1
http://jag.gr/tm

53. Demo 1I
http://www.e-resistible.co.uk/

54. Demo 1I1
http://vimeo.com/awards/m

55. Web technologies
are a
viable alternative
to native development

56. Caveats?
Performance
Browser support
Device access
Discoverability
Monetization
App ‘experience’

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

58. Progressive enhancement

59. assumption
HTML
doc

60. assumption
HTML JS CSS
progressive
enhancement
app
doc

61. assumption
HTML JS CSS
progressive
enhancement
app
doc
assumption
HTML JS CSS
app

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

63. State of the Art:
Mobile HTML5

64. Environments
?

65. Browsers
WebKit Others

66. HTML5 Support: Edge 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

67. Stay on top of diversity
Can I Use?
http://caniuse.com
Modernizr
http://modernizr.com
DeviceAtlas
http://deviceatlas.com
Wikipedia
Comparison of Layout
Engines

68. Enter The Abstractions...

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

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

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

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

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

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

75. jQuery Mobile (alpha)
Scripts & stylesheet
data-* for semantics
& config

76. Sencha Touch
Self-contained library
Programmatic Javascript
UI Declared via JSON
Standalone MVC applications
Browsers:
iOS (iPhone/iPad)
Android
BlackBerry v6 & QNX
Bada, MeeGo & other
WebKit
Windows Phone 7*
* to come

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

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

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

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

81. Forms

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

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

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

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

86. Implementing Mobile
Web
Sites|Apps

87. Evolving sites for
mobile
Views HTML,
CSS...
Controlle
Models

88. Evolving sites for
mobile
Deskto HTML,
Switcher
CSS...
Mobile
Controlle
Models

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

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

91. www.xkcd.com

92. Thematic consistency

93. Thematic consistency
w3c-speak

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

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

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

97. Then to an app...
Deskto
Switchers
Mobile
REST
JSO
Controlle N
Models

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

99. The stack of the
present
req/res
User Rendering
Business
Storage

100. The stack of the future
User
sync
Security Business
Storage Storage

101. The stack of the future
User
sync
Security Business
Storage Storage
The return of
the thick client!

102. Brand consistency

103. Brand consistency

104. Brand consistency

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

106. Mobile devices
are different
Geolocation
Telephon
y
Camera
Messaging

107. Mobile devices
are different
Geolocation
Telephon
y
Camera
Messaging
And mobile users
are different too!

108. Going Hybrid

109. PhoneGap, Nimblekit,
Libraries that allows you to author native
applications
with web technologies and get access to device APIs

110. +

111. Full API list:
Accelerometer File
Camera Geolocation
Compass Media
Contacts Network
Device Notification
Events Storage
http://docs.phonegap.com

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

113. Doing mobile right

114. Doing mobile right
Everyone loves apps - but native diversity sucks

115. Doing mobile right
Everyone loves apps - but native diversity sucks
This is the year of the mobile web - but caveats
apply

116. Doing mobile right
Everyone loves apps - but native diversity sucks
This is the year of the mobile web - but caveats
apply
HTML5 makes web tech a viable alternative to native
apps