Building Cloud-Based Cross-Platform Mobile Web Apps

  • Published on
    13-Jan-2015

  • View
    3.344

  • Download
    1

Embed Size (px)

DESCRIPTION

As presented at http://www.meetup.com/MobileCloud/events/17159747/The web is always evolving, but we're witnessing a significant architectural shift as services migrate to the cloud, business logic moves to ever-thicker clients, and the web escapes the desktop to become a beautifully mobile medium.In this environment, web application frameworks like Sencha Touch offer a new way of building mobile services using HTML5, CSS3, and JavaScript. We'll explore the possibilities that this rich, standards-based approach can bring, how to develop mobile web apps that look and feel native on iPhone, Android, and BlackBerry touch devices, and how to leverage the power of cloud-based services to provide scalable and compelling applications in this new world.

Transcript

  • 1. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com

2. Building Cloud-basedCross-Platform MobileWeb Appswith HTML CSSJS 3. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() )); 4. building( cloudBased( 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. JSC# Palm J2MEMicrosoftRIM RIMAndroidAppleApple Air MicrosoftPalmObj-C Java C++ AndroidTop U.S. Smartphone Platforms,3 Month Average Ending December 2010comScore MobiLens 2010 11. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() )); 12. The Mobile WebCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood technologies 13. The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Themes APIsURLs Arguments Request/ResponseSynchronizationThin clientThick client 14. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() )); 15. -webkit accelerometer@pagelocalStorageCSS Text@media manifesttransformWebSQL GeoLocation type=cameracanvaskeyframe gradient 16. A New Mobile App StackWebFontsVideoAudioGraphicsDevice AccessServer & ServicesCameraCSS Styling & LayoutHTTPLocationAJAX JavascriptContactsEventsSMSSemantic HTML Sockets Orientation SSL File SystemsWorkerx-AppGyroDBsParallelMore... MessagingApp Cache Processing 17. Rich Media & StylingO RM TFLAFull Resource PP PAccessA RN ParallelDProcessing E OM CommunicationInter-AppTE LEP O ine Capability CFull OM 18. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() )); 19. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() )); 20. WebKit FOEs 21. 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 22. Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com 23. Documents ApplicationsDeclarative HTML Programmatic DOMThemes APIs URLs ArgumentsRequest/ResponseSynchronization Thin clientThick client 24. Whats in Sencha Touch?Layouts & componentsTheming & iconsOrientation & animationTouch events & scrollerData packageMVC framework 25. ComponentsLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & eldsToolbars & buttonsHTML5- Audio- Video- GeoLocation 26. ThemingUse CSS3 & SASS- Flexible themes- Highly optimized 27. Forms 28. ScrollingMomentum/bounce physicsHardware acceleratedThroughout all components:- Lists- Carousel- Pickers 29. Touch EventsBuilt on native eventsAbstracted for performanceAdditional events- Tap- Double tap- Tap and hold- Swipe- Rotate- Drag & drop 30. The Kitchen Sink http://sencha.com/x/5e 31. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() )); 32. Data PackageModels, Stores, and Proxies- Associations- Validation- Local & server storageEasily consume web services- JSON/P- XML- YQL 33. Evolving a site for mobile Views HTML, CSS... ControllersModels 34. Evolving a site for mobileDesktop SwitcherHTML, CSS... Mobile ControllersModels 35. A dedicated mobile appDesktopSwitchers Mobile RESTJSOonControllersN ceModels 36. Thematic consistency http://mysite.com/posts/123http://mysite.com/#!/posts/123 37. The stack of the present req/resUser interface RenderingBusiness logic Storage 38. A stack of the future User interfacesyncSecurity Business logicStorage Storage 39. JSON JavaScript Object NotationJSON-P JSON with PaddingCORS Cross-Origin Resource Sharing 40. Thick client, thin serverThe shortfall in the cloud 41. Location ServicesAdaptation Analytics Web Fonts Data SyncVideo Serving Ad Serving $ Image Serving CommerceNetwork APIs 42. http://mysite.com/myimage.pnghttp://i.tinysrc.mobi/http://mysite.com/myimage.png 43. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() )); 44. Do we have time for some code? 45. http://senchalearn.github.com/seattlebars/ 46. The cloud at work...Location API to get lat/longMongoLabs to get city nameYelp to get businesses 47. https://github.com/senchalearn/ seattlebars 48. PhoneGapA platform that allows you to author native applicationswith web technologies and get access to device APIs http://phonegap.com 49. + 50. PhoneGap Build 51. Device AccessAccelerometer FileCameraGeolocationCompass MediaContactsNetworkDeviceNoticationEventsStoragehttp://docs.phonegap.com 52. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() )); 53. built withApps vs Web technology 54. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com

Recommended

View more >