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.

Adrian Kosmaczewski

December 09, 2009

More Decks by Adrian Kosmaczewski

Other Decks in Technology


  1. CSS

  2. ?

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

    • SproutCore • Cappuccino • LiquidGear • PhoneGap • Safire • jPint • Magic Framework
  4. 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.
  5. application update frequency of use native apps web apps stocks

    calculator business forms reports compatibility with other mobile platforms
  6. • By Joe Hewitt • No JavaScript • Extends standard

    HTML • Overrides links and forms with AJAX • Smooth transitions
  7. <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>
  8. <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>
  9. • 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)
  10. • Based on jQuery! • Easy setup • Native WebKit

    animations • Callback events • Flexible themes • Swipe detection • Extensible (via jQuery!)
  11. <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>
  12. <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
  13. • 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
  14. <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>
  15. • Great documentation • Form + AJAX support • Simple

    to use • Debugging + Multimedia support • Animated PNG support • Fullscreen support
  16. • Targets non-developers • Simple and minimalist • Extensible, fast,

    customizable • Plugins for Grails, Drupal, WordPress...
  17. <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>
  18. <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>
  19. • Advanced JavaScript frameworks inspired by Cocoa for Mac OS

    X • Both can be used to create iPhone applications • Early stages, watch out for more
  20. <?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>
  21. • Multimedia + real time video encoding • Cross-platform (not

    only Webkit) • Testing support • Location & maps support
  22. • Ligther than iPhone SDK + Simulator • View source

    • Landscape + portrait • Simulates other user-agents • Zoom in + zoom out
  23. • Easy to install and configure • Fast & Mature

    • Push notifications support • Via Prowl http://prowl.weks.net/