Your SlideShare is downloading. ×
0
James Pearce Director, Developer Relations @ jamespearce   jamesp@sencha.com
Building Cross-Platform   Mobile Web Apps             with      HTML   CSS    JS
building(   mobile.web().apps([     html5, css3, js   ]).crossPlatform());
building(   mobile.web().apps([     html5, css3, js   ]).crossPlatform());
2008We must have an iPhone App!
2009We must have an Android App!
2010We must have an   iPad App!
2011We must have a...
omfg
JS        C#    Palm        Microsoft    Java                                     Android                       Android   ...
J2ME     C#          RIM   C     Microsoft                                   Nokia                       Python           ...
building(   mobile.web().apps([     html5, css3, js   ]).crossPlatform());
The Mobile WebCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies
DocumentsApplications
Declarative HTMLProgrammatic JS
Thin clientThick client
One PCMultiple devices
Sedentary usage Mobile usage
building(   mobile.web().apps([     html5, css3, js   ]).crossPlatform());
A New Mobile App Stack                WebFonts        Video      Audio    GraphicsDevice Access                           ...
Rich Media & StylingO     RM                           TF                        LA    Full Resource PP PAccess           ...
building(   mobile.web().apps([     html5, css3, js   ]).crossPlatform());
building(   mobile.web().apps([     html5, css3, js   ]).crossPlatform());
WebKit   FOEs
HTML5 Support                       IE 10 PR   Chrome 10   Safari 5   Firefox 4   iOS4.31   Playbook   Honeycomb@font-face...
Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
Documents           ApplicationsDeclarative HTML   Programmatic DOM   Thin client        Thick client    Themes           ...
jQTouchUI layer on top of jQueryDeclarative HTMLLibrary progressively enhancesBrowsers: iOS (iPhone/iPod) Android BlackBer...
jQTouch                         Scripts & stylesheets          CSS classes for semantics & config
jQuery Mobile (alpha)UI layer on top of jQueryDeclarative HTMLLibrary progressively enhancesBrowsers: iOS (iPhone/iPad) An...
jQuery Mobile           Scripts & stylesheet             data-* for semantics                   & config
Sencha TouchSelf-contained libraryProgrammatic JavascriptStandalone MVC applicationsBrowsers: iOS (iPhone/iPad) Android Bl...
Sencha Touch                         Data model                         & records       Programmatically create           ...
Progressive Enhancement?
What’s in a good framework?Layouts & componentsTheming & iconsOrientation & animationTouch events & scrollerData packageMV...
ComponentsLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5- Audio- Video- G...
ThemingUse CSS3 & SASS- Flexible themes- Highly optimized
Forms
ScrollingMomentum/bounce physicsHardware acceleratedThroughout all components:- Lists- Carousel- Pickers
Touch EventsBuilt on native eventsAbstracted for performanceAdditional events- Tap- Double tap- Tap and hold- Swipe- Rotat...
Data PackageModels, Stores, and Proxies- Associations- Validation- Local & server storageEasily consume web services- JSON...
“The Kitchen Sink”                     http://sencha.com/x/5e
building(   mobile.web().apps([     html5, css3, js   ]).crossPlatform());
Evolving the web for mobile    Views                HTML, CSS...  Controllers   Models
Evolving the web for mobile             Desktop  Switcher                       HTML, CSS...              Mobile    Contro...
Evolving the web for mobile              Desktop  Switchers               Mobile               REST                       ...
The classic web stack                 req/resUser interface             RenderingBusiness logic   Storage
The next web stack?                  User interface           syncSecurity          Business logicStorage              Sto...
Write once,run anywhere?
Er, no.
“   The Mobile Web        is not a                     ”      320px Web
But you can re-use   a lot of code
Views                 Views        Controllers         Models          Stores         Proxies          n        jso
Thick client, thin serverThe shortfall in the cloud
Location Services        Adaptation                         Analytics   Web Fonts                                   Data S...
http://mysite.com/myimage.pnghttp://src.sencha.io/http://mysite.com/myimage.png
Do we have time for   some code?
Listvar list = new Ext.List({  store: store,  itemTpl:    {firstName} {lastName},  grouped: true,  indexBar: true});
Nested Listvar list = new Ext.NestedList({  store: store,  displayField: name,  title: My List,  updateTitleText: true,  g...
Carouselvar car = new Ext.Carousel({  direction: horizontal,  indicator: true,  items: [    ..  ]});
Sheetsvar sheet = new Ext.ActionSheet({  items: [    {      text: Delete draft,      ui: decline    }, {      text: Save d...
http://senchalearn.github.com/seattlebars/
The cloud at work...Location API to get lat/longMongoLabs to get city nameYelp to get businesses
https://github.com/    senchalearn/     seattlebars
Going o ine
PhoneGapA platform that allows you to author native applications  with web technologies and get access to device APIs     ...
Device AccessAccelerometer   FileCamera          GeolocationCompass         MediaContacts        NetworkDevice          No...
Weinrehttp://pmuellr.github.com/weinre/
building(   mobile.web().apps([     html5, css3, js   ]).crossPlatform());
built withApps vs Web technology
James Pearce Director, Developer Relations @ jamespearce   jamesp@sencha.com
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
Building Cross Platform Mobile Web Apps
Upcoming SlideShare
Loading in...5
×

Building Cross Platform Mobile Web Apps

9,968

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

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×