An Introduction to Sencha Touch

5,561 views
5,290 views

Published on

In introduction to mobile web applications and the Sencha Touch framework

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,561
On SlideShare
0
From Embeds
0
Number of Embeds
178
Actions
Shares
0
Downloads
141
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

An Introduction to Sencha Touch

  1. 1. James Pearce Sr Director, Developer Relations @ jamespearce jamesp@sencha.com
  2. 2. An Introduction to Sencha Touch
  3. 3. “ Create amazing apps built on web standards ”
  4. 4. DocumentsApplications
  5. 5. Thin clientThick client
  6. 6. One PCMultiple devices
  7. 7. Sedentary usage Mobile usage
  8. 8. But everyone loves apps
  9. 9. The native challenge JS C# Palm J2ME Microsoft RIM RIM Android AppleApple Air Microsoft PalmObj-C Java C++ Android Top U.S. Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010
  10. 10. A return to the webCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies
  11. 11. A New Mobile App Stack WebFonts Video Audio GraphicsDevice 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
  12. 12. ?
  13. 13. IntroducingSencha Touch
  14. 14. The first JavaScript framework for building rich mobile apps with web standards
  15. 15. What’s in Sencha Touch?Layouts & componentsTheming & iconsOrientation & animationTouch events & scrollerData packageMVC framework
  16. 16. ComponentsLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5- Audio- Video- GeoLocation
  17. 17. Forms
  18. 18. ScrollingMomentum/bounce physicsHardware acceleratedThroughout all components:- Lists- Carousel- Pickers
  19. 19. Touch EventsBuilt on native eventsAbstracted for performanceAdditional events- Tap- Double tap- Tap and hold- Swipe- Rotate- Drag & drop
  20. 20. Data PackageModels, Stores, and Proxies- Associations- Validation- Local & server storageEasily consume web services- JSON/P- XML- YQL
  21. 21. ThemingUse CSS3 & SASS- Flexible themes- Highly optimizede.g.$base-color: #ff6699
  22. 22. “The Kitchen Sink” http://sencha.com/x/5e
  23. 23. ArchitecturalConsiderations
  24. 24. The classic web stack req/resUser interface RenderingBusiness logic Storage
  25. 25. The next web stack User interface syncSecurity Business logicStorage Storage
  26. 26. Write once,run anywhere?
  27. 27. Not quite.
  28. 28. “ The Mobile Web is not a ” 320px Web
  29. 29. But you can re-use a lot of code
  30. 30. Views Views Controllers Models Stores Proxies json
  31. 31. Ext JS Sencha Touch buttongroup actionsheet colorpalette button audio cycle component carousel editor container list editorgrid dataview map grid datepicker nestedlistmultislider panel picker progress slider pickerslotsplitbutton spacer segbutton treepanel toolbar sheet viewport tabpanel tabbar window video
  32. 32. User InterfaceComponents
  33. 33. Listvar list = new Ext.List({ store: store, itemTpl: {firstName} {lastName}, grouped: true, indexBar: true});
  34. 34. Nested Listvar list = new Ext.NestedList({ store: store, displayField: name, title: My List, updateTitleText: true, getDetailCard: function(record, parent) {..}});
  35. 35. Carouselvar car = new Ext.Carousel({ direction: horizontal, indicator: true, items: [ .. ]});
  36. 36. Sheetsvar sheet = new Ext.ActionSheet({ items: [ { text: Delete draft, ui: decline }, { text: Save draft }, { text: Cancel, } ]});sheet.show();
  37. 37. A TypicalApplication
  38. 38. http://senchalearn.github.com/seattlebars/
  39. 39. APIs at work...Location API to get lat/longMongoLabs to get city nameYelp to get businesses
  40. 40. https://github.com/ senchalearn/ seattlebars
  41. 41. Final Thoughts
  42. 42. Thick client, thin serverThe shortfall in the cloud
  43. 43. Location Services Adaptation Analytics Web Fonts Data SyncVideo Serving Ad Serving $ Image Serving Commerce Network APIs
  44. 44. http://mysite.com/myimage.pnghttp://src.sencha.io/http://mysite.com/myimage.png
  45. 45. PhoneGapA platform that allows you to package web applications and get access to device APIs http://phonegap.com
  46. 46. +
  47. 47. built withApps vs Web technology
  48. 48. James Pearce Sr Director, Developer Relations @ jamespearce jamesp@sencha.com

×