Building Cloud-Based Cross-Platform Mobile Web Apps

3,881 views

Published on

As presented at http://www.meetup.com/MobileCloud/events/17159747/

The web is always evolving, but we're witnessing a significant architectural shift as services migrate to the cloud, business logic moves to ever-thicker clients, and the web escapes the desktop to become a beautifully mobile medium.

In this environment, web application frameworks like Sencha Touch offer a new way of building mobile services using HTML5, CSS3, and JavaScript. We'll explore the possibilities that this rich, standards-based approach can bring, how to develop mobile web apps that look and feel native on iPhone, Android, and BlackBerry touch devices, and how to leverage the power of cloud-based services to provide scalable and compelling applications in this new world.

Published in: Technology

Building Cloud-Based Cross-Platform Mobile Web Apps

  1. 1. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com
  2. 2. Building Cloud-basedCross-Platform Mobile Web Apps with HTML CSS JS
  3. 3. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ));
  4. 4. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ));
  5. 5. 2008We must have an iPhone App!
  6. 6. 2009We must have an Android App!
  7. 7. 2010We must have an iPad App!
  8. 8. 2011We must have a...
  9. 9. omfg
  10. 10. 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
  11. 11. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ));
  12. 12. The Mobile WebCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies
  13. 13. The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Themes APIs URLs Arguments Request/Response Synchronization Thin client Thick client
  14. 14. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ));
  15. 15. -webkit accelerometer @page localStorage CSS Text @media manifesttransform <video> WebSQL GeoLocation type=camera canvas keyframe gradient
  16. 16. 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
  17. 17. Rich Media & StylingO RM TF LA Full Resource PP PAccess A RN ParallelDProcessing E O M CommunicationInter-AppTE LE P O ine Capability C Full OM
  18. 18. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ));
  19. 19. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ));
  20. 20. WebKit FOEs
  21. 21. 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
  22. 22. Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
  23. 23. Documents ApplicationsDeclarative HTML Programmatic DOM Themes APIs URLs ArgumentsRequest/Response Synchronization Thin client Thick client
  24. 24. What’s in Sencha Touch?Layouts & componentsTheming & iconsOrientation & animationTouch events & scrollerData packageMVC framework
  25. 25. ComponentsLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5- Audio- Video- GeoLocation
  26. 26. ThemingUse CSS3 & SASS- Flexible themes- Highly optimized
  27. 27. Forms
  28. 28. ScrollingMomentum/bounce physicsHardware acceleratedThroughout all components:- Lists- Carousel- Pickers
  29. 29. Touch EventsBuilt on native eventsAbstracted for performanceAdditional events- Tap- Double tap- Tap and hold- Swipe- Rotate- Drag & drop
  30. 30. “The Kitchen Sink” http://sencha.com/x/5e
  31. 31. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ));
  32. 32. Data PackageModels, Stores, and Proxies- Associations- Validation- Local & server storageEasily consume web services- JSON/P- XML- YQL
  33. 33. Evolving a site for mobile Views HTML, CSS... Controllers Models
  34. 34. Evolving a site for mobile Desktop Switcher HTML, CSS... Mobile Controllers Models
  35. 35. A dedicated mobile app DesktopSwitchers Mobile REST JSO on Controllers N ce Models
  36. 36. Thematic consistency http://mysite.com/posts/123 http://mysite.com/#!/posts/123
  37. 37. The stack of the present req/resUser interface RenderingBusiness logic Storage
  38. 38. A stack of the future User interface syncSecurity Business logicStorage Storage
  39. 39. <aside>JSON          JavaScript  Object  NotationJSON-­‐P      JSON  with  PaddingCORS          Cross-­‐Origin  Resource  Sharing </aside>
  40. 40. Thick client, thin serverThe shortfall in the cloud
  41. 41. Location Services Adaptation Analytics Web Fonts Data SyncVideo Serving Ad Serving $ Image Serving Commerce Network APIs
  42. 42. http://mysite.com/myimage.pnghttp://i.tinysrc.mobi/http://mysite.com/myimage.png
  43. 43. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ));
  44. 44. Do we have time for some code?
  45. 45. http://senchalearn.github.com/seattlebars/
  46. 46. The cloud at work...Location API to get lat/longMongoLabs to get city nameYelp to get businesses
  47. 47. https://github.com/ senchalearn/ seattlebars
  48. 48. PhoneGapA platform that allows you to author native applications with web technologies and get access to device APIs http://phonegap.com
  49. 49. +
  50. 50. PhoneGap Build
  51. 51. Device AccessAccelerometer FileCamera GeolocationCompass MediaContacts NetworkDevice NotificationEvents Storagehttp://docs.phonegap.com
  52. 52. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ));
  53. 53. built withApps vs Web technology
  54. 54. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com

×