This document discusses building cross-platform mobile web applications using HTML5, CSS3 and JavaScript. It introduces Sencha Touch, a framework for building rich mobile web apps, and how it provides tools and components like layouts, themes, touch events and data synchronization to build apps that work across platforms. The document advocates for a mobile web approach using open web standards over native apps, arguing it allows for cross-platform development, easier updating and a more decentralized approach.

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

3. Sencha

4. Create amazing apps built
on web standards

5. Web Frameworks
Tools
Labs
Services

6. Frameworks
Sencha Touch
Ext JS
Ext GWT
Ext Core

7. Ext JS
http://www.sencha.com/products/extjs/examples/

8. Ext JS 4
http://dev.sencha.com/deploy/ChartsDemo/

9. Ext GWT
+
http://www.sencha.com/products/extgwt/examples/

10. Ext Core
http://www.sencha.com/products/extcore/
M IT

11. Tools
Ext Designer
Sencha Animator

12. Ext Designer
http://www.sencha.com/products/designer/

13. Sencha Animator
http://www.sencha.com/products/animator/demos/

14. Labs
jQTouch InfoVis
Raphaël PhiloGL
Connect Android tools
http://www.sencha.com/company/

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

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

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

18. 2008
We must have an
iPhone App!

19. 2009
We must have an
Android App!

20. 2010
We must have an
iPad App!

21. 2011
We must have a...

23. omfg

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

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

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

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

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

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

35. Rich Media & StylingO RM
TF
LA
Full Resource PP P Access
A
RN
ParallelDProcessing
E
O
EM
Inter-App Communication
ET
PL Offline Capability
Full
C OM

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

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

41. WebKit FOEs

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

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

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

46. Sencha Touch support

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

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

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. Theming
Use CSS3 & SASS
- Flexible themes
- Highly optimized

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

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

56. Evolving a site for mobile
Views
HTML, CSS...
Controllers
Models

57. Evolving a site for mobile
Desktop
Switcher
HTML, CSS...
Mobile
Controllers
Models

58. A dedicated mobile app
Desktop
Switchers
Mobile
REST
JSO on
Controllers N
ce
Models

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

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

61. A stack of the future
User interface
sync
Security Business logic
Storage Storage

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

63. http://mysite.com/myimage.png
http://i.tinysrc.mobi/http://mysite.com/myimage.png

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

65. Do we have time for
some code?

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

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

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

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

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

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

74. built with
Apps vs Web technology

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