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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building Cross Platform Mobile Web Apps

9,854

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 …

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
0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,854
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
238
Comments
0
Likes
12
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

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

×