Slide 1

Slide 1 text

Mobile Web Application Frameworks Overview

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

Adrian Kosmaczewski

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

akosma software

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

Objective-C

Slide 15

Slide 15 text

Cocoa

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Alternatives

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Web?

Slide 20

Slide 20 text

HTML

Slide 21

Slide 21 text

JavaScript

Slide 22

Slide 22 text

CSS

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

Mobile Web

Slide 25

Slide 25 text

Strategy

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

?

Slide 29

Slide 29 text

Many Options

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Comparison

Slide 35

Slide 35 text

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.

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

Overview

Slide 39

Slide 39 text

No content

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Setup

Slide 43

Slide 43 text

iUI Demo @import "iui.css";

Slide 44

Slide 44 text

Usage

Slide 46

Slide 46 text

Result

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

No content

Slide 50

Slide 50 text

jQTouch http://jqtouch.com/

Slide 51

Slide 51 text

More advanced than iUI

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

Great Performance

Slide 54

Slide 54 text

Setup

Slide 55

Slide 55 text

jQTouch β @import "jqtouch.min.css"; @import "themes/apple/theme.min.css";

Slide 56

Slide 56 text

Usage

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Result

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

• 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

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

• Lightweight • JavaScript • Component library • Work in progress

Slide 64

Slide 64 text

Setup

Slide 65

Slide 65 text

...

Slide 66

Slide 66 text

Usage

Slide 67

Slide 67 text

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.

Slide 68

Slide 68 text

Result

Slide 69

Slide 69 text

No content

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

No content

Slide 74

Slide 74 text

iWebkit http://iwebkit.net/

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Setup

Slide 77

Slide 77 text

Slide 78

Slide 78 text

Usage

Slide 79

Slide 79 text

iWebKit
Features

Slide 80

Slide 80 text

Result

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

No content

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

No content

Slide 87

Slide 87 text

No content

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

Enterprisey Mobile Apps

Slide 90

Slide 90 text

Not a framework

Slide 91

Slide 91 text

a platform

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

Usage

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

Result

Slide 96

Slide 96 text

No content

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

Other Tools

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

Free iPhone Web Simulator for Designers

Slide 102

Slide 102 text

No content

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

No content

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

WordPress plugin

Slide 107

Slide 107 text

No content

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

No content

Slide 110

Slide 110 text

Upcoming Book

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

No content

Slide 113

Slide 113 text

Also remember:

Slide 114

Slide 114 text

Not all WebKits are made equal

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

No content

Slide 117

Slide 117 text

My Advice:

Slide 118

Slide 118 text

Mobile Web Strategy

Slide 119

Slide 119 text

Design & Development

Slide 120

Slide 120 text

not an option anymore

Slide 121

Slide 121 text

a must-have

Slide 122

Slide 122 text

No content

Slide 123

Slide 123 text

Thanks!

Slide 124

Slide 124 text

Questions?