Taking your Web App for a walk

Taking your web app
for a walk
Jens-Christian Fischer

soft-shake.ch
3.10.2011

So who‘s this guy?

• I have a job: Developer & CEO


• I have a company: http://invisible.ch


• I have an email address: jens-christian@invisible.ch


• I‘m on Twitter: @jcﬁscher


• I‘m on Twitter: @jcﬁscher
• I‘m on Google+: 109789939743085010576

http://www.ﬂickr.com/photos/hgesell/1257717725/

Web

http://www.ﬂickr.com/photos/hgesell/1257717725/

iO
S -C oid
i ve A n dr
c t
b je Da
O
Win Ph lvi
one7 Bl k
ac
C# kb
O S er
W eb ry
IP ?)
(R

6 Steps towards mobile apps
1. HTML 5 / CSS 3

1. HTML 5 / CSS 3
2. Responsive Design

1. HTML 5 / CSS 3
3. Ofﬂine / Local Storage

1. HTML 5 / CSS 3
4. UI Frameworks (jQuery Mobile / Sencha)

1. HTML 5 / CSS 3
5. Using the device (PhoneGap)

1. HTML 5 / CSS 3
6. Being Native (Titanium)

1. HTML 5 / CSS 3
4. UI Frameworks (jQuery Mobile / Se
6. Being Native (Titanium)

CSS Media Queries
@media handheld, only screen and (max-width: 1280px) { .wrapper { padding: 0; }
#header { position: absolute; }
#header .center { position: relative; width: 100%; }
#logo { margin: 0; left: 32px; top: 8px; }
#content { width: 100%; margin: 0 auto; padding: 154px 0 240px 0; }
#footer { position: absolute; bottom: 0; left: 0; } }
@media handheld, only screen and (max-width: 768px) { .wrapper { padding: 0; }
.entry { margin-left: 0; }
h1 { font-size: 1.3em; }
#logo { left: 8px; top: 8px; }
#useless { display: none; }
#panel { display: none; }
#content { padding: 154px 0 240px 0; width: 100%; height: 100%; }
#footer { position: absolute; max-width: 768px; bottom: 0; left: 0; }
.text { margin: 0; } }
@media handheld, only screen and (max-width: 480px) {
.left { float: none; margin: 0 0 0 86px; } }
@media handheld, only screen and (max-width: 320px) {
.left { margin: 0 0 0 8px; } }

http://www.alistapart.com/articles/responsive-web-design/

Going Ofﬂine

• Caching Files ofﬂine
• Local Storage

Cache Manifest
<!DOCTYPE HTML> CACHE MANIFEST
<html manifest="/cache.manifest"> FALLBACK:
<body> / /offline.html
... NETWORK:
</body> /tracking.cgi
</html> CACHE:
/clock.css
/clock.js
/clock-face.jpg

http://diveintohtml5.org/ofﬂine.html

Cache Manifest
CACHE MANIFEST
FALLBACK:
/ /offline.html
NETWORK:
/tracking.cgi
CACHE:
/clock.css
/clock.js
/clock-face.jpg


Cache Manifest
CACHE MANIFEST
FALLBACK:
/ /offline.html If not cached, show this
NETWORK:
/tracking.cgi
CACHE:
/clock.css
/clock.js
/clock-face.jpg


Cache Manifest
CACHE MANIFEST
FALLBACK:
NETWORK:
/tracking.cgi Dont‘t cache
CACHE:
/clock.css
/clock.js
/clock-face.jpg


Cache Manifest
CACHE MANIFEST
FALLBACK:
NETWORK:
/tracking.cgi Dont‘t cache
CACHE:
/clock.css
/clock.js Cache these ﬁles
/clock-face.jpg


Local Storage
Simple Key - Value store

if (Modernizr.localstorage) {
var foo = localStorage.getItem("key");
// ...
localStorage.setItem("key", foo);
} else {
alert('No storage capabilities');
}
http://diveintohtml5.org/storage.html

More than Key-Value?

Web SQL
Indexed DB

More than Key-Value?

Web SQL
Indexed DB
hic sunt dracones

http://ﬂickr.com/photos/glennharper/49536169/

how far have we come?

http://ﬂickr.com/photos/glennharper/49536169/

jQuery Mobile
• Shares the name with jQuery (and
uses it)
• HTML Code with annotations
• JavaScript for functionality
http://jquerymobile.com

Sencha Touch

• Grown out of the Ext JS Framework
• JavaScript Code for design
• HTML is just a container
http://www.sencha.com/products/touch/

jQuery Mobile
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no">
<title>To Do List</title>
<script src="../../_libs/jqm/jquery-1.6.2.min.js"></script>
<script src="../../_libs/jqm/jquery.mobile-1.0b3.min.js"></script>
<script src="../../_libs/persistencejs/lib/persistence.js"></script>

<link href="../../_libs/jqm/jquery.mobile-1.0b3.min.css" rel="stylesheet">
<link href="../../_libs/jqm/jquery.mobile.datebox-1.0b1.min.css" rel="stylesheet">

<script src="app.js"></script>
<link rel="apple-touch-icon" href="icon.png"/>
<link rel="apple-touch-startup-image" href="res/img/Default.png" />
</head>
<body>

<div data-role="page" id="indexPage">
<div data-role="header" data-theme="b" data-position="fixed">
<h1>To Do List</h1>
<a href="#formPage" onclick="newTask()" data-icon="plus" class="ui-btn-right">New</a>
</div>

<div data-role="content">
<ul class="taskList" data-role="listview" data-theme="c" id="taskList">
</ul>
</div>
</div>
// ... lot‘s of stuff omitted
</body>
</html>

jQuery Mobile
<!DOCTYPE html>
<html>
<head>


</head>
<body>

Deﬁne a Page
<h1>To Do List</h1>
</div>

</ul>
</div>
</div>
</body>
</html>

jQuery Mobile
<!DOCTYPE html>
<html>
<head>


</head>
<body>

<h1>To Do List</h1>
Deﬁne Header
</div>

</ul>
</div>
</div>
</body>
</html>

jQuery Mobile
<!DOCTYPE html>
<html>
<head>


</head>
<body>

<h1>To Do List</h1>
</div>

Deﬁne Content
</ul>
</div>
</div>
</body>
</html>

<!DOCTYPE html>
<html manifest="todolist.manifest">
<head>


<script src="../../_libs/sencha/sencha-touch.js"></script>
<link href="../../_libs/sencha/resources/css/sencha-touch.css" rel="stylesheet">

<link rel="stylesheet" href="style.css">


</head>
<body></body>
</html>

<!DOCTYPE html>
<html manifest="todolist.manifest">
<head>


<script src="../../_libs/sencha/sencha-touch.js"></script>
<link href="../../_libs/sencha/resources/css/sencha-touch.css" rel="stylesheet">

<link rel="stylesheet" href="style.css">


</head>
<body></body>
</html>
Deﬁne Content (?)

var titlebar = {
id: 'taskFormTitlebar',
xtype: 'toolbar',
title: 'Task Detail',
items: [ cancelButton, {xtype: 'spacer'},
saveButton]
};

TaskList.Viewport = new Ext.Panel({
fullscreen: true,
layout: "card",
style: "background-color: white",
layoutOnOrientationChange: true,
items: [
{
id: "mainlist",
xtype: "panel",
layout: "card",
items: TaskList.listPanel,
dockedItems: toolbar
}, TaskList.TaskForm]
});

The HTML or
the JavaScript way?

Native?

• Accelerometer
• Camera

Native?

• Accelerometer
• Camera
• Address Book

Native?

• Accelerometer
• Camera
• Address Book
• ...
A lot is missing!

PhoneGap

• iOS, Android, Blackberry, Symbian, WebOS
• JavaScript APIs that give access to Phones
features
• Native Libraries, that interface with the
JavaScript API
http://phonegap.com

• Coordinates (Position Data / Acceleration)

• Accelerometer

• Camera

• Contacts

• Files / Directories / FileTransfer

• Geolocation / Compass

• Media

• Notiﬁcation (Dialogs / Alerts)

• Orientation

• SMS / Telephony

• Connection

Accessing the camera

navigator.camera.getPicture(onSuccess, onFail, { quality: 50 });

function onSuccess(imageData) {
var image = document.getElementById('myImage');
image.src = "data:image/jpeg;base64," + imageData;
}

function onFail(message) {
alert('Failed because: ' + message);
}

Write HTML / JS
run „native“ on device
access device functions

But we‘re still not
„really“ native

Titanium Appcelerator

http://www.appcelerator.com/

Objective-C / Dalvik
JavaScript
Bridge

iOS / Android / (BlackBerry)

Build applications with native components
Control them from JavaScript
var win = Ti.UI.createWindow();
var view = Ti.UI.createImageView({
  image:"myimage.png",
  width:24,
  height:24
});
var button = Ti.UI.createButton({
  title:"Animate",
  width:80,
  height:40,
  bottom:10
});
button.addEventListener("click",function(){
  view.animate({top:0,duration:500});
});
win.add(view);
win.add(button);
win.open();

use normal Web App
• Leverage your HTML5 / CSS3 / JavaScript
• Webkit is the new IE (which „is a good
thing“)
• No restrictions on content from a certain
fruit company
• Can go ofﬂine

use jQuery Mobile

• most mobile web browsers
• simple to use, relatively low learning curve
• much HTML, some JavaScript
• still in beta (actually, RC1 just came out)

use Sencha Touch

• most mobile browsers
• many different components / widgets
• high learning curve
• commercial and open source licenses (but
free)

use PhoneGap

• most mobile browsers
• supports „any“ web app (jQuery Mobile /
Sencha)
• Access to some device functions
• Deliver „native“ app (via AppStore)

use Appcelerator
• iOS / Android „native“ native app
(AppStore)
• use all native components of device
• high learning curve
• Commercial developer licenses, basic
functionality free

Taking your Web App for a walk

Taking your Web App for a walk

More Related Content

What's hot

Viewers also liked

Similar to Taking your Web App for a walk

Recently uploaded

Taking your Web App for a walk

Editor's Notes