Your SlideShare is downloading. ×
Building Cloud-Based 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 Cloud-Based Cross-Platform Mobile Web Apps

3,391

Published on

As presented at http://www.meetup.com/MobileCloud/events/17159747/ …

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.

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

No Downloads
Views
Total Views
3,391
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
161
Comments
0
Likes
6
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 Cloud-basedCross-Platform Mobile Web Apps with HTML CSS JS
  • 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. 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
  • 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 APIs URLs Arguments Request/Response Synchronization Thin client Thick client
  • 14. building( cloudBased( mobile.web().apps([ html5, css3, js ]).crossPlatform() ));
  • 15. -webkit accelerometer @page localStorage CSS Text @media manifesttransform <video> WebSQL GeoLocation type=camera canvas keyframe gradient
  • 16. 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
  • 17. 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
  • 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 DOM Themes APIs URLs ArgumentsRequest/Response Synchronization Thin client Thick client
  • 24. What’s in Sencha Touch?Layouts & componentsTheming & iconsOrientation & animationTouch events & scrollerData packageMVC framework
  • 25. ComponentsLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & 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... Controllers Models
  • 34. Evolving a site for mobile Desktop Switcher HTML, CSS... Mobile Controllers Models
  • 35. A dedicated mobile app DesktopSwitchers Mobile REST JSO on Controllers N ce Models
  • 36. Thematic consistency http://mysite.com/posts/123 http://mysite.com/#!/posts/123
  • 37. The stack of the present req/resUser interface RenderingBusiness logic Storage
  • 38. A stack of the future User interface syncSecurity Business logicStorage Storage
  • 39. <aside>JSON          JavaScript  Object  NotationJSON-­‐P      JSON  with  PaddingCORS          Cross-­‐Origin  Resource  Sharing </aside>
  • 40. Thick client, thin serverThe shortfall in the cloud
  • 41. Location Services Adaptation Analytics Web Fonts Data SyncVideo Serving Ad Serving $ Image Serving Commerce Network 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 applications with web technologies and get access to device APIs http://phonegap.com
  • 49. +
  • 50. PhoneGap Build
  • 51. Device AccessAccelerometer FileCamera GeolocationCompass MediaContacts NetworkDevice NotificationEvents Storagehttp://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

×