html5 apps
Post on 21-Sep-2014
28 views
DESCRIPTION
Slides of talk I gave at appworks in OsloTRANSCRIPT
HTML5 AppsAppworks 2010 Oslo
Nikolai Onkenuxebu
Friday, October 29, 2010
Friday, October 29, 2010
@nonken
Friday, October 29, 2010
Friday, October 29, 2010
We open the mobile web.
Friday, October 29, 2010
Friday, October 29, 2010
JavaScript AJAX
CSS
dojoBrowser
OpenSourceWeb2.0
FrontEnd
Usability UserExperience
mobile
TouchScroll
Friday, October 29, 2010
Friday, October 29, 2010
Landscapehttp://www.flickr.com/photos/tillwe/146242691/
Friday, October 29, 2010
Landscapehttp://www.flickr.com/photos/tillwe/146242691/
Friday, October 29, 2010
http://bit.ly/distimo-appstores
30th July 200914 Stores
Friday, October 29, 2010
http://bit.ly/distimo-appstores
30th July 200914 Stores23rd September 2009
23 Stores
Friday, October 29, 2010
http://bit.ly/distimo-appstores
30th July 200914 Stores23rd September 2009
23 Stores2nd December 2009
26 Stores
Friday, October 29, 2010
October 201096 Apptores - WOA
http://www.wipconnector.com/appstores
Friday, October 29, 2010
Cross Platform
Friday, October 29, 2010
Friday, October 29, 2010
Objective-C
Friday, October 29, 2010
Objective-C Symbian C
Friday, October 29, 2010
Objective-C JavaSymbian C
Friday, October 29, 2010
Objective-C JavaSymbian C
Java
Friday, October 29, 2010
Objective-C JavaSymbian C
.NETJava
Friday, October 29, 2010
Objective-C JavaSymbian C
.NETJava ...
Friday, October 29, 2010
HTML
Friday, October 29, 2010
http://www.flickr.com/photos/robadob/88901885/
Engine of the web
Friday, October 29, 2010
http://www.flickr.com/photos/chris_radcliff/2947219465/
iPhone - First usable mobile browser
Friday, October 29, 2010
http://uxebu.com/blog/2010/04/27/touchscroll-a-scrolling-layer-for-webkit-mobile/
Friday, October 29, 2010
Friday, October 29, 2010
http://bit.ly/tomiahonen-2010-almanac
Friday, October 29, 2010
http://bit.ly/tomiahonen-2010-almanac
71% of all phoneshave a modern xTML web browser.
Friday, October 29, 2010
App Store without Apple!
Friday, October 29, 2010
Your Appshop facts
Friday, October 29, 2010
Your Appshop facts
• 100% HTML5
Friday, October 29, 2010
Your Appshop facts
• 100% HTML5
• Apps work offline
Friday, October 29, 2010
Your Appshop facts
• 100% HTML5
• Apps work offline
• 43.000.000 downloads since december 2009
Friday, October 29, 2010
Your Appshop facts
• 100% HTML5
• Apps work offline
• 43.000.000 downloads since december 2009
• Payment gateway
Friday, October 29, 2010
Your Appshop facts
• 100% HTML5
• Apps work offline
• 43.000.000 downloads since december 2009
• Payment gateway
• It feels native
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
What is a HTML5 App?
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
}
Friday, October 29, 2010
}?
Friday, October 29, 2010
Types of "Apps"
Friday, October 29, 2010
Types of "Apps"
• Preinstalled
Friday, October 29, 2010
Types of "Apps"
• Preinstalled
• Native App (from "some" app store)
Friday, October 29, 2010
Types of "Apps"
• Preinstalled
• Native App (from "some" app store)
• Websitelimited access to phone resources
Friday, October 29, 2010
Types of "Apps"
• Preinstalled
• Native App (from "some" app store)
• Websitelimited access to phone resources
• HTML5 Appaccess by a capable runtime
Friday, October 29, 2010
Friday, October 29, 2010
Layoutindex.html
Friday, October 29, 2010
Designstyle.css
Layoutindex.html
Friday, October 29, 2010
Designstyle.css
Layoutindex.html
AJAX Library
Friday, October 29, 2010
Database
Designstyle.css
Layoutindex.html
AJAX Library
Friday, October 29, 2010
PhoneGap
Friday, October 29, 2010
PhoneGap"An express goal of the PhoneGap project
is for the project to not exist."
Friday, October 29, 2010
PhoneGap"An express goal of the PhoneGap project
is for the project to not exist."
Open Source
Friday, October 29, 2010
PhoneGap"An express goal of the PhoneGap project
is for the project to not exist."
Open Source
Friday, October 29, 2010
http://phonegap.pbworks.com/Roadmap
Friday, October 29, 2010
Low level APIs
Camera Accelerometer Push Notifications...
Chromeless Browser
PhoneGap
browser.eval(“document.geolocation...”)
Friday, October 29, 2010
Low level APIs
Camera Accelerometer Push Notifications...
Chromeless Browser
PhoneGap
browser.eval(“document.geolocation...”)
Friday, October 29, 2010
Device support
Friday, October 29, 2010
Pros
Cons
Friday, October 29, 2010
Pros
•Not a standard (but based on standards)
Cons
Friday, October 29, 2010
Pros
•Not a standard (but based on standards)
•Good browsers
Cons
Friday, October 29, 2010
Pros
•Not a standard (but based on standards)
•Good browsers
•Many device APIs
Cons
Friday, October 29, 2010
Pros
•Not a standard (but based on standards)
•Good browsers
•Many device APIs
•Extendable webview in most cases
Cons
Friday, October 29, 2010
Pros
•Not a standard (but based on standards)
•Good browsers
•Many device APIs
•Extendable webview in most cases
•Open source
Cons
Friday, October 29, 2010
W3C Widgets
Friday, October 29, 2010
Layoutindex.html
Designstyle.css
Database
AJAX Library
Friday, October 29, 2010
Layoutindex.html
Designstyle.css
Database
AJAX Library
Friday, October 29, 2010
Layoutindex.html
Designstyle.css
Database
AJAX LibraryConfiguration
config.xml
Friday, October 29, 2010
Layoutindex.html
Designstyle.css
Database
AJAX LibraryConfiguration
config.xml
Icon
Friday, October 29, 2010
Layoutindex.html
Designstyle.css
Database
AJAX LibraryConfiguration
config.xml
=Icon
Friday, October 29, 2010
Layoutindex.html
Designstyle.css
Database
AJAX LibraryConfiguration
config.xml
W3C Widget =Icon
Friday, October 29, 2010
What is a W3C Widget?
Friday, October 29, 2010
What is a W3C Widget?
Friday, October 29, 2010
What is a W3C Widget?
•HTML
•CSS
•JavaScript
•config.xml
•zip it
• rename to *.wgt
Friday, October 29, 2010
Devices?
...yes
Friday, October 29, 2010
Pros
Cons
Friday, October 29, 2010
Pros
•Only few device APIs
Cons
Friday, October 29, 2010
Pros
•Only few device APIs
•No possibility to introduce custom APIs
Cons
Friday, October 29, 2010
Pros
•Only few device APIs
•No possibility to introduce custom APIs
•Sometimes annoying browser quirks
Cons
Friday, October 29, 2010
Pros
•Only few device APIs
•No possibility to introduce custom APIs
•Sometimes annoying browser quirks
•Very simple to create
Cons
Friday, October 29, 2010
Pros
•Only few device APIs
•No possibility to introduce custom APIs
•Sometimes annoying browser quirks
•Very simple to create
•Easy to test
Cons
Friday, October 29, 2010
Pros
•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
Cons
Friday, October 29, 2010
Other runtimes?
Friday, October 29, 2010
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
Friday, October 29, 2010
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
Friday, October 29, 2010
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
Friday, October 29, 2010
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
Friday, October 29, 2010
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
Friday, October 29, 2010
Almost for free
Friday, October 29, 2010
Almost for free
•Facebook widget
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
• ...
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
• ...
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
• ...
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
• ...
Friday, October 29, 2010
Almost for free
•Facebook widget
•Dashboard widget
•Website widget
•TV Widget
• ...
Friday, October 29, 2010
A Phone is ...
Friday, October 29, 2010
http://www.flickr.com/photos/kratz/1984004945/
Friday, October 29, 2010
http://www.flickr.com/photos/mbiddulph/3087388964/
Friday, October 29, 2010
http://www.flickr.com/photos/redstamp/4222841946/
Friday, October 29, 2010
• Camera
• Compass
• GPS
• Accelerometer
• Calendar
• Address book
• Watch
• Alarm clock
• ...
Friday, October 29, 2010
Multiple Ways
• W3C Spechttp://w3.org/2009/dap/
• JIL Spechttp://www.jil.org/
• BONDI Spechttp://bondi.omtp.org/
• Your own Spec :)http://phonegap.com/
Friday, October 29, 2010
Cross Platform?
Friday, October 29, 2010
EventNinja
Friday, October 29, 2010
Database
Layoutindex.html
Designstyle.css
AJAX LibraryConfiguration
config.xml
Icon
Friday, October 29, 2010
Database
Layoutindex.html
Designstyle.css
AJAX LibraryConfiguration
config.xml
Icon
Friday, October 29, 2010
Database
Layoutindex.html
Designstyle.css
AJAX LibraryConfiguration
config.xml
Icon
Events,a Calendar
Friday, October 29, 2010
http://bit.ly/webdev-events
Friday, October 29, 2010
http://bit.ly/webdev-events
Friday, October 29, 2010
http://bit.ly/webdev-events
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Testing
Friday, October 29, 2010
Best Practices
Friday, October 29, 2010
Best Practices• test on the desktop
Friday, October 29, 2010
Best Practices• test on the desktop
• test on the desktop
Friday, October 29, 2010
Best Practices• test on the desktop
• test on the desktop
• test on the desktop
Friday, October 29, 2010
Best Practices• test on the desktop
• test on the desktop
• test on the desktop
• try-catch a lot
Friday, October 29, 2010
Best Practices• test on the desktop
• test on the desktop
• test on the desktop
• try-catch a lot
• alert() IS your friend!
Friday, October 29, 2010
Best Practices• test on the desktop
• test on the desktop
• test on the desktop
• try-catch a lot
• alert() IS your friend!
• simplify your CSS
Friday, October 29, 2010
Ripple
Friday, October 29, 2010
Libraries
Friday, October 29, 2010
What is out there?
Friday, October 29, 2010
What is out there?
•XUI
Friday, October 29, 2010
What is out there?
•XUI
•Sencha Touch
Friday, October 29, 2010
What is out there?
•XUI
•Sencha Touch
•jQuery Mobile (coming)
Friday, October 29, 2010
What is out there?
•XUI
•Sencha Touch
•jQuery Mobile (coming)
•Dojo mobile
Friday, October 29, 2010
What is out there?
•XUI
•Sencha Touch
•jQuery Mobile (coming)
•Dojo mobile
•EmbedJS
Friday, October 29, 2010
What is out there?
•XUI
•Sencha Touch
•jQuery Mobile (coming)
•Dojo mobile
•EmbedJS
•...
Friday, October 29, 2010
EmbedJSan approach to cross platform development
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
The Supported Devices
... and there will be moreto embed JavaScript on
Friday, October 29, 2010
http://www.flickr.com/photos/tacoekkel/25538919/
Friday, October 29, 2010
http://www.flickr.com/photos/hugo90/3916794427/
Friday, October 29, 2010
Shrink Your API
20kB 8kB
Friday, October 29, 2010
Simple queries > simple library functionOnly ".class" and "#id" queries
Friday, October 29, 2010
vs.
Simple queries > simple library functionOnly ".class" and "#id" queries
Friday, October 29, 2010
vs.
Simple queries > simple library functionOnly ".class" and "#id" queries
Full fledged queries > Full blown library function
Friday, October 29, 2010
vs.
Simple queries > simple library functionOnly ".class" and "#id" queries
Full fledged queries > Full blown library function
13 LOC
~200 LOC
Friday, October 29, 2010
Friday, October 29, 2010
At RuntimeAt Build Time
Friday, October 29, 2010
dojo-blackberry.js
dojo-blackberry46.js
dojo-nokia-wrt.js
dojo-opera.js
dojo-webkit-mobile.js
dojo-windows-mobile.js
Friday, October 29, 2010
Tooling
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
Friday, October 29, 2010
The future
Friday, October 29, 2010
HumanApi
Friday, October 29, 2010
HumanApi
•The browser accessing hardware
Friday, October 29, 2010
HumanApi
•The browser accessing hardware
•Reading your heartrate
Friday, October 29, 2010
HumanApi
•The browser accessing hardware
•Reading your heartrate
•All JavaScript/HTML/CSS
Friday, October 29, 2010
http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/
Friday, October 29, 2010
http://uxebu.com/blog/2010/01/25/humanapi-the-browser-in-the-real-world/
Friday, October 29, 2010
Turn on the lights
Friday, October 29, 2010
Turn on the lights
•http://github.com/nonken/arduinojs
Friday, October 29, 2010
thank you
http://uxebu.com
Nikolai Onken, uxebu
[email protected]@uxebu
@nonken
Friday, October 29, 2010