html5 apps

HTML5 AppsAppworks 2010 Oslo

Nikolai Onkenuxebu

Friday, October 29, 2010

@nonken


We open the mobile web.


JavaScript AJAX

CSS

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



Java



.NETJava



.NETJava ...


HTML


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




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

71% of all phoneshave a modern xTML web browser.




App Store without Apple!


Your Appshop facts


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"


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


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...”)


Device support


Pros

Cons


Pros

•Not a standard (but based on standards)

Cons


Pros


•Good browsers

Cons


Pros


•Good browsers

•Many device APIs

Cons


Pros


•Good browsers

•Many device APIs

•Extendable webview in most cases

Cons


Pros


•Good browsers

•Many device APIs

•Extendable webview in most cases

•Open source

Cons


W3C Widgets


Layoutindex.html

Designstyle.css

Database

AJAX Library


Layoutindex.html

Designstyle.css

Database

AJAX LibraryConfiguration

config.xml


Layoutindex.html

Designstyle.css

Database


config.xml

Icon


Layoutindex.html

Designstyle.css

Database


config.xml

=Icon


Layoutindex.html

Designstyle.css

Database


config.xml

W3C Widget =Icon


What is a W3C Widget?


What is a W3C Widget?

•HTML

•CSS

•JavaScript

•config.xml

•zip it

• rename to *.wgt


Devices?

...yes


Pros

Cons


Pros

•Only few device APIs

Cons


Pros


•No possibility to introduce custom APIs

Cons


Pros



•Sometimes annoying browser quirks

Cons


Pros




•Very simple to create

Cons


Pros





•Easy to test

Cons


Pros





•Easy to test

•For certain application usecaes the

Cons


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


http://www.jil.org

http://www.jil.org

http://dev.w3.org/2006/waf/widgets-api/


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


http://www.appcelerator.com


Runtimes







Nokia S60

iPhone

Android

Blackberry

WindowsMobile


http://www.jil.org

http://www.jil.org









Runtimes







Nokia S60

iPhone

Android

Blackberry

WindowsMobile


http://www.jil.org

http://www.jil.org

http://www.jil.org


























Almost for free


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

• ...


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/




http://www.jil.org

http://www.jil.org

http://bondi.omtp.org




Cross Platform?


EventNinja


Database

Layoutindex.html

Designstyle.css


config.xml

Icon


Database

Layoutindex.html

Designstyle.css


config.xml

Icon

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





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


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


vs.



vs.


Full fledged queries > Full blown library function


vs.


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


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


Turn on the lights

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


http://github.com/nonken/arduinojs

http://github.com/nonken/arduinojs

thank you

http://uxebu.com

Nikolai Onken, uxebu

[email protected]@uxebu

@nonken


http://blog.uxebu.com

http://blog.uxebu.com

mailto:[email protected]






html5 apps

Technology

simple queries

simple library

device apisno

orgbondi spec

orgw3c spec

2010runtimesjil

preinstalled

2010best practices