Mobile Web Rising

Presentation shown in the Mobile Developer Summit 2011 in Bangalore, India, in November 2011.

Transcript

1. View Slide

2. Mobile Web Rising
   Adrian Kosmaczewski - akosma software
   

   View Slide

3. View Slide

4. http://www.flickr.com/photos/oskay/365607662/
   

   View Slide

5. http://www.flickr.com/photos/oskay/365607591/
   

   View Slide

6. http://www.flickr.com/photos/blakespot/2379207825/
   

   View Slide

7. Objective-C
   

   View Slide

8. Cocoa
   

   View Slide

9. http://www.flickr.com/photos/thenovys/3908472000/
   

   View Slide

10. Alternatives
    

    View Slide

11. http://akosma.com/2009/10/29/iphone-apps-without-objective-c/
    

    View Slide

12. http://t2impact.blogspot.com/2010/11/reflections-from-pcw17-november-2010.html
    

    View Slide

13. Presentation in 2009
    http://www.slideshare.net/akosma/webtuesday-mobile-web-applications-framework-overview
    

    View Slide

14. http://akosma.com/2009/12/09/webtuesday-mobile-app-frameworks/
    

    View Slide

15. Market
    

    View Slide

16. Web
    

    View Slide

17. Web or native apps?
    

    View Slide

18. update frequency
    usage frequency
    UI complexity
    native
    apps
    web
    apps
    games
    calculator
    business apps
    reports
    compatibility with other
    mobile platforms
    

    View Slide

19. Web Application Native Application
    Pros
    Cons
    Simpler deployment and
    updates;
    known technologies,
    cheaper to maintain;
    access to GPS information;
    basic offline support;
    cross-platform
    Faster execution;
    access to address book,
    accelerometer, audio and
    camera; App Store;
    3D games and animations;
    push notifications;
    Bonjour networking support.
    Slower to execute;
    more difficult to debug on the
    client side; limited access to
    hardware; no official app
    store; harder to monetize
    App Store review process;
    longer update times;
    relative complexity and higher
    cost of dev process
    

    View Slide

20. http://twitter.com/akosma/status/26456836540
    

    View Slide

21. View Slide

22. Market
    

    View Slide

23. as of February 2011
    

    View Slide

24. 4.7%
    http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
    

    View Slide

25. of all web browsing
    

    View Slide

26. worldwide is done
    

    View Slide

27. using Mobile browsers
    

    View Slide

28. 4.7%
    http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
    

    View Slide

29. March 2010...
    http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
    

    View Slide

30. 1.96%
    

    View Slide

31. 4.7%
    http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
    

    View Slide

32. http://en.wikipedia.org/wiki/File:Usage_share_of_web_browsers_(Source_Stat_Counter).svg
    

    View Slide

33. http://thenextweb.com/mobile/2011/01/06/the-great-rise-of-the-mobile-web/
    

    View Slide

34. http://thenextweb.com/mobile/2011/01/06/the-great-rise-of-the-mobile-web/
    

    View Slide

35. Browsers
    Browser Share Notes
    Safari 24% iPad not included
    Opera 21% Mini & Mobile
    Nokia 16%
    Android 15% Includes tablets
    BlackBerry 14% Marginal WebKit
    http://www.quirksmode.org/blog/archives/2011/03/mobile_browser_6.html
    

    View Slide

36. Engines
    Engine Share Notes
    WebKit 57%
    Safari, Nokia, Android,
    Samsung,
    BlackBerry, MeeGo, Symbian...
    Presto 21%
    Opera Mini and
    Opera Mobile
    Gecko, Trident,
    Mango, UC, Obigo...
    22%
    http://www.quirksmode.org/mobile/mobilemarket.html
    

    View Slide

37. WebKit
    

    View Slide

38. A family, actually
    

    View Slide

39. http://www.quirksmode.org/webkit.html
    

    View Slide

40. View Slide

41. Technologies
    

    View Slide

42. http://www.w3.org/2011/02/mobile-web-app-state.html
    SVG
    CSS3
    WOFF
    Canvas
    CSS 3D
    CSS Animations
    
    
    
    Touch events in DOM
    HTML Speech
    Web Storage
    Contacts API
    Calendar API
    File Writer API
    Geolocation API
    XMLHttpRequest
    Websockets
    Messaging API
    Application Cache
    HTML5
    Web Workers
    

    View Slide

43. http://newvoicesforresearch.blogspot.com/2010_04_01_archive.html
    

    View Slide

44. Cross-Browser
    

    View Slide

45. Complexity
    

    View Slide

46. View Slide

47. Frameworks
    

    View Slide

48. Fashion
    

    View Slide

49. Pioneer
    

    View Slide

50. View Slide

51. 
    
    iUI Demo
    
    
    
    <br/>@import "iui.css";<br/>
    src="iui.js">
    
    

    View Slide

52. 
    
    
    
    Search
    
    
    Artists
    Settings
    Stats
    target="_self">About
    Nothing
    
    
    B
    The Beatles
    Belle & Sebastian
    C
    Crowded House
    J
    Jenny Lewis
    John Mayer
    Z
    Zero 7
    
    

    View Slide

