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.
HTML5 and the dawn of rich mobile web     applicationsSENCHA: HTML5 SVUG April 2011
2008
We must have an  iPhone App!
2010
We must have an Android App!
2011
OMG
Palm    Microsoft                       RIM       RIM                                 Android                             ...
JS         C# Palm   J2ME     Microsoft                          RIM        RIM                                     Androi...
J2ME   C#         RIM   C/C++  Microsoft                            Nokia                    Python             AppleJava ...
J2ME     C#          RIM   C/C++     Microsoft                                   Nokia                       Python       ...
Device diversity
The Promise ofWeb Technologies
The WebCross-platformStandards-processFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood...
The WebCross-platformStandards-processFamiliar skills & toolsDecentralizedEasily updatedIndexed                   Mobile: ...
http://www.victoriassecret.com
http://mobile.victoriassecret.com
Themobile web is not a320px web
(“responsive web design”)
Hypothesis:  Web technologies         are a   viable alternativeto native development
The Web is Evolving...
The Web is Evolving...  Documents       Applications
The Web is Evolving...   Documents           Applications Declarative HTML   Programmatic DOM
The Web is Evolving...   Documents           Applications Declarative HTML   Programmatic DOM    Templates             APIs
The Web is Evolving...   Documents           Applications Declarative HTML   Programmatic DOM    Templates             API...
The Web is Evolving...   Documents           Applications Declarative HTML   Programmatic DOM    Templates             API...
The Web is Evolving...   Documents           Applications Declarative HTML   Programmatic DOM    Templates             API...
"If you write Web-based applications, Iwould be interested in hearing about whatyour needs are. Please let me know"Ian Hic...
-webkit     accelerometer                                 @page localStorage                                         CSS T...
A New Mobile App     Stack    CSS Styling & Layout         Javascript      Semantic HTML
A New Mobile App     Stack WebFont    Video      Audio      Graphics           CSS Styling & Layout                Javascr...
A New Mobile App     Stack WebFont    Video        Audio    Graphics           CSS Styling & Layout                  Javas...
A New Mobile App     Stack WebFont    Video        Audio    Graphics           CSS Styling & Layout                  Javas...
A New Mobile App     Stack WebFont    Video        Audio    Graphics           CSS Styling & Layout                  Javas...
A New Mobile App                  Stack                WebFont    Video        Audio    GraphicsDevice Access  Camera     ...
A New Mobile App                  Stack                WebFont    Video        Audio    GraphicsDevice Access             ...
Rich Media & StylingFull Resource Access Parallel Processing      Inter-AppCommunication Full  Offline Capability
Rich Media & Styling R                 M                                     F O                                 A T  Full...
Demo 1http://jag.gr/tm
Demo 1Ihttp://www.e-resistible.co.uk/
Demo 1I1http://vimeo.com/awards/m
Web technologies         are a   viable alternativeto native development
Caveats?PerformanceBrowser supportDevice accessDiscoverabilityMonetizationApp ‘experience’
Caveats?PerformanceBrowser supportDevice access          All less of a issue                   than you might thinkDiscove...
Progressive enhancement
assumptionHTML             doc
assumptionHTML               JS      CSS                    progressive                   enhancement                     ...
assumption  HTML               JS      CSS                      progressive                     enhancement               ...
assumption  HTML               JS      CSS                      progressive                     enhancement               ...
State of the Art: Mobile HTML5
Environments     ?
Browsers    WebKit   Others
HTML5 Support: Edge  IE 10 PR   Chrome 10   Safari 5   Firefox 4   iOS4.31   Playbook   Honeycomb@font-faceCanvasHTML5 Aud...
Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.comWikipedi...
Enter The Abstractions...
Why use a framework?Provide user interface componentsSmooth browser inconsistenciesMimic native or server paradigmsCreate ...
Strokes for folks Sites & Documents      Applications Declarative HTML    Programmatic DOM     Templates             APIs ...
Strokes for folks Sites & Documents      Applications Declarative HTML    Programmatic DOM     Templates             APIs ...
jQTouchUI layer on top of jQueryDeclarative HTMLLibrary progressivelyenhancesBrowsers: iOS (iPhone/iPod) Android BlackBerr...
jQTouch                   Scripts & stylesheets     CSS classes for semantics & config
jQuery Mobile (alpha)UI layer on top of jQueryDeclarative HTMLLibrary progressivelyenhancesBrowsers: iOS (iPhone/iPad) And...
jQuery Mobile (alpha)           Scripts & stylesheet           data-* for semantics                 & config
Sencha TouchSelf-contained libraryProgrammatic JavascriptUI Declared via JSONStandalone MVC applicationsBrowsers: iOS (iPh...
Sencha Touch                  Data model                  & records      Programmatically create           toolbar & list
What’s in a goodLayouts & componentsTheming & iconsOrientation & animationTouch events & scrollerData packageMVC framework
ComponentsLists - Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5 - Audio - Video...
ThemingUse CSS3 & SASS- Flexible themes- Highly optimized
Forms
ScrollingMomentum/bounce physicsHardware acceleratedThroughout all components: - Lists - Carousel - Pickers
Touch EventsBuilt on native eventsAbstracted for performanceAdditional events- Tap- Double tap- Tap and hold- Swipe- Rotat...
Data PackageModels, Stores, and Proxies- Associations- Validation- Local & server storageEasily consume web services - JSO...
“The Kitchen Sink”                http://sencha.com/x/5e
Implementing Mobile         Web     Sites|Apps
Evolving sites for      mobile Views      HTML,            CSS...Controlle Models
Evolving sites for                mobile           Deskto   HTML,Switcher                    CSS...           Mobile Contr...
Mobile detectionclass ApplicationController < ActionController::Base    has_mobile_fuend*.mobile.erbis_mobile_device?in_mo...
Smart detection & user choice“Switch to our desktop site”
www.xkcd.com
Thematic consistency
Thematic consistencyw3c-speak
Thematic consistencyw3c-speak            http://mysite.com/posts/123
Thematic consistencyw3c-speak            http://mysite.com/posts/123            http://mysite.mobi/posts/123
Mobile switchinghttp://tinyurl.com/mobswi1 http://tinyurl.com/                    mobswi2
Then to an app...            DesktoSwitchers            Mobile             REST                     JSO  Controlle        ...
Thematic consistency    http://mysite.com/posts/123   http://mysite.com/#!/posts/123
The stack of the        present           req/res User                RenderingBusinessStorage
The stack of the future                   User           syncSecurity          BusinessStorage           Storage
The stack of the future                      User           syncSecurity           BusinessStorage             Storage    ...
Brand consistency
Brand consistency
Brand consistency
Getting help from the        cloudhttp://i.tinysrc.mobi/http://mysite.com/myimage.png             http://tinysrc.net/
Mobile devices    are different    Geolocation    Telephon            y    CameraMessaging
Mobile devices            are different            Geolocation            Telephon                    y            Camera ...
Going Hybrid
PhoneGap, Nimblekit,     Libraries that allows you to author native                    applicationswith web technologies a...
+
Full API list:Accelerometer   FileCamera          GeolocationCompass         MediaContacts        NetworkDevice          N...
Full API list:Accelerometer   FileCamera          GeolocationCompass         MediaContacts        NetworkDevice          N...
Doing mobile right
Doing mobile rightEveryone loves apps - but native diversity sucks
Doing mobile rightEveryone loves apps - but native diversity sucksThis is the year of the mobile web - but caveats        ...
Doing mobile right  Everyone loves apps - but native diversity sucks  This is the year of the mobile web - but caveats    ...
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Upcoming SlideShare
Loading in …5
×

Building Rich Mobile Apps with HTML5, CSS3 and JavaScript

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

  • Be the first to comment

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

×