Mobile Web Application Frameworks Overview

Presentation given during the Webtuesday event.

Transcript

1. Mobile Web Application
   Frameworks Overview
   

   View Slide

2. View Slide

3. Adrian Kosmaczewski
   

   View Slide

4. http://www.flickr.com/photos/gi/164281467/
   

   View Slide

5. http://www.flickr.com/photos/jm3/379494322/
   

   View Slide

6. http://www.flickr.com/photos/21025851@N00/2168398185/
   

   View Slide

7. http://www.flickr.com/photos/emiliagarassino/2146648332/
   

   View Slide

8. akosma software
   

   View Slide

9. View Slide

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

    View Slide

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

    View Slide

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

    View Slide

13. View Slide

14. Objective-C
    

    View Slide

15. Cocoa
    

    View Slide

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

    View Slide

17. Alternatives
    

    View Slide

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

    View Slide

19. Web?
    

    View Slide

20. HTML
    

    View Slide

21. JavaScript
    

    View Slide

22. CSS
    

    View Slide

23. View Slide

24. Mobile Web
    

    View Slide

25. Strategy
    

    View Slide

26. http://www.readwriteweb.com/archives/admob_reports_on_mobile_webs_explosive_growth.php
    

    View Slide

27. View Slide

28. ?
    

    View Slide

29. Many Options
    

    View Slide

30. http://www.flickr.com/photos/notionscapital/2368528806/
    

    View Slide

31. • iUI
    • jQTouch
    • WebApp.net
    • XUI
    • Rhodes
    • SproutCore
    • Cappuccino
    • LiquidGear
    • PhoneGap
    • Safire
    • jPint
    • Magic Framework
    

    View Slide

32. http://www.flickr.com/photos/zeke_/2158746075/
    

    View Slide

33. View Slide

34. Comparison
    

    View Slide

35. Web
    Application
    Native SDK
    Application
    Pros
    Simpler deployment and
    updates;
    known technologies,
    cheaper to maintain;
    access to GPS
    information;
    basic offline support.
    Faster execution;
    access to address book,
    accelerometer, audio and
    camera;
    3D games and animations;
    push notifications;
    Bonjour networking
    support.
    Cons Slower to execute;
    no access to hardware.
    App Store review process;
    longer update times.
    

    View Slide

36. application update
    frequency of use
    native
    apps
    web
    apps
    stocks
    calculator
    business forms
    reports
    compatibility with other
    mobile platforms
    

    View Slide

37. View Slide

38. Overview
    

    View Slide

39. View Slide

40. iUI
    http://code.google.com/p/iui/
    http://video.yahoo.com/watch/853528/3491272
    

    View Slide

41. • By Joe Hewitt
    • No JavaScript
    • Extends standard HTML
    • Overrides links and forms with AJAX
    • Smooth transitions
    

    View Slide

42. Setup
    

    View Slide

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

    View Slide

44. Usage
    

    View Slide

45. 
    
    
    
    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

46. Result
    

    View Slide

47. View Slide

48. • Great for browsing hierarchical information
    • Limited functionality, good for small apps
    • Acceptable performance on a 3G phone
    • “De facto standard” iPhone web library
    • Rails plugin:
    http://github.com/noelrappin/rails-iui
    • No skin / theme support (on the works)
    

    View Slide

49. View Slide

50. jQTouch
    http://jqtouch.com/
    

    View Slide

51. More advanced than iUI
    

    View Slide

52. • Based on jQuery!
    • Easy setup
    • Native WebKit animations
    • Callback events
    • Flexible themes
    • Swipe detection
    • Extensible (via jQuery!)
    

    View Slide

53. Great Performance
    

    View Slide

54. Setup
    

    View Slide

55. 
    
    
    jQTouch β
    <br/>@import "jqtouch.min.css";<br/>
    <br/>@import "themes/apple/theme.min.css";<br/>
    <br/>
    <br/>
    

    View Slide

56. Usage
    

    View Slide

