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 applications
         @ jamespearce
Part I

Mobile & HTML5
Sir Isaac Newton
Three Laws of Motion

(the universe works as we might expect it to)
Albert Michelson   Edward Morley
Light Travels at a
        Constant Speed
(the universe doesn’t work as we thought it would)
Relativistic Mechanics   Exploration



  Classical Mechanics    Familiarity



 Quantum Mechanics       Exploration
The Web Today
    is like
Physics in 1900
Mobile
is our Michelson-Morley
       Experiment
Mobile Context?
     One Web?
 Responsive Design?
   Apps or Sites?
(an inability to answer these questions does
 not cons...
Responsive Web Design
@media screen and (max-width: 480px) {
  #logo {
    background-image: url(mobile.png);
  }
}
Mobile devices are di erent

        Telephone
     Messaging
      Camera
   Compass


 Mobile users are di erent
Content-Type: application/msword
The Mobile Web
    is not a
  320px Web
Single device            Multi device
Sedentary user            Mobile user
                                 *


Declarati...
A badge for all these ways
   the web is changing
HTML5 is a new version of HTML4,
 XHTML1, and DOM Level 2 HTML
 addressing many of the issues of
 those specifications whil...
What is an app?
2008

We must have an
 iPhone App!
2009

We must have an
 Android App!
2010

We must have an
   iPad App!
2011

We must have a...
omfg
What is an app?
Consumption vs Creation
      Linkability
    User Experience
     Architecture
Web
Compromise


             sites

                     Web
                     apps

                             Nati...
WebFont        Video      Audio     Graphics
Device Access
  Camera                   CSS Styling & Layout                ...
The web is now as much
         a stack
   as it is a medium
MS
        RIM
                        Symbian

     Apple


              Android



Top European Smartphone Platforms
  ...
.NET
           J2ME
                            C++

        Obj-C


                   Java



Native programming langua...
IE
    WebKit

                      WebKit

WebKit


             WebKit



Browser platforms to target
         July 2011
There is no WebKit on Mobile
                        - @ppk
But at least we are using
     one language,
      one markup,
    one style system
IE 10 PR   Chrome 10   Safari 5   Firefox 4   iOS4.31   Playbook   Honeycomb
            @font-face
                 Canva...
Stay on top of diversity
Can I Use?
http://caniuse.com

Modernizr
http://modernizr.com

DeviceAtlas
http://deviceatlas.com
100%
Support




          Browsers




                     Capabilities & specifications
100%
Support




          Browsers         Polyfills Frameworks




                     Capabilities & specifications
<!DOCTYPE html>
<html>
    <head>
        <title>jQuery Mobile</title>
        <script src="jq.js"></script><script src="j...
<!DOCTYPE html>
<html>
    <head>
        <title>Sencha Touch</title>
        <script src="st.js"></script>
        <link ...
Evolving the web for mobile

    Views
                HTML, CSS...


  Controllers
   Models
Evolving the web for mobile
             Desktop
  Switcher


                       HTML, CSS...
              Mobile


 ...
Evolving the web for mobile
              Desktop
  Switchers



               Mobile
               REST
               ...
The classic web stack


                 req/res
User interface             Rendering
Business logic
   Storage
A new web stack


                   User interface
            sync
Security           Business logic
Storage            ...
Write once,
run anywhere?
The Mobile Web
    is not a
  320px Web
Views                 Views
        Controllers
         Models
          Stores
         Proxies
          n
        jso
http://sencha.com/x/cv
Thick client, thin server


The shortfall in the cloud
Location Services
        Adaptation                         Analytics



   Web Fonts                                   D...
http://mysite.com/myimage.png




http://src.sencha.io/http://mysite.com/myimage.png
Myths & rumors
HTML5 apps can’t
  run o ine


(hybrid, appcache, and localStorage...)
Going o ine




http://github.com/jamesgpearce/confess
HTML5 apps can’t match
  native performance


       (true, sometimes)
HTML5 apps can’t be
   monetized


  (is this a technology problem?)
HTML5 apps are more
 e cient to develop


 (yes, in theory, but diversity remains)
24 dev-months
          for iOS


