Building Cross Platform Mobile Web Apps

10,557 views
10,381 views

Published on

Frameworks like Sencha Touch are heralding a new way of building mobile services using Javascript, HTML5 and CSS3. If you want to discover how to use standard web technologies to reach your mobile users in beautiful app-like ways, this session is for you.

We explore the possibilities that each of these rich, standards-based libraries can bring, we show how the mobile device is fast becoming a first-class Javascript run-time environment, and we discuss how we might be on the dawn of a new web age, where mobile and client-side applications can immerse billions of users with exciting, contextually-aware experiences.

Published in: Technology

Building Cross Platform Mobile Web Apps

  1. 1. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com
  2. 2. Building Cross-Platform Mobile Web Apps with HTML CSS JS
  3. 3. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  4. 4. building( 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 Microsoft Java Android Android RIM AppleApple C++ MicrosoftObj-C Palm J2ME RIM Top U.S. Smartphone Platforms, 3 Month Average Ending Mar 2011 Air comScore MobiLens 2011
  11. 11. J2ME C# RIM C Microsoft Nokia Python Apple Java Android Android Nokia Microsoft C++ RIM Lua Obj-C Apple ... Top EU5 Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010http://www.cloudfour.com/a-comprehensive-guide-to-mobile-statistics/
  12. 12. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  13. 13. The Mobile WebCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies
  14. 14. DocumentsApplications
  15. 15. Declarative HTMLProgrammatic JS
  16. 16. Thin clientThick client
  17. 17. One PCMultiple devices
  18. 18. Sedentary usage Mobile usage
  19. 19. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  20. 20. 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
  21. 21. 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
  22. 22. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  23. 23. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  24. 24. WebKit FOEs
  25. 25. 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
  26. 26. Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
  27. 27. Documents ApplicationsDeclarative HTML Programmatic DOM Thin client Thick client Themes APIs URLs ArgumentsRequest/Response Synchronization
  28. 28. jQTouchUI layer on top of jQueryDeclarative HTMLLibrary progressively enhancesBrowsers: iOS (iPhone/iPod) Android BlackBerry v6 Most WebKit-based browsershttp://jQTouch.com
  29. 29. jQTouch Scripts & stylesheets CSS classes for semantics & config
  30. 30. jQuery Mobile (alpha)UI layer on top of jQueryDeclarative HTMLLibrary progressively enhancesBrowsers: iOS (iPhone/iPad) Android BlackBerry v5+ Symbian v5, MeeGo, webOShttp://jquerymobile.com
  31. 31. jQuery Mobile Scripts & stylesheet data-* for semantics & config
  32. 32. Sencha TouchSelf-contained libraryProgrammatic JavascriptStandalone MVC applicationsBrowsers: iOS (iPhone/iPad) Android BlackBerry v6 & QNX Bada, MeeGo & other WebKit Windows Phone 7*http://sencha.com/touch* with IE9
  33. 33. Sencha Touch Data model & records Programmatically create toolbar & list
  34. 34. Progressive Enhancement?
  35. 35. What’s in a good framework?Layouts & componentsTheming & iconsOrientation & animationTouch events & scrollerData packageMVC framework
  36. 36. ComponentsLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5- Audio- Video- GeoLocation
  37. 37. ThemingUse CSS3 & SASS- Flexible themes- Highly optimized
  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. “The Kitchen Sink” http://sencha.com/x/5e
  43. 43. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  44. 44. Evolving the web for mobile Views HTML, CSS... Controllers Models
  45. 45. Evolving the web for mobile Desktop Switcher HTML, CSS... Mobile Controllers Models
  46. 46. Evolving the web for mobile Desktop Switchers Mobile REST JSO on Controllers N ce Models
  47. 47. The classic web stack req/resUser interface RenderingBusiness logic Storage
  48. 48. The next web stack? User interface syncSecurity Business logicStorage Storage
  49. 49. Write once,run anywhere?
  50. 50. Er, no.
  51. 51. “ The Mobile Web is not a ” 320px Web
  52. 52. But you can re-use a lot of code
  53. 53. Views Views Controllers Models Stores Proxies n jso
  54. 54. Thick client, thin serverThe shortfall in the cloud
  55. 55. Location Services Adaptation Analytics Web Fonts Data SyncVideo Serving Ad Serving $ Image Serving Commerce Network APIs
  56. 56. http://mysite.com/myimage.pnghttp://src.sencha.io/http://mysite.com/myimage.png
  57. 57. Do we have time for some code?
  58. 58. Listvar list = new Ext.List({ store: store, itemTpl: {firstName} {lastName}, grouped: true, indexBar: true});
  59. 59. Nested Listvar list = new Ext.NestedList({ store: store, displayField: name, title: My List, updateTitleText: true, getDetailCard: function(record, parent) {..}});
  60. 60. Carouselvar car = new Ext.Carousel({ direction: horizontal, indicator: true, items: [ .. ]});
  61. 61. Sheetsvar sheet = new Ext.ActionSheet({ items: [ { text: Delete draft, ui: decline }, { text: Save draft }, { text: Cancel, } ]});sheet.show();
  62. 62. http://senchalearn.github.com/seattlebars/
  63. 63. The cloud at work...Location API to get lat/longMongoLabs to get city nameYelp to get businesses
  64. 64. https://github.com/ senchalearn/ seattlebars
  65. 65. Going o ine
  66. 66. PhoneGapA platform that allows you to author native applications with web technologies and get access to device APIs UIWebView WebViewHTML CSS Stores JS
  67. 67. Device AccessAccelerometer FileCamera GeolocationCompass MediaContacts NetworkDevice NotificationEvents Storagehttp://docs.phonegap.com
  68. 68. Weinrehttp://pmuellr.github.com/weinre/
  69. 69. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  70. 70. built withApps vs Web technology
  71. 71. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com

×