Building Cloud-Based Cross-Platform Mobile Web Apps
6 likes1,553 views
James Pearce discusses building cloud-based cross-platform mobile web apps using HTML, CSS, and JavaScript. The document outlines the evolution of mobile app development from 2008 to 2011, while emphasizing the importance of familiar skills, decentralized updates, and well-understood technologies. It also highlights various tools and frameworks, including Sencha Touch and PhoneGap, for effective mobile application development.
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/85/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-4-320.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/85/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-5-320.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/85/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-15-320.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/85/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-19-320.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/85/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-25-320.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/85/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-29-320.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/85/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-43-320.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/85/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-55-320.jpg)
![building(
cloudBased(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
)
);](https://image.slidesharecdn.com/buildingcloud-basedcross-platformmobilewebapps-key-110509164242-phpapp02/85/Building-Cloud-Based-Cross-Platform-Mobile-Web-Apps-65-320.jpg)
Building Cloud-Based Cross-Platform Mobile Web Apps
- 2. James Pearce Director, Developer Relations @ jamespearce [email protected]
- 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
- 55. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ) );
- 56. Do we have time for some code?
- 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 [email protected]