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
Tweet

More Decks by Adrian Kosmaczewski

Other Decks in Technology

Transcript

  1. Mobile Web Application
    Frameworks Overview

    View full-size slide

  2. Adrian Kosmaczewski

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. akosma software

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Alternatives

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. Many Options

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide



  23. iUI Demo



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

    View full-size slide





  24. 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 full-size slide

  25. • 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 full-size slide

  26. jQTouch
    http://jqtouch.com/

    View full-size slide

  27. More advanced than iUI

    View full-size slide

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

    View full-size slide

  29. Great Performance

    View full-size slide




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

    View full-size slide

  31. 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 full-size slide

  32. • 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 full-size slide

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

    View full-size slide

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

    View full-size slide



  35. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  38. iWebkit
    http://iwebkit.net/

    View full-size slide

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

    View full-size slide


  40. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  43. • 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 full-size slide

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

    View full-size slide

  45. Enterprisey Mobile Apps

    View full-size slide

  46. Not a framework

    View full-size slide

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

    View full-size slide







  48. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  51. Free iPhone Web
    Simulator for Designers

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. WordPress plugin

    View full-size slide

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

    View full-size slide

  56. Upcoming Book

    View full-size slide

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

    View full-size slide

  58. Also remember:

    View full-size slide

  59. Not all WebKits
    are made equal

    View full-size slide

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

    View full-size slide

  61. Mobile Web Strategy

    View full-size slide

  62. Design &
    Development

    View full-size slide

  63. not an option anymore

    View full-size slide