An Introduction to Sencha Touch
4 likes•2,199 views
This document introduces Sencha Touch, a JavaScript framework for building rich mobile apps with web standards. It discusses how Sencha Touch allows developers to write code once and deploy apps across multiple mobile platforms, leveraging familiar skills and technologies like HTML, CSS, and JavaScript. The document outlines key Sencha Touch features like layouts, components, touch events, data handling, theming and more. It provides examples of common UI components like lists, carousels, sheets and shows how they are implemented. Finally, it discusses architectural considerations for mobile apps and potential opportunities around location services, analytics and monetization.
![Carousel
var car = new Ext.Carousel({
direction: 'horizontal',
indicator: true,
items: [
..
]
});](https://image.slidesharecdn.com/anintroductiontosenchatouch-110509164945-phpapp01/85/An-Introduction-to-Sencha-Touch-51-320.jpg)
![Sheets
var sheet = new Ext.ActionSheet({
items: [
{
text: 'Delete draft',
ui: 'decline'
}, {
text: 'Save draft'
}, {
text: 'Cancel',
}
]
});
sheet.show();](https://image.slidesharecdn.com/anintroductiontosenchatouch-110509164945-phpapp01/85/An-Introduction-to-Sencha-Touch-52-320.jpg)
An Introduction to Sencha Touch
- 2. James Pearce Sr Director, Developer Relations @ jamespearce [email protected]
- 3. An Introduction to Sencha Touch
- 4. “ Create amazing apps built on web standards ”
- 8. Sedentary usage Mobile usage
- 9. But everyone loves apps
- 13. The native challenge 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
- 16. A return to the web Cross-platform Familiar skills & tools Decentralized Easily updated Indexed Well-understood technologies
- 18. 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. ?
- 26. The first JavaScript framework for building rich mobile apps with web standards
- 30. What’s in Sencha Touch? Layouts & components Theming & icons Orientation & animation Touch events & scroller Data package MVC framework
- 31. Components Lists - Nested, Grouped, Sortable Carousel Picker Overlay Slider Forms & fields Toolbars & buttons HTML5 - Audio - Video - GeoLocation
- 32. Forms
- 33. Scrolling Momentum/bounce physics Hardware accelerated Throughout all components: - Lists - Carousel - Pickers
- 34. Touch Events Built on native events Abstracted for performance Additional events - Tap - Double tap - Tap and hold - Swipe - Rotate - Drag & drop
- 35. Data Package Models, Stores, and Proxies - Associations - Validation - Local & server storage Easily consume web services - JSON/P - XML - YQL
- 36. Theming Use CSS3 & SASS - Flexible themes - Highly optimized e.g. $base-color: #ff6699
- 37. “The Kitchen Sink” http://sencha.com/x/5e
- 39. The classic web stack req/res User interface Rendering Business logic Storage
- 40. The next web stack User interface sync Security Business logic Storage Storage
- 42. Not quite.
- 43. “ The Mobile Web is not a ” 320px Web
- 45. But you can re-use a lot of code
- 46. Views Views Controllers Models Stores Proxies json
- 47. Ext JS Sencha Touch buttongroup actionsheet colorpalette button audio cycle component carousel editor container list editorgrid dataview map grid datepicker nestedlist multislider panel picker progress slider pickerslot splitbutton spacer segbutton treepanel toolbar sheet viewport tabpanel tabbar window video
- 49. List var list = new Ext.List({ store: store, itemTpl: '{firstName} {lastName}', grouped: true, indexBar: true });
- 50. Nested List var list = new Ext.NestedList({ store: store, displayField: 'name', title: 'My List', updateTitleText: true, getDetailCard: function(record, parent) {..} });
- 51. Carousel var car = new Ext.Carousel({ direction: 'horizontal', indicator: true, items: [ .. ] });
- 52. Sheets var sheet = new Ext.ActionSheet({ items: [ { text: 'Delete draft', ui: 'decline' }, { text: 'Save draft' }, { text: 'Cancel', } ] }); sheet.show();
- 57. APIs at work... Location API to get lat/long MongoLabs to get city name Yelp to get businesses
- 58. https://github.com/ senchalearn/ seattlebars
- 59. Final Thoughts
- 60. Thick client, thin server The shortfall in the cloud
- 61. Location Services Adaptation Analytics Web Fonts Data Sync Video Serving Ad Serving $ Image Serving Commerce Network APIs
- 63. PhoneGap A platform that allows you to package web applications and get access to device APIs http://phonegap.com
- 64. +
- 65. built with Apps vs Web technology
- 67. James Pearce Sr Director, Developer Relations @ jamespearce [email protected]