Webtuesday: Mobile Web Applications Framework Overview

Mobile Web Application Frameworks Overview

Adrian Kosmaczewski

http://www.ﬂickr.com/photos/gi/164281467/

http://www.ﬂickr.com/photos/jm3/379494322/

http://www.ﬂickr.com/photos/21025851@N00/2168398185/

http://www.ﬂickr.com/photos/emiliagarassino/2146648332/

akosma software

http://www.ﬂickr.com/photos/oskay/365607662/

http://www.ﬂickr.com/photos/oskay/365607591/

http://www.ﬂickr.com/photos/blakespot/2379207825/

Objective-C

http://www.ﬂickr.com/photos/thenovys/3908472000/

Alternatives

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

JavaScript

Mobile Web

Strategy

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

Many Options

http://www.ﬂickr.com/photos/notionscapital/2368528806/

• iUI • Cappuccino • jQTouch • LiquidGear • WebApp.net • PhoneGap • XUI • Saﬁre • Rhodes • jPint • SproutCore • Magic Framework

http://www.ﬂickr.com/photos/zeke_/2158746075/

Comparison

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

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

Overview

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

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

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

<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 & 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>

Result

• 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)

jQTouch http://jqtouch.com/

More advanced than iUI

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

Great Performance

<html> <head> <meta charset="UTF-8" /> <title>jQTouch β</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>

Result

• Much faster • Ofﬂine + location capabilities • Smoother transitions and animations • slide, slideup, dissolve, fade, ﬂip, pop, swap, and cube • can add more animations via code • Slightly more complex • OK for JavaScript-literate developers

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

• Lightweight • JavaScript • Component library • Work in progress

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

Result

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

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

iWebkit http://iwebkit.net/

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

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

Result

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

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

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

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

Enterprisey Mobile Apps

Not a framework

a platform

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

<?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>

Result

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

Other Tools

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

Free iPhone Web Simulator for Designers

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

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

WordPress plugin

• Easy to install and conﬁgure • Fast & Mature • Push notiﬁcations support • Via Prowl http://prowl.weks.net/

Upcoming Book

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

Also remember:

Not all WebKits are made equal

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

My Advice:

Mobile Web Strategy

Design & Development

not an option anymore

a must-have

Thanks!

Questions?

http://www.ihwan.com	733
http://www.slideshare.net	387
http://akosma.com	60
http://ihwan.tistory.com	43
http://www.techgig.com	34
http://wiki.nhncorp.com	11
http://goldwing.shinhan.com	8
http://ccs.sunplus.vn	6
http://ihwan.com	5
http://moncam.tumblr.com	3
http://localhost	2
http://translate.googleusercontent.com	2
http://www.nofoon.com	2
http://justinchen.posterous.com	2
http://blog.justinchen.net	2
http://ccs.nexcel.vn	1
http://www.ihwan.com.	1
https://akosma.com	1
http://blog.naver.com	1
http://ihwan.betastudios.net	1
http://wikin.nhncorp.com	1
http://static.slideshare.net	1
http://192.168.12.60	1
http://webcache.googleusercontent.com	1
http://portal.shinhan.com	1

Webtuesday: Mobile Web Applications Framework Overview

by Adrian Kosmaczewski on Dec 09, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

25 Embeds 1,310

Statistics

Webtuesday: Mobile Web Applications Framework Overview — Presentation Transcript