Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building cross platform mobile web apps

3,522 views

Published on

Published in: Technology
  • Be the first to comment

Building cross platform mobile web apps

  1. 1. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com
  2. 2. Sencha
  3. 3. Create amazing apps built on web standards
  4. 4. Web Frameworks Tools Labs Services
  5. 5. Frameworks Sencha Touch Ext JS Ext GWT Ext Core
  6. 6. Ext JS http://www.sencha.com/products/extjs/examples/
  7. 7. Ext JS 4 http://dev.sencha.com/deploy/ChartsDemo/
  8. 8. Ext GWT +http://www.sencha.com/products/extgwt/examples/
  9. 9. Ext Core http://www.sencha.com/products/extcore/ M IT
  10. 10. Tools Ext Designer Sencha Animator
  11. 11. Ext Designer http://www.sencha.com/products/designer/
  12. 12. Sencha Animatorhttp://www.sencha.com/products/animator/demos/
  13. 13. Labs jQTouch InfoVis Raphaël PhiloGL Connect Android tools http://www.sencha.com/company/
  14. 14. Building Cross-Platform Mobile Web Apps with HTML CSS JS
  15. 15. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  16. 16. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  17. 17. 2008We must have an iPhone App!
  18. 18. 2009We must have an Android App!
  19. 19. 2010We must have an iPad App!
  20. 20. 2011We must have a...
  21. 21. omfg
  22. 22. 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
  23. 23. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  24. 24. The Mobile WebCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies
  25. 25. The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Thin client Thick client Themes APIs URLs Arguments Request/Response Synchronization
  26. 26. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  27. 27. 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
  28. 28. Rich Media & StylingO RM TF LA Full Resource PP P Access A RN ParallelDProcessing E O EMInter-App Communication ET PL Offline Capability Full C OM
  29. 29. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  30. 30. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  31. 31. WebKit FOEs
  32. 32. HTML5 Support IE 10 PR Chrome 10 Safari 5 Firefox 4 iOS4.31 Playbook Honeycomb@font-faceCanvasHTML5 Audio & Videorgba(), hsla()border-image:border-radius:box-shadow:text-shadow:opacity:Multiple backgroundsFlexible Box ModelCSS AnimationsCSS ColumnsCSS GradientsCSS ReflectionsCSS 2D TransformsCSS 3D TransformsCSS TransitionsGeolocation APIlocal/sessionStorageSVG/SVG ClippingSMILInline SVGDrag and DrophashchangeX-window MessagingHistory ManagementapplicationCacheWeb SocketsWeb WorkersWeb SQL DatabaseWebGLIndexedDB
  33. 33. Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
  34. 34. Documents ApplicationsDeclarative HTML Programmatic DOM Thin client Thick client Themes APIs URLs ArgumentsRequest/Response Synchronization
  35. 35. Sencha Touch support
  36. 36. What’s in Sencha Touch?Layouts & componentsTheming & iconsOrientation & animationTouch events & scrollerData packageMVC framework
  37. 37. ComponentsLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5- Audio- Video- GeoLocation
  38. 38. Forms
  39. 39. ScrollingMomentum/bounce physicsHardware acceleratedThroughout all components:- Lists- Carousel- Pickers
  40. 40. Touch EventsBuilt on native eventsAbstracted for performanceAdditional events- Tap- Double tap- Tap and hold- Swipe- Rotate- Drag & drop
  41. 41. Data PackageModels, Stores, and Proxies- Associations- Validation- Local & server storageEasily consume web services- JSON/P- XML- YQL
  42. 42. ThemingUse CSS3 & SASS- Flexible themes- Highly optimized
  43. 43. “The Kitchen Sink” http://sencha.com/x/5e
  44. 44. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  45. 45. Evolving a site for mobile Views HTML, CSS... Controllers Models
  46. 46. Evolving a site for mobile Desktop Switcher HTML, CSS... Mobile Controllers Models
  47. 47. A dedicated mobile app DesktopSwitchers Mobile REST JSO on Controllers N ce Models
  48. 48. Thematic consistency http://mysite.com/posts/123 http://mysite.com/#!/posts/123
  49. 49. The stack of the present req/resUser interface RenderingBusiness logic Storage
  50. 50. A stack of the future User interface syncSecurity Business logicStorage Storage
  51. 51. Thick client, thin serverThe shortfall in the cloud
  52. 52. http://mysite.com/myimage.pnghttp://i.tinysrc.mobi/http://mysite.com/myimage.png
  53. 53. Location Services Adaptation Analytics Web Fonts Data SyncVideo Serving Ad Serving $ Image Serving Commerce Network APIs
  54. 54. Do we have time for some code?
  55. 55. http://senchalearn.github.com/seattlebars/
  56. 56. The cloud at work...Location API to get lat/longMongoLabs to get city nameYelp to get businesses
  57. 57. https://github.com/ senchalearn/ seattlebars
  58. 58. PhoneGapA platform that allows you to author native applications with web technologies and get access to device APIs http://phonegap.com
  59. 59. Device AccessAccelerometer FileCamera GeolocationCompass MediaContacts NetworkDevice NotificationEvents Storagehttp://docs.phonegap.com
  60. 60. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  61. 61. built withApps vs Web technology
  62. 62. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com

×