Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mobile Web Application Frameworks Overview

Mobile Web Application Frameworks Overview

Presentation given during the Webtuesday event.

88dd97cf2dc7f06cc51a01d450f0b1e5?s=128

Adrian Kosmaczewski
PRO

December 09, 2009
Tweet

Transcript

  1. Mobile Web Application Frameworks Overview

  2. None
  3. Adrian Kosmaczewski

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

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

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

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

  8. akosma software

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

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

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

  13. None
  14. Objective-C

  15. Cocoa

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

  17. Alternatives

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

  19. Web?

  20. HTML

  21. JavaScript

  22. CSS

  23. None
  24. Mobile Web

  25. Strategy

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

  27. None
  28. ?

  29. Many Options

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

  31. • iUI • jQTouch • WebApp.net • XUI • Rhodes

    • SproutCore • Cappuccino • LiquidGear • PhoneGap • Safire • jPint • Magic Framework
  32. http://www.flickr.com/photos/zeke_/2158746075/

  33. None
  34. Comparison

  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.
  36. application update frequency of use native apps web apps stocks

    calculator business forms reports compatibility with other mobile platforms
  37. None
  38. Overview

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

  41. • By Joe Hewitt • No JavaScript • Extends standard

    HTML • Overrides links and forms with AJAX • Smooth transitions
  42. Setup

  43. <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>iUI Demo</title> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;

    user- scalable=0;"/> <link rel="apple-touch-icon" href="iui-logo-touch- icon.png" /> <meta name="apple-touch-fullscreen" content="YES" /> <style type="text/css" media="screen"> @import "iui.css"; </style> <script type="application/x-javascript" src="iui.js"></script> </head>
  44. Usage

  45. <body> <div class="toolbar"> <h1 id="pageTitle"></h1> <a id="backButton" class="button" href="#"></a> <a

    class="button" href="#searchForm">Search</a> </div> <ul id="home" title="Music" selected="true"> <li><a href="#artists">Artists</a></li> <li><a href="#settings">Settings</a></li> <li><a href="stats.php">Stats</a></li> <li><a href="http://code.google.com/p/iui/" target="_self">About</a></li> <li>Nothing</li> </ul> <ul id="artists" title="Artists"> <li class="group">B</li> <li><a href="#TheBeatles">The Beatles</a></li> <li><a href="#BelleSebastian">Belle &amp; Sebastian</a></li> <li class="group">C</li> <li><a href="#CrowdedHouse">Crowded House</a></li> <li class="group">J</li> <li><a href="#JennyLewis">Jenny Lewis</a></li> <li><a href="#JohnMayer">John Mayer</a></li> <li class="group">Z</li> <li><a href="#Zero7">Zero 7</a></li> </ul>
  46. Result

  47. None
  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)
  49. None
  50. jQTouch http://jqtouch.com/

  51. More advanced than iUI

  52. • Based on jQuery! • Easy setup • Native WebKit

    animations • Callback events • Flexible themes • Swipe detection • Extensible (via jQuery!)
  53. Great Performance

  54. Setup

  55. <html> <head> <meta charset="UTF-8" /> <title>jQTouch &beta;</title> <style type="text/css" media="screen">

    @import "jqtouch.min.css"; </style> <style type="text/css" media="screen"> @import "themes/apple/theme.min.css"; </style> <script src="jquery.1.3.2.min.js" type="text/javascript"> </script> <script src="jqtouch.min.js" type="text/javascript"> </script>
  56. Usage

  57. <link rel="stylesheet" href="clock.css" type="text/css" media="screen" charset="utf-8" /> <script type="text/javascript" charset="utf-8">

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

  59. None
  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
  61. None
  62. WebApp.net http://webapp-net.com/

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

    progress
  64. Setup

  65. <head> ... <link rel="stylesheet" href="WebApp/Design/Render.css" /> <script type="text/javascript" scr="WebApp/Action/Logic.js"> </script>

    </head>
  66. Usage

  67. <div id="WebApp"> <div id="iHeader"> <a href="#" id="waBackButton">Back</a> <span id="waHeadTitle">WebApp Demo</span>

    </div> <div id="iGroup"> <div class="iLayer" id="waHome" title="Home"> <div class="iBlock"> <h1>Layer 1</h1> <p>This is the first layer. <a href="#_Next">Tap here</a> to slide to the next layer. A back button will then appear in the header.</p> </div> </div> <div class="iLayer" id="waNext" title="Next Layer"> <div class="iBlock"> <h1>Layer 2</h1> <p>This is the second layer. <a href="#_Home">Tap here</a> to go back to the previous layer or press the top back button.</p> </div> </div> </div> </div>
  68. Result

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

  71. None
  72. • Great documentation • Form + AJAX support • Simple

    to use • Debugging + Multimedia support • Animated PNG support • Fullscreen support
  73. None
  74. iWebkit http://iwebkit.net/

  75. • Targets non-developers • Simple and minimalist • Extensible, fast,

    customizable • Plugins for Grails, Drupal, WordPress...
  76. Setup

  77. <head> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="index,follow" name="robots" /> <meta

    content="text/html; charset=iso-8859-1" http-equiv="Content-Type" /> <link href="pics/homescreen.png" rel="apple-touch-icon" /> <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script src="javascript/functions.js" type="text/javascript"></script>
  78. Usage

  79. <div id="topbar"> <div id="title">iWebKit</div> <div id="leftbutton"> <a href="http://iwebkit.net">PC website</a> </div>

    </div> <div id="content"> <ul class="pageitem"> <li class="textbox"><span class="header">Welcome</ span><p>Welcome to the iWebKit 4 Demo site!</p> </li> <li class="menu"><a href="changelog.html"> <img alt="changelog" src="thumbs/start.png" /><span class="name">What’s New?</span><span class="arrow"></span></a></li> </ul> <span class="graytitle">Features</span> <ul class="pageitem"> <li class="textbox"> <p>Here are some examples of things you can achieve building with iWebKit 4:</p> </li> <li class="menu"><a href="list.html"> <img alt="list" src="thumbs/contacts.png" /><span class="name">Classic Lists</span><span class="comment">With Images</ span><span class="arrow"></span></a></li>
  80. Result

  81. None
  82. • Good documentation • Extensive framework • Mature (latest version

    4.6.2!)
  83. None
  84. SproutCore Cappuccino http://www.sproutcore.com/ http://cappuccino.org/

  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
  86. None
  87. None
  88. Yahoo! Blueprint http://mobile.yahoo.com/devcenter

  89. Enterprisey Mobile Apps

  90. Not a framework

  91. a platform

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

  93. Usage

  94. <?xml version="1.0" encoding="UTF-8"?> <page style="collection"> <content> <module> <header layout="simple"> <layout-items>

    <block>Blueprint 1.1 static example pages</block> </layout-items> </header> <module> <header layout="simple"> <layout-items> <block>List content</block> </layout-items> </header> <placard class="link" layout="card"> <layout-items> <block class="link"><strong>Restaurant Listings</strong></block> <block class="subtext">Organized by cuisine, with brief reviews, ratings, and thumbnails, with custom page header and footer</block> </layout-items> <load-page event="activate" page="restaurants.bp"/> </placard>
  95. Result

  96. None
  97. • Multimedia + real time video encoding • Cross-platform (not

    only Webkit) • Testing support • Location & maps support
  98. None
  99. Other Tools

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

  101. Free iPhone Web Simulator for Designers

  102. None
  103. • Ligther than iPhone SDK + Simulator • View source

    • Landscape + portrait • Simulates other user-agents • Zoom in + zoom out
  104. None
  105. WPTouch http://www.bravenewcode.com/wptouch/

  106. WordPress plugin

  107. None
  108. • Easy to install and configure • Fast & Mature

    • Push notifications support • Via Prowl http://prowl.weks.net/
  109. None
  110. Upcoming Book

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

  112. None
  113. Also remember:

  114. Not all WebKits are made equal

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

    for the link!)
  116. None
  117. My Advice:

  118. Mobile Web Strategy

  119. Design & Development

  120. not an option anymore

  121. a must-have

  122. None
  123. Thanks!

  124. Questions?