Your SlideShare is downloading. ×
0
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
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
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
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
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
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
×

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

3,137

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,137
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
72
Comments
0
Likes
2
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. Sencha
  • 3. Create amazing apps built on web standards
  • 4. Web Frameworks Tools Labs Services
  • 5. Frameworks Sencha Touch Ext JS Ext GWT Ext Core
  • 6. Ext JS http://www.sencha.com/products/extjs/examples/
  • 7. Ext JS 4 http://dev.sencha.com/deploy/ChartsDemo/
  • 8. Ext GWT +http://www.sencha.com/products/extgwt/examples/
  • 9. Ext Core http://www.sencha.com/products/extcore/ M IT
  • 10. Tools Ext Designer Sencha Animator
  • 11. Ext Designer http://www.sencha.com/products/designer/
  • 12. Sencha Animatorhttp://www.sencha.com/products/animator/demos/
  • 13. Labs jQTouch InfoVis Raphaël PhiloGL Connect Android tools http://www.sencha.com/company/
  • 14. Building Cross-Platform Mobile Web Apps with HTML CSS JS
  • 15. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  • 16. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  • 17. 2008We must have an iPhone App!
  • 18. 2009We must have an Android App!
  • 19. 2010We must have an iPad App!
  • 20. 2011We must have a...
  • 21. omfg
  • 22. 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
  • 23. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  • 24. The Mobile WebCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies
  • 25. The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Thin client Thick client Themes APIs URLs Arguments Request/Response Synchronization
  • 26. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  • 27. 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
  • 28. Rich Media & StylingO RM TF LA Full Resource PP P Access A RN ParallelDProcessing E O EMInter-App Communication ET PL Offline Capability Full C OM
  • 29. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  • 30. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  • 31. WebKit FOEs
  • 32. 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
  • 33. Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
  • 34. Documents ApplicationsDeclarative HTML Programmatic DOM Thin client Thick client Themes APIs URLs ArgumentsRequest/Response Synchronization
  • 35. Sencha Touch support
  • 36. What’s in Sencha Touch?Layouts & componentsTheming & iconsOrientation & animationTouch events & scrollerData packageMVC framework
  • 37. ComponentsLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5- Audio- Video- GeoLocation
  • 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. ThemingUse CSS3 & SASS- Flexible themes- Highly optimized
  • 43. “The Kitchen Sink” http://sencha.com/x/5e
  • 44. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  • 45. Evolving a site for mobile Views HTML, CSS... Controllers Models
  • 46. Evolving a site for mobile Desktop Switcher HTML, CSS... Mobile Controllers Models
  • 47. A dedicated mobile app DesktopSwitchers Mobile REST JSO on Controllers N ce Models
  • 48. Thematic consistency http://mysite.com/posts/123 http://mysite.com/#!/posts/123
  • 49. The stack of the present req/resUser interface RenderingBusiness logic Storage
  • 50. A stack of the future User interface syncSecurity Business logicStorage Storage
  • 51. Thick client, thin serverThe shortfall in the cloud
  • 52. http://mysite.com/myimage.pnghttp://i.tinysrc.mobi/http://mysite.com/myimage.png
  • 53. Location Services Adaptation Analytics Web Fonts Data SyncVideo Serving Ad Serving $ Image Serving Commerce Network APIs
  • 54. Do we have time for some code?
  • 55. http://senchalearn.github.com/seattlebars/
  • 56. The cloud at work...Location API to get lat/longMongoLabs to get city nameYelp to get businesses
  • 57. https://github.com/ senchalearn/ seattlebars
  • 58. PhoneGapA platform that allows you to author native applications with web technologies and get access to device APIs http://phonegap.com
  • 59. Device AccessAccelerometer FileCamera GeolocationCompass MediaContacts NetworkDevice NotificationEvents Storagehttp://docs.phonegap.com
  • 60. building( mobile.web().apps([ html5, css3, js ]).crossPlatform());
  • 61. built withApps vs Web technology
  • 62. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com

×