http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
12 further dev-months
for Android & BlackBerry


  http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.ht...
...but more
engagement
than
the native app
Web
Compromise


             sites
                     Web
                     apps
                            Hybrid
...
Camera       WebFont        Video      Audio     Graphics
                                                              HT...
WebView
 Camera       WebFont        Video      Audio     Graphics
                                                       ...
Native Wrapper

                                         WebView
 Camera       WebFont        Video      Audio     Graphic...
Native app stores
have a dirty secret
built with

Apps vs web technology
James Pearce
@ jamespearce
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
HTML5 and the dawn of rich mobile web applications pt 1
Upcoming SlideShare
Loading in …5
×

of

HTML5 and the dawn of rich mobile web applications pt 1 Slide 1 HTML5 and the dawn of rich mobile web applications pt 1 Slide 2 HTML5 and the dawn of rich mobile web applications pt 1 Slide 3 HTML5 and the dawn of rich mobile web applications pt 1 Slide 4 HTML5 and the dawn of rich mobile web applications pt 1 Slide 5 HTML5 and the dawn of rich mobile web applications pt 1 Slide 6 HTML5 and the dawn of rich mobile web applications pt 1 Slide 7 HTML5 and the dawn of rich mobile web applications pt 1 Slide 8 HTML5 and the dawn of rich mobile web applications pt 1 Slide 9 HTML5 and the dawn of rich mobile web applications pt 1 Slide 10 HTML5 and the dawn of rich mobile web applications pt 1 Slide 11 HTML5 and the dawn of rich mobile web applications pt 1 Slide 12 HTML5 and the dawn of rich mobile web applications pt 1 Slide 13 HTML5 and the dawn of rich mobile web applications pt 1 Slide 14 HTML5 and the dawn of rich mobile web applications pt 1 Slide 15 HTML5 and the dawn of rich mobile web applications pt 1 Slide 16 HTML5 and the dawn of rich mobile web applications pt 1 Slide 17 HTML5 and the dawn of rich mobile web applications pt 1 Slide 18 HTML5 and the dawn of rich mobile web applications pt 1 Slide 19 HTML5 and the dawn of rich mobile web applications pt 1 Slide 20 HTML5 and the dawn of rich mobile web applications pt 1 Slide 21 HTML5 and the dawn of rich mobile web applications pt 1 Slide 22 HTML5 and the dawn of rich mobile web applications pt 1 Slide 23 HTML5 and the dawn of rich mobile web applications pt 1 Slide 24 HTML5 and the dawn of rich mobile web applications pt 1 Slide 25 HTML5 and the dawn of rich mobile web applications pt 1 Slide 26 HTML5 and the dawn of rich mobile web applications pt 1 Slide 27 HTML5 and the dawn of rich mobile web applications pt 1 Slide 28 HTML5 and the dawn of rich mobile web applications pt 1 Slide 29 HTML5 and the dawn of rich mobile web applications pt 1 Slide 30 HTML5 and the dawn of rich mobile web applications pt 1 Slide 31 HTML5 and the dawn of rich mobile web applications pt 1 Slide 32 HTML5 and the dawn of rich mobile web applications pt 1 Slide 33 HTML5 and the dawn of rich mobile web applications pt 1 Slide 34 HTML5 and the dawn of rich mobile web applications pt 1 Slide 35 HTML5 and the dawn of rich mobile web applications pt 1 Slide 36 HTML5 and the dawn of rich mobile web applications pt 1 Slide 37 HTML5 and the dawn of rich mobile web applications pt 1 Slide 38 HTML5 and the dawn of rich mobile web applications pt 1 Slide 39 HTML5 and the dawn of rich mobile web applications pt 1 Slide 40 HTML5 and the dawn of rich mobile web applications pt 1 Slide 41 HTML5 and the dawn of rich mobile web applications pt 1 Slide 42 HTML5 and the dawn of rich mobile web applications pt 1 Slide 43 HTML5 and the dawn of rich mobile web applications pt 1 Slide 44 HTML5 and the dawn of rich mobile web applications pt 1 Slide 45 HTML5 and the dawn of rich mobile web applications pt 1 Slide 46 HTML5 and the dawn of rich mobile web applications pt 1 Slide 47 HTML5 and the dawn of rich mobile web applications pt 1 Slide 48 HTML5 and the dawn of rich mobile web applications pt 1 Slide 49 HTML5 and the dawn of rich mobile web applications pt 1 Slide 50 HTML5 and the dawn of rich mobile web applications pt 1 Slide 51 HTML5 and the dawn of rich mobile web applications pt 1 Slide 52 HTML5 and the dawn of rich mobile web applications pt 1 Slide 53 HTML5 and the dawn of rich mobile web applications pt 1 Slide 54 HTML5 and the dawn of rich mobile web applications pt 1 Slide 55 HTML5 and the dawn of rich mobile web applications pt 1 Slide 56 HTML5 and the dawn of rich mobile web applications pt 1 Slide 57 HTML5 and the dawn of rich mobile web applications pt 1 Slide 58 HTML5 and the dawn of rich mobile web applications pt 1 Slide 59 HTML5 and the dawn of rich mobile web applications pt 1 Slide 60 HTML5 and the dawn of rich mobile web applications pt 1 Slide 61 HTML5 and the dawn of rich mobile web applications pt 1 Slide 62 HTML5 and the dawn of rich mobile web applications pt 1 Slide 63 HTML5 and the dawn of rich mobile web applications pt 1 Slide 64 HTML5 and the dawn of rich mobile web applications pt 1 Slide 65 HTML5 and the dawn of rich mobile web applications pt 1 Slide 66 HTML5 and the dawn of rich mobile web applications pt 1 Slide 67 HTML5 and the dawn of rich mobile web applications pt 1 Slide 68 HTML5 and the dawn of rich mobile web applications pt 1 Slide 69 HTML5 and the dawn of rich mobile web applications pt 1 Slide 70 HTML5 and the dawn of rich mobile web applications pt 1 Slide 71 HTML5 and the dawn of rich mobile web applications pt 1 Slide 72 HTML5 and the dawn of rich mobile web applications pt 1 Slide 73 HTML5 and the dawn of rich mobile web applications pt 1 Slide 74 HTML5 and the dawn of rich mobile web applications pt 1 Slide 75 HTML5 and the dawn of rich mobile web applications pt 1 Slide 76 HTML5 and the dawn of rich mobile web applications pt 1 Slide 77 HTML5 and the dawn of rich mobile web applications pt 1 Slide 78 HTML5 and the dawn of rich mobile web applications pt 1 Slide 79 HTML5 and the dawn of rich mobile web applications pt 1 Slide 80 HTML5 and the dawn of rich mobile web applications pt 1 Slide 81 HTML5 and the dawn of rich mobile web applications pt 1 Slide 82 HTML5 and the dawn of rich mobile web applications pt 1 Slide 83 HTML5 and the dawn of rich mobile web applications pt 1 Slide 84 HTML5 and the dawn of rich mobile web applications pt 1 Slide 85 HTML5 and the dawn of rich mobile web applications pt 1 Slide 86 HTML5 and the dawn of rich mobile web applications pt 1 Slide 87 HTML5 and the dawn of rich mobile web applications pt 1 Slide 88 HTML5 and the dawn of rich mobile web applications pt 1 Slide 89 HTML5 and the dawn of rich mobile web applications pt 1 Slide 90 HTML5 and the dawn of rich mobile web applications pt 1 Slide 91
Upcoming SlideShare
Building Rich Mobile Apps with HTML5, CSS3 and JavaScript
Next
Download to read offline and view in fullscreen.

