As presented at http://www.meetup.com/MobileCloud/events/17159747/ The web is always evolving, but we're witnessing a significant architectural shift as services migrate to the cloud, business logic moves to ever-thicker clients, and the web escapes the desktop to become a beautifully mobile medium. In this environment, web application frameworks like Sencha Touch offer a new way of building mobile services using HTML5, CSS3, and JavaScript. We'll explore the possibilities that this rich, standards-based approach can bring, how to develop mobile web apps that look and feel native on iPhone, Android, and BlackBerry touch devices, and how to leverage the power of cloud-based services to provide scalable and compelling applications in this new world.

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

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

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

5. building(
cloudBased(
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

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

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

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

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

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

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

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

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

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

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

30. WebKit FOEs

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

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

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

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

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

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

39. Forms

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

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

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

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

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

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

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

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

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

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

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

51. <aside>
JSON JavaScript Object Notation
JSON-­‐P JSON with Padding
CORS Cross-­‐Origin Resource Sharing
</aside>

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

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

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

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

56. Do we have time for
some code?

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

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

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

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

62. +

63. PhoneGap Build

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

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

66. built with
Apps vs Web technology

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