53. View Slide

54. Establishment
    

    View Slide

55. http://www.jqtouch.com/
    

    View Slide

56. http://jquerymobile.com/
    

    View Slide

57. http://jqueryui.com/
    

    View Slide

58. http://www.sencha.com/products/touch/
    

    View Slide

59. http://www.sproutcore.com/
    

    View Slide

60. http://cappuccino.org/
    

    View Slide

61. http://dojotoolkit.org/features/mobile
    

    View Slide

62. Lightweight
    

    View Slide

63. http://zeptojs.com/
    

    View Slide

64. http://xuijs.com/
    

    View Slide

65. http://joapp.com/
    

    View Slide

66. http://webapp-net.com/
    

    View Slide

67. http://paularmstrongdesigns.com/projects/basejs/
    

    View Slide

68. http://www.limejs.com/
    

    View Slide

69. http://www.mobl-lang.org/
    

    View Slide

70. http://guryjs.org/
    

    View Slide

71. ... and more
    

    View Slide

72. http://html5boilerplate.com/
    

    View Slide

73. http://www.notjustagrid.com/default.asp
    

    View Slide

74. http://chocolatechipmobile.wordpress.com/
    

    View Slide

75. http://snippetspace.com/
    

    View Slide

76. http://unify.github.com/unify/
    

    View Slide

77. http://www.zkoss.org/
    

    View Slide

78. http://dhtmlx.com/touch/
    

    View Slide

79. http://www.ipfaces.org/
    

    View Slide

80. http://www.winktoolkit.org/
    

    View Slide

81. http://code.rememberthisguy.com/safire/
    

    View Slide

82. http://www.journyx.com/jpint
    

    View Slide

83. Platforms
    

    View Slide

84. http://mobile.yahoo.com/developers
    

    View Slide

85. http://developer.yahoo.com/mobile/blueprintquickstart/BP_QS_Overview.html
    

    View Slide

86. 
    
    
    
    
    
    Blueprint 1.1 static example pages
    
    
    
    
    
    List content
    
    
    
    
    Restaurant
    Listings
    Organized by cuisine,
    with brief reviews, ratings, and thumbnails, with custom
    page header and footer
    
    page="restaurants.bp"/>
    
    

    View Slide

87. View Slide

88. Go beyond the browser...
    

    View Slide

89. ... and sell your HTML in an
    app marketplace
    

    View Slide

90. ("App Store" is a trademark of Apple Inc.)
    

    View Slide

91. http://www.appcelerator.com/
    

    View Slide

92. http://www.phonegap.com/
    

    View Slide

93. http://www.nimblekit.com/
    

    View Slide

94. http://rhomobile.com/
    

    View Slide

95. View Slide

96. Or in a web app
    market?
    

    View Slide

97. OpenAppMkt.com
    

    View Slide

98. View Slide

99. View Slide

100. View Slide

101. View Slide

102. View Slide

103. Example
     

     View Slide

104. Dezeen Watchstore
     App
     

     View Slide

105. View Slide

106. http://dezeenwatchstore.com/clock/
     

     View Slide

107. View Slide

108. View Slide

109. View Slide

110. 
     
     
     
     
     
     
     
     Dezeen Watch Store
     

     View Slide

111. CACHE MANIFEST
     CACHE:
     clock.js
     index.html
     raphael-min.js
     jquery.js
     iphone_320.css
     iphone_480.css
     ipadlandscape.css
     ipadportrait.css
     dws.png
     dws_lscape_iphone.png
     dws_portrait_ipad.png
     dws_landscape_ipad.png
     startup.png
     bg.png
     iphone_lscape_bg.png
     ipad_pt_bg.png
     ipad_ls_bg.png
     install.png
     ipad_prompt.png
     #11210
     

     View Slide

112. View Slide

113. Remember
     

     View Slide

114. Web Development
     ==
     Software Development
     

     View Slide

115. http://kosmaczewski.net/2007/08/02/web-development-equal-
     software-development/
     

     View Slide

116. • Have a specification;
     • Have a schedule / Scrum burn chart;
     • Have an architecture;
     • Make a prototype;
     • Have (human) testers;
     

     View Slide

117. • Automate your tests and builds;
     • Use a bug database;
     • Use version control;
     • Be agile;
     • Know your audience;
     • Scope your target.
     

     View Slide

118. The Joel Test
     http://en.wikipedia.org/wiki/File:Joel_spolsky_on_20_sept_2007.jpg
     http://www.joelonsoftware.com/articles/
     fog0000000043.html
     

     View Slide

119. Test in multiple devices
     

     View Slide

120. View Slide

121. Links
     

     View Slide

122. • Standards for Web Applications on Mobile
     http://www.w3.org/2011/02/mobile-web-app-state.html
     • QuirksMode
     http://www.quirksmode.org/mobile/
     • State of the Mobile Web
     http://www.opera.com/smw/
     

     View Slide

123. View Slide

124. Thanks!
     

     View Slide

125. Questions?
     

     View Slide