html5 apps

HTML5 AppsAppworks 2010 Oslo

Nikolai Onkenuxebu

Friday, October 29, 2010

@nonken

We open the mobile web.

JavaScript AJAX

dojoBrowser

OpenSourceWeb2.0

FrontEnd

Usability UserExperience

mobile

TouchScroll

Landscapehttp://www.flickr.com/photos/tillwe/146242691/

http://bit.ly/distimo-appstores

30th July 200914 Stores

30th July 200914 Stores23rd September 2009

23 Stores

30th July 200914 Stores23rd September 2009

23 Stores2nd December 2009

26 Stores

October 201096 Apptores - WOA

http://www.wipconnector.com/appstores

Cross Platform

Objective-C

Objective-C Symbian C

Objective-C JavaSymbian C

.NETJava

.NETJava ...

http://www.flickr.com/photos/robadob/88901885/

Engine of the web

http://www.flickr.com/photos/chris_radcliff/2947219465/

iPhone - First usable mobile browser

http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile/

http://bit.ly/tomiahonen-2010-almanac

71% of all phoneshave a modern xTML web browser.

App Store without Apple!

Your Appshop facts

• 100% HTML5

Your Appshop facts

• 100% HTML5

• Apps work offline

Your Appshop facts

• 100% HTML5

• 43.000.000 downloads since december 2009

Your Appshop facts

• 100% HTML5

• Payment gateway

Your Appshop facts

• 100% HTML5

• Payment gateway

• It feels native

What is a HTML5 App?

Types of "Apps"

• Preinstalled

Types of "Apps"

• Preinstalled

• Native App (from "some" app store)

Types of "Apps"

• Preinstalled

• Websitelimited access to phone resources

Types of "Apps"

• Preinstalled

• Websitelimited access to phone resources

• HTML5 Appaccess by a capable runtime

Layoutindex.html

Designstyle.css

Layoutindex.html

Designstyle.css

Layoutindex.html

AJAX Library

Database

Designstyle.css

Layoutindex.html

AJAX Library

PhoneGap

PhoneGap"An express goal of the PhoneGap project

is for the project to not exist."

Open Source

http://phonegap.pbworks.com/Roadmap

Low level APIs

Camera Accelerometer Push Notifications...

Chromeless Browser

PhoneGap

browser.eval(“document.geolocation...”)

Low level APIs

Camera Accelerometer Push Notifications...

Chromeless Browser

PhoneGap

browser.eval(“document.geolocation...”)

Device support

•Not a standard (but based on standards)

•Good browsers

•Many device APIs

•Good browsers

•Many device APIs

•Extendable webview in most cases

•Good browsers

•Many device APIs

•Extendable webview in most cases

•Open source

W3C Widgets

Layoutindex.html

Designstyle.css

Database

AJAX Library

Layoutindex.html

Designstyle.css

Database

AJAX Library

Layoutindex.html

Designstyle.css

Database

AJAX LibraryConfiguration

config.xml

Layoutindex.html

Designstyle.css

Database

config.xml

Layoutindex.html

Designstyle.css

Database

config.xml

Layoutindex.html

Designstyle.css

Database

config.xml

W3C Widget =Icon

What is a W3C Widget?

•HTML

•CSS

•JavaScript

•config.xml

•zip it

• rename to *.wgt

Devices?

...yes

•Only few device APIs

•No possibility to introduce custom APIs

•Sometimes annoying browser quirks

•Very simple to create

•Easy to test

•For certain application usecaes the

Other runtimes?

Runtimes

•JIL Spec http://www.jil.org/

•BONDI Spec http://bondi.omtp.org/

•W3C Spec http://w3.org/2009/dap/

•PhoneGap http://phonegap.pbworks.com/

•Nokia WRT http://bit.ly/nokia-WRT-APIs

•Appcelerator http://www.codestrong.com/timobile/api/

Nokia S60

iPhone

Android

Blackberry

WindowsMobile

Runtimes

