HTML5 and the Future of the Mobile Web

Presenter: Patrick Carey, Carey Associates Which way to the future of mobile computing? Does the future belong to native apps downloaded from proprietary apps stores and tailor-designed for specific operating systems or is HTML5 the future with its support across a variety of mobile devices and platforms? Or is the future a hybrid of both approaches?

1.0x

HTML5 and the Future of the Mobile Web

Created 2 years ago

Duration 0:00:00
lesson view count 197
Presenter: Patrick Carey, Carey Associates Which way to the future of mobile computing? Does the future belong to native apps downloaded from proprietary apps stores and tailor-designed for specific operating systems or is HTML5 the future with its support across a variety of mobile devices and platforms? Or is the future a hybrid of both approaches?
Select the file type you wish to download
Slide Content
  1. HTML5 and the Future of the Mobile Web

    Slide 1 - HTML5 and the Future of the Mobile Web

    • Patrick Carey
    • Cengage Learning Author
  2. 2015 Cengage Learning Computing Conference

    Slide 2 - 2015 Cengage Learning Computing Conference

    • 2
    • “HTML5 is now supported on a wide variety of devices, lowering the cost of creating rich applications to reach users everywhere.”
    • “HTML5 represents a set of features that people will be able to rely on for years to come..”
  3. 2015 Cengage Learning Computing Conference

    Slide 3 - 2015 Cengage Learning Computing Conference

    • 3
    • Mims, C. (2014, November 17) The Web is Dying; Apps are Killing ItWall Street Journal
    • Manjoo, F. (2014, November 5) Fall of the Banner Ad: The Monster that Swallowed the Web. The New York Times
    • Anderson, C. & Wolff, M. (2010, August 17) The Web is Dead. Long Live the Internet. Wired
    • Kelly, K. & Wolff, G. (1997, March) Kiss your Browser Goodbye: The radical future of media beyond the Web. Wired
    • The reports of my death have been greatly exaggerated
  4. 2015 Cengage Learning Computing Conference

    Slide 4 - 2015 Cengage Learning Computing Conference

    • 4
  5. 2015 Cengage Learning Computing Conference

    Slide 5 - 2015 Cengage Learning Computing Conference

    • 5
    • Source: comScore
    • Digital Time Spent
  6. Breakdown of Mobile Use

    Slide 6 - Breakdown of Mobile Use

    • 2015 Cengage Learning Computing Conference
    • 6
  7. 7

    Slide 7 - 7

    • Native App
    • Runs as locally-installed application
    • Built with Objective-C, Java, or C#
    • Built for specific devices/screens
    • Approval from app store required
  8. 8

    Slide 8 - 8

    • Web App
    • Runs within the mobile browser
    • Built with HTML5, CSS, & JS
    • Responsive design
    • No approval required
  9. Forecast: The Web-Based Weather App

    Slide 9 - Forecast: The Web-Based Weather App

    • 2015 Cengage Learning Computing Conference
    • 9
    • http://forecast.io/
  10. Financial Times Web App

    Slide 10 - Financial Times Web App

    • 2015 Cengage Learning Computing Conference
    • 10
    • http://apps.ft.com/
  11. 11

    Slide 11 - 11

    • Hybrid App
    • Runs within a native app container
    • Written in HTML5, CSS, & JS
    • Built for specific devices/screens
    • Approval from app store required
  12. Benefits of Hybrid Apps

    Slide 12 - Benefits of Hybrid Apps

    • 2015 Cengage Learning Computing Conference
    • 12
    • Developer can use existing web skills
    • One code base
    • Reduced development time and cost
    • Responsive web design
    • Access to some device features
    • Advanced offline capabilities
    • Increased visibility
  13. Drawbacks of Hybrid Apps

    Slide 13 - Drawbacks of Hybrid Apps

    • 2015 Cengage Learning Computing Conference
    • 13
    • Performance issues
    • Increased time and effort
    • Not all device features supported
    • Risk of being rejected by app store
  14. WKWebView and iOS 8

    Slide 14 - WKWebView and iOS 8

    • 2015 Cengage Learning Computing Conference
    • 14
    • Source: caniuse.com via Sencha
    • http://media.tojicode.com/q3bsp/
  15. Feature Comparison

    Slide 15 - Feature Comparison

    • 2015 Cengage Learning Computing Conference
    • 15
    • Web App
    • Native App
    • Device Features
    • Maintenance
    • Offline Access
    • Discoverability
    • Performance
    • Platform Independence
    • Cost
    • User Interface
  16. 2015 Cengage Learning Computing Conference

    Slide 16 - 2015 Cengage Learning Computing Conference

    • 16
    • — Mark Zuckerberg, 2012
    • When I’m introspective about the last few years, I think the biggest mistake that we made as a company is betting too much on HTML5 as opposed to native. Because it just wasn’t there …
    • … One of the things that’s interesting is we actually have more people on a daily basis using mobile Web Facebook than we have using our iOS or Android apps combined. So mobile Web is a big thing for us.
  17. 2015 Cengage Learning Computing Conference

    Slide 17 - 2015 Cengage Learning Computing Conference

    • 17
  18. 2015 Cengage Learning Computing Conference

    Slide 18 - 2015 Cengage Learning Computing Conference

    • 18
    • Source: VisionMobile, Developer Economics 2013 Q1
    • What’s Unattractive about HTML5?
    • What’s Attractive about HTML5?
  19. Application Foundations of HTML5 (Looking Forward)

    Slide 19 - Application Foundations of HTML5 (Looking Forward)

    • 2015 Cengage Learning Computing Conference
    • 19
    • Security and Privacy
    • Core Web Design and Development
    • Device Interaction
    • Application Lifecycle
    • Media and Real-Time Communications
    • Performance and Tuning
    • Usability and Accessibility
    • Services
  20. Graphics and Layout

    Slide 20 - Graphics and Layout

    • 2015 Cengage Learning Computing Conference
    • 20
    • Feature
    • Maturity/Stability
    • Safari
    • Android
    • Chrome
    • Opera
    • IE
    • Firefox
    • Timing Control for Scripts
    • Candidate Recommendation / Stable
    • CSS Will Change Property
    • Working Draft / Early Draft
    • CSS Flex Layout
    • Last Call Working Draft / Mostly Finished
    • WOFF File Format
    • W3C Recommendation / Finished
    • WOFF File Format 2
    • Working Draft / Early Draft
    • Orientation Lock
    • Working Draft / Early Draft
    • Feature
    • Maturity/Stability
    • Safari
    • Android
    • Chrome
    • Opera
    • IE
    • Firefox
    • SVG Graphics
    • W3C Recommendation / Finished
    • HTML Canvas 2D
    • Candidate Recommendation / Stable
    • CSS Backgrounds & Borders
    • Candidate Recommendation / Mostly Finished
    • CSS Transformations
    • Working Draft / Stabilizing
    • CSS Animations
    • Working Draft / Early Draft
    • CSS Transitions
    • Working Draft / Early Draft
    • Web Animations
    • Working Draft / Early Draft
    • http://www.w3.org/Mobile/mobile-web-app-state
  21. Data Storage

    Slide 21 - Data Storage

    • Feature
    • Maturity/Stability
    • Safari
    • Android
    • Chrome
    • Opera
    • IE
    • Firefox
    • Web Storage
    • W3C Recommendation / Finished
    • File Reader API
    • Last Call Working Draft / Stabilizing
    • HTML5 download attr.
    • W3C Recommendation / Stable
    • Indexed Database API
    • W3C Recommendation / Stable
    • Quota Management
    • Working Draft / Early Work
    • Web Cryptography
    • Candidate Recommendation / Stable
    • 2015 Cengage Learning Computing Conference
    • 21
    • http://www.w3.org/Mobile/mobile-web-app-state
  22. Device Integration

    Slide 22 - Device Integration

    • Feature
    • Maturity/Stability
    • Safari
    • Android
    • Chrome
    • Opera
    • IE
    • Firefox
    • Geolocation
    • W3C Recommendation / Finished
    • Motion sensors
    • Last Call Working Draft / Stabilizing
    • Battery status
    • Candidate Recommendation / Stable
    • Proximity sensor
    • Candidate Recommendation / Likely to evolve
    • Ambient light
    • Last Call Working Draft / Likely to evolve
    • Camera & Microphone
    • Working Draft / Stabilizing
    • NFC
    • Working Draft / Very early
    • 2015 Cengage Learning Computing Conference
    • 22
    • http://www.w3.org/Mobile/mobile-web-app-state
  23. Feature

    Slide 23 - Feature

    • Maturity/Stability
    • Safari
    • Android
    • Chrome
    • Opera
    • IE
    • Firefox
    • XMLHttpRequest Lev. 1
    • Working Draft / Stabilizing
    • Beacon
    • Last Call Working Draft / Stabilizing
    • Background Sync
    • N/A / Early Draft
    • Cross-domain requests
    • W3C Recommendation / Stable
    • Server-sent Events
    • Proposed recommendation / Stable
    • Feature
    • Maturity/Stability
    • Safari
    • Android
    • Chrome
    • Opera
    • IE
    • Firefox
    • Push API
    • Working Draft / Early Draft
    • The WebSocket API
    • Candidate Recommendation/ Stable
    • Real-time Comm.
    • Working Draft / Early Draft
    • online State in HTML5
    • W3C Recommendation / Stable
    • Resource Timing
    • Working Draft / Stable
    • Network Integration
    • 2015 Cengage Learning Computing Conference
    • 23
    • http://www.w3.org/Mobile/mobile-web-app-state
  24. Performance and Tuning

    Slide 24 - Performance and Tuning

    • Feature
    • Maturity/Stability
    • Safari
    • Android
    • Chrome
    • Opera
    • IE
    • Firefox
    • Navigation Timing
    • W3C Recommendation / Finished
    • Resource Timing
    • Working Draft / Stable
    • Performance Timeline
    • W3C Recommendation / Finished
    • User Timing
    • W3C Recommendation / Finished
    • Frame Timing
    • Working Draft / Early Draft
    • Page Visibility
    • W3C Recommendation / Finished
    • Animation Optimization
    • Candidate Recommendation / Stable
    • Web Workers
    • Candidate Recommendation / Stable
    • 2015 Cengage Learning Computing Conference
    • 24
    • http://www.w3.org/Mobile/mobile-web-app-state
  25. Application Lifecycle

    Slide 25 - Application Lifecycle

    • Feature
    • Maturity/Stability
    • Safari
    • Android
    • Chrome
    • Opera
    • IE
    • Firefox
    • Packaging on the Web
    • Working Draft / Early Draft
    • Manifest for Web apps
    • Working Draft / Early Draft
    • Application Cache
    • W3C Recommendation / Stable
    • Service Workers
    • Working Draft / Early Draft
    • Task Schedule
    • Working Draft / Early Draft
    • Page Visibility
    • W3C Recommendation / Finished
    • 2015 Cengage Learning Computing Conference
    • 25
    • http://www.w3.org/Mobile/mobile-web-app-state
  26. Apps using Add to Home Screen

    Slide 26 - Apps using Add to Home Screen

    • 2015 Cengage Learning Computing Conference
    • 26
    • Available in Chrome 42 (beta)
    • https://events.google.com/io2015/
    • { "short_name": “Cengage 2015",
    • "name": “Cenage 2015 Application",
    • "icons": [
    • { "src": "launcher-icon-3x.png",
    • "sizes": "144x144",
    • "type": "image/png"
    • }
    • ],
    • "start_url " : "index.html",
    • "display": "standalone"
    • }
  27. 2015 Cengage Learning Computing Conference

    Slide 27 - 2015 Cengage Learning Computing Conference

    • 27
  28. Contact Information

    Slide 28 - Contact Information

    • 2015 Cengage Learning Computing Conference
    • 28
    • Patrick Carey
    • Carey Associates
    • 8502 Miller Road
    • Verona, WI 53593
    • (608) 469-5974
    • patrick1@careys.com