HTML5 and the dawn of rich mobile web applications

  • 9,617 views
Uploaded 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
9,617
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
374
Comments
0
Likes
26

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