Your SlideShare is downloading. ×
0
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications
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

HTML5 and the dawn of rich mobile web applications

9,885

Published on

HTML5 and its related technologies are enabling new ways to build beautiful sites and applications for contemporary mobile devices. Native mobile developers can now use web technologies to surmount …

HTML5 and its related technologies are enabling new ways to build beautiful sites and applications for contemporary mobile devices. Native mobile developers can now use web technologies to surmount cross-platform headaches, and desktop web developers can reach mobile users in familiar, app-like ways. This session explores the state of the art in HTML5-based mobile web frameworks, and demonstrates the practical possibilities that this powerful and standards-based approach can bring.

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

No Downloads
Views
Total Views
9,885
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
380
Comments
0
Likes
27
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. HTML5 and the dawn of rich mobile web applications
  • 3. or
  • 4. Everything I know about HTML5 I learned from
  • 5. How Mobile Rolls
  • 6. 2008
  • 7. We must have an iPhone App!
  • 8. 2010
  • 9. We must have an Android App!
  • 10. 2011
  • 11. omfg
  • 12. 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
  • 13. 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/
  • 14. Device diversity
  • 15. App Stores Updates
  • 16. The Promise ofWeb Technologies
  • 17. The WebCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood... Mobile: the next era of the web as we know it
  • 18. http://www.victoriassecret.com
  • 19. http://mobile.victoriassecret.com
  • 20. Themobile web is not a320px web
  • 21. (“responsive web design”)
  • 22. The WebCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood... But wait! Weren’t we talking about apps?
  • 23. Hypothesis: Web technologies are a viable alternativeto native development
  • 24. The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization Thin client Thick client
  • 25. -webkit accelerometer @page localStorage CSS Text @media manifesttransform <video> WebSQL GeoLocation type=camera canvas keyframe gradient
  • 26. this is uncanny
  • 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 M CommunicationInter-AppTE LE P O ine Capability C Full OM
  • 29. Web technologies are a viable alternativeto native development
  • 30. Caveats?PerformanceBrowser supportDevice access All less of a issue than you might thinkDiscoverabilityMonetizationApp ‘experience’
  • 31. Progressive enhancement
  • 32. assumption HTML JS CSS progressive enhancement app doc vs assumptionHTML JS CSS app
  • 33. State of the Art: Mobile HTML5
  • 34. Environments ?
  • 35. Browsers WebKit FOEs
  • 36. HTML5 support IE 9 PR Chrome 7 Safari 5 Firefox 4b iPhone 4 BB Torch Android 2.2@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
  • 37. Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
  • 38. Enter The Framework
  • 39. Why use a framework?Provide user interface componentsSmooth browser inconsistenciesMimic native or server paradigmsCreate consistent application architectures...and more
  • 40. Strokes for folks Sites & Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization Thin client Thick client
  • 41. jQTouchUI layer on top of jQueryDeclarative HTMLLibrary progressively enhancesBrowsers: iOS (iPhone/iPod) Android BlackBerry v6 Most WebKit-based browsershttp://jQTouch.com
  • 42. jQTouch Scripts & stylesheets CSS classes for semantics & config
  • 43. jQuery Mobile (alpha)UI layer on top of jQueryDeclarative HTMLLibrary progressively enhancesBrowsers: iOS (iPhone/iPad) Android BlackBerry v5+ Symbian v5, MeeGo, webOShttp://jquerymobile.com
  • 44. jQuery Mobile Scripts & stylesheet data-* for semantics & config
  • 45. 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* to come
  • 46. Sencha Touch Data model & records Programmatically create toolbar & list
  • 47. What’s in a good framework?Layouts & componentsTheming & iconsOrientation & animationTouch events & scrollerData packageMVC framework
  • 48. ComponentsLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5- Audio- Video- GeoLocation
  • 49. ThemingUse CSS3 & SASS- Flexible themes- Highly optimized
  • 50. Forms
  • 51. ScrollingMomentum/bounce physicsHardware acceleratedThroughout all components:- Lists- Carousel- Pickers
  • 52. Touch EventsBuilt on native eventsAbstracted for performanceAdditional events- Tap- Double tap- Tap and hold- Swipe- Rotate- Drag & drop
  • 53. Data PackageModels, Stores, and Proxies- Associations- Validation- Local & server storageEasily consume web services- JSON/P- XML- YQL
  • 54. “The Kitchen Sink” http://sencha.com/x/5e
  • 55. Implementing Mobile Web Sites|Apps
  • 56. Evolving sites for mobile Views HTML, CSS... Controllers Models
  • 57. Evolving sites for mobile DesktopSwitcher HTML, CSS... Mobile Controllers Models
  • 58. Mobile detectionclass ApplicationController < ActionController::Base has_mobile_fuend*.mobile.erbis_mobile_device?in_mobile_view? https://github.com/brendanlim/mobile-fu
  • 59. Smart detection & user choice“Switch to our desktop site”
  • 60. Thematic consistencyw3c-speak http://mysite.com/posts/123 http://mysite.mobi/posts/123
  • 61. Mobile switchinghttp://tinyurl.com/mobswi1 http://tinyurl.com/mobswi2
  • 62. Then to an app... DesktopSwitchers Mobile REST Controllers JSO N Models
  • 63. Thematic consistency http://mysite.com/posts/123 http://mysite.com/#!/posts/123
  • 64. The stack of the present req/resUser interface RenderingBusiness logic Storage
  • 65. The stack of the future User interface syncSecurity Business logicStorage Storage The return of the thick client!
  • 66. Do we have time for some code?
  • 67. Brand consistency
  • 68. Getting help from the cloudhttp://i.tinysrc.mobi/http://mysite.com/myimage.png http://tinysrc.net/
  • 69. Mobile devices are di erent Geolocation Telephony Camera MessagingAnd mobile usersare different too!
  • 70. Going Hybrid
  • 71. PhoneGapA platform that allows you to author native applications with web technologies and get access to device APIs http://phonegap.com
  • 72. +
  • 73. Full API list:Accelerometer FileCamera GeolocationCompass MediaContacts NetworkDevice NotificationEvents Storagehttp://docs.phonegap.com http://www.sencha.com/learn/ Tutorial:Sencha_Touch_PhoneGap
  • 74. PhoneGap Build
  • 75. A word about app stores (pssst: they’re an admission of defeat)
  • 76. Doing mobile right Everyone loves apps - but native development sucks This is the year of the mobile web - but caveats applyWeb technologies are a viable alternative to native apps
  • 77. built withApps vs Web technology
  • 78. James Pearce Director, Developer Relations @ jamespearce jamesp@sencha.com

×