34 Likes

Share

Download to read offline

HTML5 and the dawn of rich mobile web applications pt 1

Download to read offline

Related Audiobooks

Free with a 30 day trial from Scribd

See all

HTML5 and the dawn of rich mobile web applications pt 1

  1. 1. HTML5 and the dawn of rich mobile web applications @ jamespearce
  2. 2. Part I Mobile & HTML5
  3. 3. Sir Isaac Newton
  4. 4. Three Laws of Motion (the universe works as we might expect it to)
  5. 5. Albert Michelson Edward Morley
  6. 6. Light Travels at a Constant Speed (the universe doesn’t work as we thought it would)
  7. 7. Relativistic Mechanics Exploration Classical Mechanics Familiarity Quantum Mechanics Exploration
  8. 8. The Web Today is like Physics in 1900
  9. 9. Mobile is our Michelson-Morley Experiment
  10. 10. Mobile Context? One Web? Responsive Design? Apps or Sites? (an inability to answer these questions does not constitute an excuse not to innovate)
  11. 11. Responsive Web Design
  12. 12. @media screen and (max-width: 480px) { #logo { background-image: url(mobile.png); } }
  13. 13. Mobile devices are di erent Telephone Messaging Camera Compass Mobile users are di erent
  14. 14. Content-Type: application/msword
  15. 15. The Mobile Web is not a 320px Web
  16. 16. Single device Multi device Sedentary user Mobile user * Declarative Imperative Thin client Thick client Documents Applications * or supine, or sedentary, or passive, or...
  17. 17. A badge for all these ways the web is changing
  18. 18. HTML5 is a new version of HTML4, XHTML1, and DOM Level 2 HTML addressing many of the issues of those specifications while at the same time enhancing (X)HTML to more adequately address Web applications. - WHATWG Wiki
  19. 19. What is an app?
  20. 20. 2008 We must have an iPhone App!
  21. 21. 2009 We must have an Android App!
  22. 22. 2010 We must have an iPad App!
  23. 23. 2011 We must have a...
  24. 24. omfg
  25. 25. What is an app?
  26. 26. Consumption vs Creation Linkability User Experience Architecture
  27. 27. Web Compromise sites Web apps Native apps Nativeness
  28. 28. WebFont Video Audio Graphics Device Access Camera CSS Styling & Layout Network Location HTTP JavaScript Contacts AJAX SMS Semantic HTML Events Orientation Sockets File Systems Workers & Cross-App Gyro Databases Parallel SSL Messaging App Caches Processing (all the elements of a modern application platform)
  29. 29. The web is now as much a stack as it is a medium
  30. 30. MS RIM Symbian Apple Android Top European Smartphone Platforms July 2011, comScore MobiLens
  31. 31. .NET J2ME C++ Obj-C Java Native programming languages you’ll need July 2011
  32. 32. IE WebKit WebKit WebKit WebKit Browser platforms to target July 2011
  33. 33. There is no WebKit on Mobile - @ppk
  34. 34. But at least we are using one language, one markup, one style system
  35. 35. IE 10 PR Chrome 10 Safari 5 Firefox 4 iOS4.31 Playbook Honeycomb @font-face Canvas HTML5 Audio & Video rgba(), hsla() border-image: border-radius: box-shadow: text-shadow: opacity: Multiple backgrounds Flexible Box Model CSS Animations CSS Columns CSS Gradients CSS Reflections CSS 2D Transforms CSS 3D Transforms CSS Transitions Geolocation API local/sessionStorage SVG/SVG Clipping SMIL Inline SVG Drag and Drop hashchange X-window Messaging History Management applicationCache Web Sockets Web Workers Web SQL Database WebGL IndexedDB
  36. 36. Stay on top of diversity Can I Use? http://caniuse.com Modernizr http://modernizr.com DeviceAtlas http://deviceatlas.com
  37. 37. 100% Support Browsers Capabilities & specifications
  38. 38. 100% Support Browsers Polyfills Frameworks Capabilities & specifications
  39. 39. <!DOCTYPE html> <html> <head> <title>jQuery Mobile</title> <script src="jq.js"></script><script src="jqm.js"></script> <link rel="stylesheet" href="jqm.css" /> </head> <body> <div data-role="page" id="home"> <div data-role="header"> <h1>Hello World</h1> </div> <div data-role="content"> <ul data-role="listview" data-inset="true"> <li data-role="list-divider">Continents</li> <li><a href="na.html">North America</a></li> <li><a href="sa.html">South America</a></li> <li><a href="eu.html">Europe</a></li> </ul> </div> </div> </body> </html>
  40. 40. <!DOCTYPE html> <html> <head> <title>Sencha Touch</title> <script src="st.js"></script> <link rel="stylesheet" href="st.css" /> <script type="text/javascript" charset="utf-8"> new Ext.Application({ launch: function() { var continents = new Ext.data.Store({ model: Ext.regModel('', {fields: ['name', 'link']}), data: [ {name: 'North America', link:'na'}, {name: 'South America', link:'sa'}, {name: 'Europe', link:'eu'} ] }); new Ext.Panel({ fullscreen: true, dockedItems: [{ xtype: 'toolbar', title: 'Hello World', }], items: [{ xtype: 'list', store: continents, itemTpl: '{name}' }] }); } }); </script> </head><body></body> </html>
  41. 41. Evolving the web for mobile Views HTML, CSS... Controllers Models
  42. 42. Evolving the web for mobile Desktop Switcher HTML, CSS... Mobile Controllers Models
  43. 43. Evolving the web for mobile Desktop Switchers Mobile REST JSO on Controllers N ce Models
  44. 44. The classic web stack req/res User interface Rendering Business logic Storage
  45. 45. A new web stack User interface sync Security Business logic Storage Storage
  46. 46. Write once, run anywhere?
  47. 47. The Mobile Web is not a 320px Web
  48. 48. Views Views Controllers Models Stores Proxies n jso
  49. 49. http://sencha.com/x/cv
  50. 50. Thick client, thin server The shortfall in the cloud
  51. 51. Location Services Adaptation Analytics Web Fonts Data Sync Video Serving Ad Serving $ Image Serving Commerce Network APIs
  52. 52. http://mysite.com/myimage.png http://src.sencha.io/http://mysite.com/myimage.png
  53. 53. Myths & rumors
  54. 54. HTML5 apps can’t run o ine (hybrid, appcache, and localStorage...)
  55. 55. Going o ine http://github.com/jamesgpearce/confess
  56. 56. HTML5 apps can’t match native performance (true, sometimes)
  57. 57. HTML5 apps can’t be monetized (is this a technology problem?)
  58. 58. HTML5 apps are more e cient to develop (yes, in theory, but diversity remains)
  59. 59. 24 dev-months for iOS http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
  60. 60. 12 further dev-months for Android & BlackBerry http://blog.cohen-rose.org/2011/10/over-air-2011-ft-web-app-weve-got.html
  61. 61. ...but more engagement than the native app
  62. 62. Web Compromise sites Web apps Hybrid apps Native apps Nativeness
  63. 63. Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  64. 64. WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  65. 65. Native Wrapper WebView Camera WebFont Video Audio Graphics HTTP Location CSS Styling & Layout AJAX Contacts Events SMS JavaScript Sockets Orientation Semantic HTML SSL Gyro File Systems Workers & Cross-App Databases Parallel Messaging App Caches Processing
  66. 66. Native app stores have a dirty secret
  67. 67. built with Apps vs web technology
  68. 68. James Pearce @ jamespearce
  • cbolee

    May. 11, 2018
  • JiminLee3

    Jan. 23, 2014
  • dhondi

    Nov. 14, 2013
  • kurotanshi

    Nov. 4, 2012
  • ashuorg

    Oct. 18, 2012
  • CandaceMarks

    Aug. 28, 2012
  • sajithmx

    Mar. 20, 2012
  • morimuc

    Jan. 20, 2012
  • okazmina

    Dec. 20, 2011
  • benzy

    Dec. 12, 2011
  • locksmithdon

    Nov. 16, 2011
  • MasakazuShinya

    Nov. 2, 2011
  • pulkitarora

    Nov. 1, 2011
  • kyoheimorimoto

    Nov. 1, 2011
  • cyrylski

    Oct. 27, 2011
  • dmolsenwvu

    Oct. 21, 2011
  • russenreaktor

    Oct. 17, 2011
  • aygul

    Oct. 17, 2011
  • retolist

    Oct. 17, 2011
  • usr01

    Oct. 17, 2011

Views

Total views

22,924

On Slideshare

0

From embeds

0

Number of embeds

348

Actions

Downloads

228

Shares

0

Comments

0

Likes

34

×