HTML5 Apps - Mobile Developer Summit Bangalore

HTML5 Apps

The mobile web taking over!

@wolframkriesing

@uxebu

Donnerstag, 11. November 2010

We open the mobile web.

@wolframkriesing

Donnerstag, 11. November 2010

http://www.flickr.com/photos/andresrueda/2276197032/

Donnerstag, 11. November 2010

http://www.flickr.com/photos/cmoi/760513848/

Donnerstag, 11. November 2010

http://www.flickr.com/photos/cmoi/760513848/

Donnerstag, 11. November 2010

JavaScript AJAX

CSS

dojoBrowser

OpenSourceWeb2.0

FrontEnd

Usability UserExperience

mobile

TouchScroll

Donnerstag, 11. November 2010

Donnerstag, 11. November 2010

HTML5 Apps

W3C Widgets

universal apps

Hybrid Apps

Mobile Web Apps

anyware

WebWorks

360 Apps

Cross Platform Mobile Apps

Opera Widgets

Donnerstag, 11. November 2010

Donnerstag, 11. November 2010

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

Donnerstag, 11. November 2010

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

Donnerstag, 11. November 2010

http://bit.ly/distimo-appstores

30th July 200914 Stores23rd September 2009

23 Stores2nd December 2009

26 Stores

Donnerstag, 11. November 2010

Objective-C JavaSymbian C

.NETJava ...

Donnerstag, 11. November 2010

€€

€€

€

€€€...

Donnerstag, 11. November 2010

HTML

Donnerstag, 11. November 2010

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

Engine of the web

Donnerstag, 11. November 2010

€

Donnerstag, 11. November 2010

€Web Technologies

Donnerstag, 11. November 2010

Donnerstag, 11. November 2010

Donnerstag, 11. November 2010

Donnerstag, 11. November 2010

Donnerstag, 11. November 2010

App Store

without Apple!

App Store

without Apple!

Donnerstag, 11. November 2010

Real Use Case:

EventNinja

Donnerstag, 11. November 2010

Donnerstag, 11. November 2010

Donnerstag, 11. November 2010

http://bit.ly/webdev-events

Donnerstag, 11. November 2010

•CSS•Help Button •Back Button•Next Page Arrow•Scrolling Area

iPhone vs. WebOS

Donnerstag, 11. November 2010

Facts

• 3 Months Investigation

• 6 SDKs (10GB?, VMs, ...)

• 6 ways to find bugs

• 6 App Stores (Account, Submit, Review, ...)

Donnerstag, 11. November 2010

Donnerstag, 11. November 2010

Donnerstag, 11. November 2010

Donnerstag, 11. November 2010

Donnerstag, 11. November 2010

Donnerstag, 11. November 2010

Donnerstag, 11. November 2010

Donnerstag, 11. November 2010

Donnerstag, 11. November 2010

A Phone is ...

Donnerstag, 11. November 2010

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

Donnerstag, 11. November 2010

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

Donnerstag, 11. November 2010

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

Donnerstag, 11. November 2010

• Camera

• Compass

• GPS

• Accelerometer

• Calendar

• Email

• Address book

• Watch

• Alarm clock

• ...

Donnerstag, 11. November 2010

Multiple Ways

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

• JIL Spec / WAChttp://www.jil.org http://www.wholesaleappcommunity.com

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

Donnerstag, 11. November 2010

http://bit.ly/vf-jil-docs

System Info

Network Info

Phone Info

File

GPS

Contacts

Camera

Audio

SMS, MMS, ...

Donnerstag, 11. November 2010

if (Widget.Device.PowerInfo.isCharging){ alert("Battery is charging");}

var player = Widget.Multimedia.AudioPlayer;player.open("myAudioFile.mp3");player.play(1);

if (Widget.Device.RadioInfo.isRoaming){ alert("Money Money Money");}

Donnerstag, 11. November 2010

PhoneGap"An express goal of the PhoneGap project

is for the project to not exist."

Open Source

Donnerstag, 11. November 2010

http://phonegap.pbworks.com/Roadmap

Donnerstag, 11. November 2010

Platform adaptations

Business andApplication logic

confi

g.xml

PhoneGap

info.plist

Android

iP****

Nokia WRT

pure W3CWidgets

kinda W3CWidgets

Donnerstag, 11. November 2010

Some numbers

240 kB

124 kB

JavaScript, HTML, CSS, etc.PhoneGap

native App = 364 kB

Donnerstag, 11. November 2010

EmbedJS

Donnerstag, 11. November 2010

The Supported Devices

... and there will be more

to embed JavaScript on

Donnerstag, 11. November 2010

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

Donnerstag, 11. November 2010

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

Donnerstag, 11. November 2010

Shrink Your API

20kB 8kB

Donnerstag, 11. November 2010

vs.

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

Full fledged queries > Full blown library function

Donnerstag, 11. November 2010

vs.

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

Full fledged queries > Full blown library function

13 LOC

~200 LOC

Donnerstag, 11. November 2010

Donnerstag, 11. November 2010

At Runtime

At Build Time

Donnerstag, 11. November 2010

dojo-blackberry.js

dojo-blackberry46.js

dojo-nokia-wrt.js

dojo-opera.js

dojo-webkit-mobile.js

dojo-windows-mobile.js

Donnerstag, 11. November 2010

Wolfram Kriesing

http://apparat.io

http://embedjs.org

Thank you

Donnerstag, 11. November 2010