Building Cross Platform Mobile Web Apps
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Building Cross Platform Mobile Web Apps

on

  • 10,561 views

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 ...

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.

Statistics

Views

Total Views
10,561
Views on SlideShare
10,359
Embed Views
202

Actions

Likes
11
Downloads
232
Comments
0

10 Embeds 202

http://developerthinktank.com 98
http://www.jsday.it 43
http://developerthinktank.squarespace.com 26
http://50.57.150.126 24
https://twitter.com 3
http://paper.li 2
http://twitter.com 2
url_unknown 2
http://www.techgig.com 1
http://us-w1.rockmelt.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Building Cross Platform Mobile Web Apps Presentation Transcript

  • 1. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com
  • 2. Building Cross-Platform Mobile Web Apps with HTML CSS JS
  • 3. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  • 4. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  • 5. 2008We must have an iPhone App!
  • 6. 2009We must have an Android App!
  • 7. 2010We must have an iPad App!
  • 8. 2011We must have a...
  • 9. omfg
  • 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. 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. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  • 13. The Mobile WebCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies
  • 14. DocumentsApplications
  • 15. Declarative HTMLProgrammatic JS
  • 16. Thin clientThick client
  • 17. One PCMultiple devices
  • 18. Sedentary usage Mobile usage
  • 19. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  • 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. 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. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  • 23. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  • 24. WebKit FOEs
  • 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. Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
  • 27. Documents ApplicationsDeclarative HTML Programmatic DOM Thin client Thick client Themes APIs URLs ArgumentsRequest/Response Synchronization
  • 28. jQTouchUI layer on top of jQueryDeclarative HTMLLibrary progressively enhancesBrowsers: iOS (iPhone/iPod) Android BlackBerry v6 Most WebKit-based browsershttp://jQTouch.com
  • 29. jQTouch Scripts & stylesheets CSS classes for semantics & config
  • 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. jQuery Mobile Scripts & stylesheet data-* for semantics & config
  • 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. Sencha Touch Data model & records Programmatically create toolbar & list
  • 34. Progressive Enhancement?
  • 35. What’s in a good framework?Layouts & componentsTheming & iconsOrientation & animationTouch events & scrollerData packageMVC framework
  • 36. ComponentsLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5- Audio- Video- GeoLocation
  • 37. ThemingUse CSS3 & SASS- Flexible themes- Highly optimized
  • 38. Forms
  • 39. ScrollingMomentum/bounce physicsHardware acceleratedThroughout all components:- Lists- Carousel- Pickers
  • 40. Touch EventsBuilt on native eventsAbstracted for performanceAdditional events- Tap- Double tap- Tap and hold- Swipe- Rotate- Drag & drop
  • 41. Data PackageModels, Stores, and Proxies- Associations- Validation- Local & server storageEasily consume web services- JSON/P- XML- YQL
  • 42. “The Kitchen Sink” http://sencha.com/x/5e
  • 43. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  • 44. Evolving the web for mobile Views HTML, CSS... Controllers Models
  • 45. Evolving the web for mobile Desktop Switcher HTML, CSS... Mobile Controllers Models
  • 46. Evolving the web for mobile Desktop Switchers Mobile REST JSO on Controllers N ce Models
  • 47. The classic web stack req/resUser interface RenderingBusiness logic Storage
  • 48. The next web stack? User interface syncSecurity Business logicStorage Storage
  • 49. Write once,run anywhere?
  • 50. Er, no.
  • 51. “ The Mobile Web is not a ” 320px Web
  • 52. But you can re-use a lot of code
  • 53. Views Views Controllers Models Stores Proxies n jso
  • 54. Thick client, thin serverThe shortfall in the cloud
  • 55. Location Services Adaptation Analytics Web Fonts Data SyncVideo Serving Ad Serving $ Image Serving Commerce Network APIs
  • 56. http://mysite.com/myimage.pnghttp://src.sencha.io/http://mysite.com/myimage.png
  • 57. Do we have time for some code?
  • 58. Listvar list = new Ext.List({ store: store, itemTpl: {firstName} {lastName}, grouped: true, indexBar: true});
  • 59. Nested Listvar list = new Ext.NestedList({ store: store, displayField: name, title: My List, updateTitleText: true, getDetailCard: function(record, parent) {..}});
  • 60. Carouselvar car = new Ext.Carousel({ direction: horizontal, indicator: true, items: [ .. ]});
  • 61. Sheetsvar sheet = new Ext.ActionSheet({ items: [ { text: Delete draft, ui: decline }, { text: Save draft }, { text: Cancel, } ]});sheet.show();
  • 62. http://senchalearn.github.com/seattlebars/
  • 63. The cloud at work...Location API to get lat/longMongoLabs to get city nameYelp to get businesses
  • 64. https://github.com/ senchalearn/ seattlebars
  • 65. Going o ine
  • 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. Device AccessAccelerometer FileCamera GeolocationCompass MediaContacts NetworkDevice NotificationEvents Storagehttp://docs.phonegap.com
  • 68. Weinrehttp://pmuellr.github.com/weinre/
  • 69. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  • 70. built withApps vs Web technology
  • 71. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com