57. charset="utf-8" />
    <br/>$.jQTouch({<br/>icon: 'icon.png',<br/>startupScreen: 'img/startup.png'<br/>});<br/>$(function(){<br/>function addClock(label, tz){<br/>var html = '';<br/>html += '<div>'<br/>html += '<div class="clock">'<br/>html += '<div class="hour"></div>'<br/>html += '<div class="min"></div>'<br/>html += '<div class="sec"></div>'<br/>html += '</div>'<br/>html += '<div class="city">GMT</div>'<br/>html += '<div class="time">Time</div>'<br/>html += '</div>'<br/>var insert = $(html);<br/>$('#clocks').append(<br/>insert.data('tz_offset', tz).find('.city').html(label).end()<br/>);<br/>}<br/>Initialization<br/>

    View Slide

58. Result
    

    View Slide

59. View Slide

60. • Much faster
    • Offline + location capabilities
    • Smoother transitions and animations
    • slide, slideup, dissolve, fade, flip, pop,
    swap, and cube
    • can add more animations via code
    • Slightly more complex
    • OK for JavaScript-literate developers
    

    View Slide

61. View Slide

62. WebApp.net
    http://webapp-net.com/
    

    View Slide

63. • Lightweight
    • JavaScript
    • Component library
    • Work in progress
    

    View Slide

64. Setup
    

    View Slide

65. 
    ...
    
    <br/>
    
    

    View Slide

66. Usage
    

    View Slide

67. 
    
    Back
    WebApp Demo
    
    
    
    
    Layer 1
    This is the first layer. Tap here to
    slide to the next layer. A back button will then appear in the header.
    
    
    
    
    Layer 2
    This is the second layer. Tap here to
    go back to the previous layer or press the top back button.
    
    
    
    
    

    View Slide

68. Result
    

    View Slide

69. View Slide

70. Used by the Transports
    Publics de Geneve
    http://iphone.tpg.ch
    

    View Slide

71. View Slide

72. • Great documentation
    • Form + AJAX support
    • Simple to use
    • Debugging + Multimedia support
    • Animated PNG support
    • Fullscreen support
    

    View Slide

73. View Slide

74. iWebkit
    http://iwebkit.net/
    

    View Slide

75. • Targets non-developers
    • Simple and minimalist
    • Extensible, fast, customizable
    • Plugins for Grails, Drupal, WordPress...
    

    View Slide

76. Setup
    

    View Slide

77. 
    
    
    
    
    
    
    
    

    View Slide

78. Usage
    

    View Slide

79. 
    iWebKit
    
    PC website
    
    
    
    
    Welcome
    span>Welcome to the iWebKit 4 Demo site!
    
    
    class="name">What’s New?
    
    Features
    
    
    Here are some examples of things you can achieve building
    with iWebKit 4:
    
    
    class="name">Classic ListsWith Images
    span>
    

    View Slide

80. Result
    

    View Slide

81. View Slide

82. • Good documentation
    • Extensive framework
    • Mature (latest version 4.6.2!)
    

    View Slide

83. View Slide

84. SproutCore
    Cappuccino
    http://www.sproutcore.com/
    http://cappuccino.org/
    

    View Slide

85. • Advanced JavaScript frameworks inspired by
    Cocoa for Mac OS X
    • Both can be used to create iPhone
    applications
    • Early stages, watch out for more
    

    View Slide

86. View Slide

87. View Slide

88. Yahoo! Blueprint
    http://mobile.yahoo.com/devcenter
    

    View Slide

89. Enterprisey Mobile Apps
    

    View Slide

90. Not a framework
    

    View Slide

91. a platform
    

    View Slide

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

    View Slide

93. Usage
    

    View Slide

94. 
    
    
    
    
    
    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

95. Result
    

    View Slide

96. View Slide

97. • Multimedia + real time video encoding
    • Cross-platform (not only Webkit)
    • Testing support
    • Location & maps support
    

    View Slide

98. View Slide

99. Other Tools
    

    View Slide

100. iPhoney
     http://www.marketcircle.com/iphoney/
     

     View Slide

101. Free iPhone Web
     Simulator for Designers
     

     View Slide

102. View Slide

103. • Ligther than iPhone SDK + Simulator
     • View source
     • Landscape + portrait
     • Simulates other user-agents
     • Zoom in + zoom out
     

     View Slide

104. View Slide

105. WPTouch
     http://www.bravenewcode.com/wptouch/
     

     View Slide

106. WordPress plugin
     

     View Slide

107. View Slide

108. • Easy to install and configure
     • Fast & Mature
     • Push notifications support
     • Via Prowl
     http://prowl.weks.net/
     

     View Slide

109. View Slide

110. Upcoming Book
     

     View Slide

111. http://building-iphone-apps.labs.oreilly.com/
     

     View Slide

112. View Slide

113. Also remember:
     

     View Slide

114. Not all WebKits
     are made equal
     

     View Slide

115. WebKit Compatibility
     Table
     http://www.quirksmode.org/webkit.html
     (thanks to Stefan Tramm from Netcetera for the link!)
     

     View Slide

116. View Slide

117. My Advice:
     

     View Slide

118. Mobile Web Strategy
     

     View Slide

119. Design &
     Development
     

     View Slide

120. not an option anymore
     

     View Slide

121. a must-have
     

     View Slide

122. View Slide

123. Thanks!
     

     View Slide

124. Questions?
     

     View Slide