Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Rich Mobile Apps with HTML5, CSS3 and JavaScript

66,650 views

Published on

Michael Mullany presented about Sencha Touch HTML5 mobile web applications at Silicon Valley User Group in April 2011.

Published in: Technology

Building Rich Mobile Apps with HTML5, CSS3 and JavaScript

  1. HTML5 and the dawn of rich mobile web applicationsSENCHA: HTML5 SVUG April 2011
  2. 2008
  3. We must have an iPhone App!
  4. 2010
  5. We must have an Android App!
  6. 2011
  7. OMG
  8. Palm Microsoft RIM RIM Android AppleApple Microsoft Palm Android Top U.S. Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010
  9. JS C# Palm J2ME Microsoft RIM RIM Android Apple Apple Air Microsoft PalmObj-C Java Android C++ Top U.S. Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010
  10. J2ME C# RIM C/C++ Microsoft Nokia Python AppleJava AndroidAndroid Nokia MicrosoftC++ RIM Lua Obj-C Apple ... Top EU5 Smartphone Platforms, 3 Month Average Ending December 2010 comScore MobiLens 2010
  11. J2ME C# RIM C/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/
  12. Device diversity
  13. The Promise ofWeb Technologies
  14. The WebCross-platformStandards-processFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood...
  15. The WebCross-platformStandards-processFamiliar skills & toolsDecentralizedEasily updatedIndexed Mobile: the next era ofWell-understood the web as we know it...
  16. http://www.victoriassecret.com
  17. http://mobile.victoriassecret.com
  18. Themobile web is not a320px web
  19. (“responsive web design”)
  20. Hypothesis: Web technologies are a viable alternativeto native development
  21. The Web is Evolving...
  22. The Web is Evolving... Documents Applications
  23. The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM
  24. The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates APIs
  25. The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments
  26. The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization
  27. The Web is Evolving... Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization Thin client Thick client
  28. "If you write Web-based applications, Iwould be interested in hearing about whatyour needs are. Please let me know"Ian Hickson 2004WhatWG “Founding Post”
  29. -webkit accelerometer @page localStorage CSS Text @media manifesttransform <video> WebSQL GeoLocation type=camera canvas keyframe gradient
  30. A New Mobile App Stack CSS Styling & Layout Javascript Semantic HTML
  31. A New Mobile App Stack WebFont Video Audio Graphics CSS Styling & Layout Javascript Semantic HTML
  32. A New Mobile App Stack WebFont Video Audio Graphics CSS Styling & Layout Javascript Semantic HTML File Systems DBs App Cache
  33. A New Mobile App Stack WebFont Video Audio Graphics CSS Styling & Layout Javascript Semantic HTML File Systems Worker DBs Parallel App Cache Processing
  34. A New Mobile App Stack WebFont Video Audio Graphics CSS Styling & Layout Javascript Semantic HTML File Systems Worker x-App DBs Parallel Messaging App Cache Processing
  35. A New Mobile App Stack WebFont Video Audio GraphicsDevice Access Camera CSS Styling & Layout Location Javascript Contacts SMS Semantic HTML Orientation File Systems Worker x-App Gyro DBs Parallel Messaging App Cache Processing
  36. A New Mobile App Stack WebFont 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
  37. Rich Media & StylingFull Resource Access Parallel Processing Inter-AppCommunication Full Offline Capability
  38. Rich Media & Styling R M F O A T Full Resource Access P L A PP Parallel ProcessingRN D E Inter-App M O T E Communication Full P LE M O Offline CapabilityC
  39. Demo 1http://jag.gr/tm
  40. Demo 1Ihttp://www.e-resistible.co.uk/
  41. Demo 1I1http://vimeo.com/awards/m
  42. Web technologies are a viable alternativeto native development
  43. Caveats?PerformanceBrowser supportDevice accessDiscoverabilityMonetizationApp ‘experience’
  44. Caveats?PerformanceBrowser supportDevice access All less of a issue than you might thinkDiscoverabilityMonetizationApp ‘experience’
  45. Progressive enhancement
  46. assumptionHTML doc
  47. assumptionHTML JS CSS progressive enhancement app doc
  48. assumption HTML JS CSS progressive enhancement app doc assumptionHTML JS CSS app
  49. assumption HTML JS CSS progressive enhancement app doc vs assumptionHTML JS CSS app
  50. State of the Art: Mobile HTML5
  51. Environments ?
  52. Browsers WebKit Others
  53. HTML5 Support: Edge 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
  54. Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.comWikipediaComparison of LayoutEngines
  55. Enter The Abstractions...
  56. Why use a framework?Provide user interface componentsSmooth browser inconsistenciesMimic native or server paradigmsCreate consistent applicationarchitectures...and more
  57. Strokes for folks Sites & Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization Thin client Thick client
  58. Strokes for folks Sites & Documents Applications Declarative HTML Programmatic DOM Templates APIs URLs Arguments Request/Response Synchronization Thin client Thick client
  59. jQTouchUI layer on top of jQueryDeclarative HTMLLibrary progressivelyenhancesBrowsers: iOS (iPhone/iPod) Android BlackBerry v6 Most WebKit-basedbrowsershttp://jQTouch.com
  60. jQTouch Scripts & stylesheets CSS classes for semantics & config
  61. jQuery Mobile (alpha)UI layer on top of jQueryDeclarative HTMLLibrary progressivelyenhancesBrowsers: iOS (iPhone/iPad) Android BlackBerry v5+ Symbian v5, MeeGo, webOShttp://jquerymobile.com
  62. jQuery Mobile (alpha) Scripts & stylesheet data-* for semantics & config
  63. Sencha TouchSelf-contained libraryProgrammatic JavascriptUI Declared via JSONStandalone MVC applicationsBrowsers: iOS (iPhone/iPad) Android BlackBerry v6 & QNX Bada, MeeGo & otherWebKit Windows Phone 7** to come
  64. Sencha Touch Data model & records Programmatically create toolbar & list
  65. What’s in a goodLayouts & componentsTheming & iconsOrientation & animationTouch events & scrollerData packageMVC framework
  66. ComponentsLists - Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5 - Audio - Video - GeoLocation
  67. ThemingUse CSS3 & SASS- Flexible themes- Highly optimized
  68. Forms
  69. ScrollingMomentum/bounce physicsHardware acceleratedThroughout all components: - Lists - Carousel - Pickers
  70. Touch EventsBuilt on native eventsAbstracted for performanceAdditional events- Tap- Double tap- Tap and hold- Swipe- Rotate- Drag & drop
  71. Data PackageModels, Stores, and Proxies- Associations- Validation- Local & server storageEasily consume web services - JSON/P - XML - YQL
  72. “The Kitchen Sink” http://sencha.com/x/5e
  73. Implementing Mobile Web Sites|Apps
  74. Evolving sites for mobile Views HTML, CSS...Controlle Models
  75. Evolving sites for mobile Deskto HTML,Switcher CSS... Mobile Controlle Models
  76. Mobile detectionclass ApplicationController < ActionController::Base has_mobile_fuend*.mobile.erbis_mobile_device?in_mobile_view? https://github.com/brendanlim/mobile-fu
  77. Smart detection & user choice“Switch to our desktop site”
  78. www.xkcd.com
  79. Thematic consistency
  80. Thematic consistencyw3c-speak
  81. Thematic consistencyw3c-speak http://mysite.com/posts/123
  82. Thematic consistencyw3c-speak http://mysite.com/posts/123 http://mysite.mobi/posts/123
  83. Mobile switchinghttp://tinyurl.com/mobswi1 http://tinyurl.com/ mobswi2
  84. Then to an app... DesktoSwitchers Mobile REST JSO Controlle N Models
  85. Thematic consistency http://mysite.com/posts/123 http://mysite.com/#!/posts/123
  86. The stack of the present req/res User RenderingBusinessStorage
  87. The stack of the future User syncSecurity BusinessStorage Storage
  88. The stack of the future User syncSecurity BusinessStorage Storage The return of the thick client!
  89. Brand consistency
  90. Brand consistency
  91. Brand consistency
  92. Getting help from the cloudhttp://i.tinysrc.mobi/http://mysite.com/myimage.png http://tinysrc.net/
  93. Mobile devices are different Geolocation Telephon y CameraMessaging
  94. Mobile devices are different Geolocation Telephon y Camera MessagingAnd mobile usersare different too!
  95. Going Hybrid
  96. PhoneGap, Nimblekit, Libraries that allows you to author native applicationswith web technologies and get access to device APIs
  97. +
  98. Full API list:Accelerometer FileCamera GeolocationCompass MediaContacts NetworkDevice NotificationEvents Storagehttp://docs.phonegap.com
  99. Full API list:Accelerometer FileCamera GeolocationCompass MediaContacts NetworkDevice NotificationEvents Storagehttp://docs.phonegap.com http://www.sencha.com/learn/ Tutorial:Sencha_Touch_PhoneGap
  100. Doing mobile right
  101. Doing mobile rightEveryone loves apps - but native diversity sucks
  102. Doing mobile rightEveryone loves apps - but native diversity sucksThis is the year of the mobile web - but caveats apply
  103. Doing mobile right Everyone loves apps - but native diversity sucks This is the year of the mobile web - but caveats applyHTML5 makes web tech a viable alternative to native apps

×