Html5 Apps

HTML5 Apps
Appworks 2010 Oslo
Nikolai Onken
uxebu
Friday, October 29, 2010

@nonken

We open the mobile web.

JavaScript AJAX
CSS
dojo
Browser
OpenSource
Web2.0
FrontEnd
Usability UserExperience
mobile
TouchScroll

Landscape
http://www.ﬂickr.com/photos/tillwe/146242691/

http://bit.ly/distimo-appstores
30th July 2009
14 Stores

30th July 2009
14 Stores23rd September 2009
23 Stores

30th July 2009
14 Stores23rd September 2009
23 Stores
2nd December 2009
26 Stores

October 2010
96 Apptores - WOA
http://www.wipconnector.com/appstores

Cross Platform

Objective-C

Objective-C Symbian C

Objective-C JavaSymbian C

Java

.NETJava

.NETJava ...

http://www.ﬂickr.com/photos/robadob/88901885/
Engine of the web

http://www.ﬂickr.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 phones
have a modern xTML web browser.

App Store
without Apple!

Your Appshop facts

Your Appshop facts
• 100% HTML5

Your Appshop facts
• 100% HTML5
• Apps work ofﬂine

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
•Website
limited access to phone resources

Types of "Apps"
•Preinstalled
•Website
limited access to phone resources
•HTML5 App
access by a capable runtime

Layout
index.html

Design
style.css
Layout
index.html

Design
style.css
Layout
index.html
AJAX Library

Database
Design
style.css
Layout
index.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 Notiﬁcations...
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

Layout
index.html
Design
style.css
Database
AJAX Library

Layout
index.html
Design
style.css
Database
AJAX Library
Configuration
config.xml

Layout
index.html
Design
style.css
Database
AJAX Library
Configuration
config.xml
Icon

Layout
index.html
Design
style.css
Database
AJAX Library
Configuration
config.xml
=
Icon

Layout
index.html
Design
style.css
Database
AJAX Library
Configuration
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
•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
Windows
Mobile

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.ﬂickr.com/photos/kratz/1984004945/

http://www.ﬂickr.com/photos/mbiddulph/3087388964/

http://www.ﬂickr.com/photos/redstamp/4222841946/

• Camera
• Compass
• GPS
• Accelerometer
• Calendar
• Email
• Address book
• Watch
• Alarm clock
• ...

Multiple Ways
• W3C Spec
http://w3.org/2009/dap/
• JIL Spec
http://www.jil.org/
• BONDI Spec
http://bondi.omtp.org/
• Your own Spec :)
http://phonegap.com/

Cross Platform?

EventNinja

Database
Layout
index.html
Design
style.css
AJAX Library
Configuration
config.xml
Icon

Database
Layout
index.html
Design
style.css
AJAX Library
Configuration
config.xml
Icon
Events,
a Calendar

http://bit.ly/webdev-events

Testing

Best Practices

Best Practices
• test on the desktop

Best Practices

Best Practices
• try-catch a lot

Best Practices
• try-catch a lot
• alert() IS your friend!

Best Practices
• 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
•...

EmbedJS
an approach to cross platform development

The Supported Devices
... and there will be more
to embed JavaScript on

http://www.ﬂickr.com/photos/tacoekkel/25538919/

http://www.ﬂickr.com/photos/hugo90/3916794427/

Shrink Your API
20kB 8kB

Simple queries > simple library function
Only ".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 Runtime
At 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

thank you
http://uxebu.com
Nikolai Onken, uxebu
nikolai@uxebu.com
@uxebu
@nonken

Html5 Apps

Recommended

Recommended

More Related Content

Similar to Html5 Apps

Similar to Html5 Apps (20)

More from Nikolai Onken

More from Nikolai Onken (15)

Recently uploaded

Recently uploaded (20)

Html5 Apps