Building Rich Mobile Apps with HTML5, CSS3 and JavaScript

51,920 views

Published on

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

Published in: Technology
5 Comments
61 Likes
Statistics
Notes
No Downloads
Views
Total views
51,920
On SlideShare
0
From Embeds
0
Number of Embeds
1,471
Actions
Shares
0
Downloads
1,561
Comments
5
Likes
61
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • 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

    ×