Building cross platform mobile web apps
2 likes1,279 views
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.
![building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);](https://image.slidesharecdn.com/buildingcross-platformmobilewebapps-110427191548-phpapp01/85/Building-cross-platform-mobile-web-apps-16-320.jpg)
![building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);](https://image.slidesharecdn.com/buildingcross-platformmobilewebapps-110427191548-phpapp01/85/Building-cross-platform-mobile-web-apps-17-320.jpg)
![building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);](https://image.slidesharecdn.com/buildingcross-platformmobilewebapps-110427191548-phpapp01/85/Building-cross-platform-mobile-web-apps-27-320.jpg)
![building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);](https://image.slidesharecdn.com/buildingcross-platformmobilewebapps-110427191548-phpapp01/85/Building-cross-platform-mobile-web-apps-31-320.jpg)
![building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);](https://image.slidesharecdn.com/buildingcross-platformmobilewebapps-110427191548-phpapp01/85/Building-cross-platform-mobile-web-apps-36-320.jpg)
![building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);](https://image.slidesharecdn.com/buildingcross-platformmobilewebapps-110427191548-phpapp01/85/Building-cross-platform-mobile-web-apps-40-320.jpg)
![building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);](https://image.slidesharecdn.com/buildingcross-platformmobilewebapps-110427191548-phpapp01/85/Building-cross-platform-mobile-web-apps-55-320.jpg)
![building(
mobile.web().apps([
html5, css3, js
]).crossPlatform()
);](https://image.slidesharecdn.com/buildingcross-platformmobilewebapps-110427191548-phpapp01/85/Building-cross-platform-mobile-web-apps-73-320.jpg)
Building cross platform mobile web apps
- 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
- 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/
- 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
- 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
- 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?
- 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