Nokia S60

iPhone

Android

Blackberry

WindowsMobile

Runtimes

Nokia S60

iPhone

Android

Blackberry

WindowsMobile

Runtimes

Nokia S60

iPhone

Android

Blackberry

WindowsMobile

Runtimes

Nokia S60

iPhone

Android

Blackberry

WindowsMobile

Almost for free

•Facebook widget

Almost for free

•Facebook widget

•Dashboard widget

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

• ...

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

• ...

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

• ...

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

• ...

Almost for free

•Facebook widget

•Dashboard widget

•Website widget

•TV Widget

• ...

A Phone is ...

http://www.flickr.com/photos/kratz/1984004945/

http://www.flickr.com/photos/mbiddulph/3087388964/

http://www.flickr.com/photos/redstamp/4222841946/

• Camera

• Compass

• GPS

• Accelerometer

• Calendar

• Email

• Address book

• Watch

• Alarm clock

• ...

Multiple Ways

• W3C Spechttp://w3.org/2009/dap/

• JIL Spechttp://www.jil.org/

• BONDI Spechttp://bondi.omtp.org/

• Your own Spec :)http://phonegap.com/

Cross Platform?

EventNinja

Database

Layoutindex.html

Designstyle.css

config.xml

Database

Layoutindex.html

Designstyle.css

config.xml

Database

Layoutindex.html

Designstyle.css

config.xml

Events,a Calendar

http://bit.ly/webdev-events

Testing

Best Practices

Best Practices• test on the desktop

• test on the desktop

• try-catch a lot

• alert() IS your friend!

• try-catch a lot

• alert() IS your friend!

• simplify your CSS

Ripple

Libraries

What is out there?

•XUI

What is out there?

•XUI

•Sencha Touch

What is out there?

•XUI

•Sencha Touch

•jQuery Mobile (coming)

What is out there?

•XUI

•Sencha Touch

•Dojo mobile

What is out there?

•XUI

•Sencha Touch

•Dojo mobile

•EmbedJS

What is out there?

•XUI

•Sencha Touch

•Dojo mobile

•EmbedJS

•...

EmbedJSan approach to cross platform development

The Supported Devices

... and there will be moreto embed JavaScript on

http://www.flickr.com/photos/tacoekkel/25538919/

http://www.flickr.com/photos/hugo90/3916794427/

Shrink Your API

20kB 8kB

Simple queries > simple library functionOnly ".class" and "#id" queries

Full fledged queries > Full blown library function

13 LOC

~200 LOC

At RuntimeAt Build Time

dojo-blackberry.js

dojo-blackberry46.js

dojo-nokia-wrt.js

dojo-opera.js

dojo-webkit-mobile.js

dojo-windows-mobile.js

Tooling

The future

HumanApi

•The browser accessing hardware

HumanApi

•Reading your heartrate

HumanApi

•Reading your heartrate

•All JavaScript/HTML/CSS

http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/

Turn on the lights

•http://github.com/nonken/arduinojs

thank you

http://uxebu.com

Nikolai Onken, uxebu

nikolai@uxebu.com@uxebu

@nonken

html5 apps

simple queries

simple library

device apisno

orgbondi spec

orgw3c spec

2010runtimesjil

preinstalled

2010best practices

Technology

app vs. widget (html5 apps) - webtechcon 2010

native vs html5 apps

html5 web apps vs. native apps

building html5 chromecast apps

dave orchard - offline web apps with html5

html5 apps cross platform - swdc 2010, stockholm

html5 apps - gwt oriented

femaledev -- html5 mobile apps

html5 apps on samsung bada - quirksmode

building rich apps with html5 and friends

introduction to html5 magazine apps

building mobile apps with html5 -...

mobile apps vs html5

getting started: designing html5 web apps

ubuntu html5 apps deep dive

html5 pt - offline apps

bone.io for html5 apps

using html5 to build mobile apps

writing html5 mobile web apps using backbone.js

srishti innovative html5 apps