0
James Pearce Director, Developer Relations @ jamespearce   jamesp@sencha.com
HTML5 and the dawn of   rich mobile web     applications
or
Everything I know about HTML5 I learned from
How Mobile Rolls
2008
We must have an iPhone App!
2010
We must have an Android App!
2011
omfg
JS        C# Palm   J2ME    Microsoft                        RIM         RIM                                    Android   ...
J2ME     C#          RIM   C     Microsoft                                   Nokia                       Python           ...
Device diversity
App Stores   Updates
The Promise ofWeb Technologies
The WebCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood...                      Mobi...
http://www.victoriassecret.com
http://mobile.victoriassecret.com
Themobile web is not a320px web
(“responsive web design”)
The WebCross-platformFamiliar skills & toolsDecentralizedEasily updatedIndexedWell-understood...                          ...
Hypothesis:   Web technologies          are a   viable alternativeto native development
The Web is Evolving...   Documents           Applications Declarative HTML   Programmatic DOM    Templates             API...
-webkit       accelerometer                                        @page  localStorage                                    ...
this is uncanny
A New Mobile App Stack                WebFonts        Video      Audio    GraphicsDevice Access                           ...
Rich Media & StylingO     RM                          TF                        LA   Full Resource PP P Access            ...
Web technologies          are a   viable alternativeto native development
Caveats?PerformanceBrowser supportDevice access          All less of a issue                   than you might thinkDiscove...
Progressive enhancement
assumption   HTML              JS      CSS                      progressive                     enhancement               ...
State of the Art: Mobile HTML5
Environments     ?
Browsers     WebKit   FOEs
HTML5 support                       IE 9 PR   Chrome 7   Safari 5   Firefox 4b   iPhone 4   BB Torch   Android 2.2@font-fa...
Stay on top of diversityCan I Use?http://caniuse.comModernizrhttp://modernizr.comDeviceAtlashttp://deviceatlas.com
Enter The Framework
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 ...
jQTouchUI layer on top of jQueryDeclarative HTMLLibrary progressively enhancesBrowsers: iOS (iPhone/iPod) Android BlackBer...
jQTouch                    Scripts & stylesheets      CSS classes for semantics & config
jQuery Mobile (alpha)UI layer on top of jQueryDeclarative HTMLLibrary progressively enhancesBrowsers: iOS (iPhone/iPad) An...
jQuery Mobile          Scripts & stylesheet          data-* for semantics                & config
Sencha TouchSelf-contained libraryProgrammatic JavascriptStandalone MVC applicationsBrowsers: iOS (iPhone/iPad) Android Bl...
Sencha Touch                   Data model                   & records       Programmatically create            toolbar & l...
What’s in a good framework?Layouts & componentsTheming & iconsOrientation & animationTouch events & scrollerData packageMV...
ComponentsLists- Nested, Grouped, SortableCarouselPickerOverlaySliderForms & fieldsToolbars & buttonsHTML5- Audio- Video- G...
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- JSON...
“The Kitchen Sink”                     http://sencha.com/x/5e
Implementing Mobile Web      Sites|Apps
Evolving sites for mobile   Views               HTML, CSS... Controllers  Models
Evolving sites for mobile           DesktopSwitcher                     HTML, CSS...            Mobile  Controllers       ...
Mobile detectionclass ApplicationController < ActionController::Base    has_mobile_fuend*.mobile.erbis_mobile_device?in_mo...
Smart detection & user choice“Switch to our desktop site”
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...            DesktopSwitchers             Mobile             REST  Controllers          JSO               ...
Thematic consistency   http://mysite.com/posts/123  http://mysite.com/#!/posts/123
The stack of the present                 req/resUser interface             RenderingBusiness logic   Storage
The stack of the future                  User interface           syncSecurity          Business logicStorage             ...
Do we have time for   some code?
Brand consistency
Getting help from the cloudhttp://i.tinysrc.mobi/http://mysite.com/myimage.png               http://tinysrc.net/
Mobile devices              are di erent               Geolocation              Telephony              Camera       Messag...
Going Hybrid
PhoneGapA platform that allows you to author native applications  with web technologies and get access to device APIs     ...
+
Full API list:Accelerometer   FileCamera          GeolocationCompass         MediaContacts        NetworkDevice          N...
PhoneGap Build
A word about app stores     (pssst: they’re an admission of defeat)
Doing mobile right Everyone loves apps - but native development sucks This is the year of the mobile web - but caveats app...
built withApps vs Web technology
James Pearce Director, Developer Relations @ jamespearce   jamesp@sencha.com
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
×

HTML5 and the dawn of rich mobile web applications

9,912

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 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,912
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
381
Comments
0
Likes
27
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 and the dawn of rich mobile web applications"

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

    Clipping is a handy way to collect important slides you want to go back to later.

×