mobile javascript development - qcon 2010
Post on 17-May-2015
1.923 Views
Preview:
DESCRIPTION
TRANSCRIPT
Mobile JavaScript Development
or HTML5 appsNikolai Onken - uxebu Consulting Ltd. & Co. KG
Monday, March 15, 2010
Hi all@nonken | @uxebu
Monday, March 15, 2010
We open the mobile web
Monday, March 15, 2010
Agenda
Monday, March 15, 2010
Agenda
• Timetravel
Monday, March 15, 2010
Agenda
• Timetravel
• Why mobile JavaScript development?
Monday, March 15, 2010
Agenda
• Timetravel
• Why mobile JavaScript development?
• Tales of a mobile dev (EventNinja)
Monday, March 15, 2010
Agenda
• Timetravel
• Why mobile JavaScript development?
• Tales of a mobile dev (EventNinja)
• Outlook
Monday, March 15, 2010
Experiment
An ECG written in JavaScript/HTML/CSS
Monday, March 15, 2010
Pulse check
HumanApi - http://bit.ly/92lpyR
j Ka
a
Monday, March 15, 2010
Agenda
• Timetravel
• Why mobile JavaScript development?
• Tales of a mobile dev (EventNinja)
• Outlook
Monday, March 15, 2010
Monday, March 15, 2010
Monday, March 15, 2010
Monday, March 15, 2010
Monday, March 15, 2010
2010
Monday, March 15, 2010
• Eric Schmidt (CEO Google Inc.): “Mobile first”
2010
Monday, March 15, 2010
• Eric Schmidt (CEO Google Inc.): “Mobile first”
• Steve Jobs (CEO Apple Inc.): “Apple is a mobile devices company.”
2010
Monday, March 15, 2010
Mobile browsing?
KhWWW
$
Monday, March 15, 2010
Mobile browsing?
Kh WWW
$
Monday, March 15, 2010
The past
K
h
KKKKKKKKO
Monday, March 15, 2010
The future
K
hhhhhhhhhO
Monday, March 15, 2010
Lets look at some very cool stuff
http://bit.ly/bqvQIG
Monday, March 15, 2010
Pulse check
HumanApi - http://bit.ly/92lpyR
j Ka
a
Monday, March 15, 2010
Agenda
• Timetravel
• Why mobile JavaScript development?
• Tales of a mobile developmentev (EventNinja)
• Outlook
Monday, March 15, 2010
Mobile market
http://bit.ly/bPDn5b
5%2%3%3%
4%
4%
5%
5%
10%
20%
38%
Nokia Samsung LG Sony Ericsson Motorola ZTEKyocera RIM Sharp Apple Other
Monday, March 15, 2010
Smartphone market
http://bit.ly/bPDn5b
20%
5%
15%
20%
40%
Nokia RIM Apple HTC Others
Monday, March 15, 2010
d == 2%
Is this our (developers) world?
Monday, March 15, 2010
Seriously?
Are we happy with a 2% market share?
Monday, March 15, 2010
ƒ a==
How open platforms really are
Monday, March 15, 2010
Reality check:
http://bit.ly/dgmJvN
“you're prohibited from distributing it (the app) through competing app stores like Cydia or Rock Your Phone”
Monday, March 15, 2010
Everybody wants his/her share
http://bit.ly/dgmJvN
7Monday, March 15, 2010
Some things you actually don’t have to share, weird huh?
Monday, March 15, 2010
Showtime - a strong case for JavaScript
http://yourappshop.com - NSFW
App store without Apple
Monday, March 15, 2010
qWhat companies like Apple don’t like
wa
Monday, March 15, 2010
qWhat companies like Apple don’t like
wa
Monday, March 15, 2010
qWhat companies like Apple don’t like
wa
Monday, March 15, 2010
What companies like Apple don’t like
Monday, March 15, 2010
wWhat companies like Apple don’t like
Monday, March 15, 2010
What companies like Apple don’t like
Monday, March 15, 2010
Your Appshop facts
Monday, March 15, 2010
Your Appshop facts
• 100% HTML5
Monday, March 15, 2010
Your Appshop facts
• 100% HTML5
• Apps work offline
Monday, March 15, 2010
Your Appshop facts
• 100% HTML5
• Apps work offline
• 12.000.000 downloads since december 2009
Monday, March 15, 2010
Your Appshop facts
• 100% HTML5
• Apps work offline
• 12.000.000 downloads since december 2009
• Payment gateway
Monday, March 15, 2010
Your Appshop facts
• 100% HTML5
• Apps work offline
• 12.000.000 downloads since december 2009
• Payment gateway
• It feels native
Monday, March 15, 2010
Device APIs
What else is happening in the mobile world?
Monday, March 15, 2010
mCamera APIs (AR anyone?)
Monday, March 15, 2010
SCalendar APIs
Monday, March 15, 2010
vAccess to local data
Monday, March 15, 2010
Payment integration
Monday, March 15, 2010
KPayment integration
Monday, March 15, 2010
FMore device APIs
q0
Monday, March 15, 2010
It’s all in the works
Monday, March 15, 2010
It’s all in the works
• JIL - http://jil.orgVodafone, Verizon Wireless, China Mobile and Softbank Mobile (1.1 billion customers)
Monday, March 15, 2010
It’s all in the works
• JIL - http://jil.orgVodafone, Verizon Wireless, China Mobile and Softbank Mobile (1.1 billion customers)
• BONDI - http://bondi.omtp.org
Monday, March 15, 2010
It’s all in the works
• JIL - http://jil.orgVodafone, Verizon Wireless, China Mobile and Softbank Mobile (1.1 billion customers)
• BONDI - http://bondi.omtp.org
• W3C (Device APIs) - http://bit.ly/bdm4wv
Monday, March 15, 2010
Pulse check
HumanApi - http://bit.ly/92lpyR
j Ka
a
Monday, March 15, 2010
• Timetravel
• Why mobile JavaScript development?
• Tales of a mobile dev (EventNinja)
• Outlook
Agenda
Monday, March 15, 2010
EventNinja
Tales of a mobile dev
Monday, March 15, 2010
Monday, March 15, 2010
Monday, March 15, 2010
http://www.eventninja.net
Monday, March 15, 2010
Monday, March 15, 2010
Monday, March 15, 2010
Mobile prototyping
Monday, March 15, 2010
The cloud
Monday, March 15, 2010
Google Calendar
Monday, March 15, 2010
Monday, March 15, 2010
Monday, March 15, 2010
The architecture of EventNinja
Monday, March 15, 2010
• PhoneGap (http://phonegap.com)
• W3C Widgets (Opera)
• (Others) Palm
Runtimes used
Monday, March 15, 2010
Appstore coverage
Monday, March 15, 2010
Dojo
Monday, March 15, 2010
Performance
Monday, March 15, 2010
Why performance?
• Datavolume (Someone has to pay for it)
• Like or Dislike - mobile apps get thrown away very quickly
What we do has direct Impact!
Monday, March 15, 2010
Dojo’s toolchain
Monday, March 15, 2010
Dojos Buildsystem
Monday, March 15, 2010
• Minify and shrink JavaScript
• Build into single or several files
• Build and concatenate CSS
• Optimize images
Monday, March 15, 2010
Monday, March 15, 2010
Monday, March 15, 2010
Other Dojo goodness
Monday, March 15, 2010
• Class inheritance - dojo.declare
Other Dojo goodness
Monday, March 15, 2010
• Class inheritance - dojo.declare
• Dojos event system - dojo.connect
Other Dojo goodness
Monday, March 15, 2010
• Class inheritance - dojo.declare
• Dojos event system - dojo.connect
• Powerful extendable query engine - dojo.query
Other Dojo goodness
Monday, March 15, 2010
• Class inheritance - dojo.declare
• Dojos event system - dojo.connect
• Powerful extendable query engine - dojo.query
• Much much more (See Dylans talk today)
Other Dojo goodness
Monday, March 15, 2010
document.getElement...
But!
Don’t forget about “real” JavaScript
Monday, March 15, 2010
What we have learned
Monday, March 15, 2010
Code simple!
Monday, March 15, 2010
Step back!
Especially if the desktop browser was your runtime of the past
Monday, March 15, 2010
Semantics?A short story
Monday, March 15, 2010
Monday, March 15, 2010
<ul> <li>Hi</li></ul>
Monday, March 15, 2010
<ul> <li>Hi</li></ul>
<ul> <li><a href=””>Hi</a></li></ul>
Monday, March 15, 2010
<ul> <li>Hi</li></ul>
<ul> <li><a href=””>Hi</a></li></ul>
<a href=””>Hi</a>Monday, March 15, 2010
IE anyone?
Monday, March 15, 2010
IE anyone?
Monday, March 15, 2010
IE anyone?
Monday, March 15, 2010
Do what your runtime can do
Not more
Monday, March 15, 2010
Communications
Monday, March 15, 2010
• XMLHttpRequest?
Communications
Monday, March 15, 2010
• XMLHttpRequest?
• JSONP / JSON?
Communications
Monday, March 15, 2010
Monday, March 15, 2010
Look ahead
Monday, March 15, 2010
Look aheadBut don’t implement
everything
Monday, March 15, 2010
Scaling and ppiBe aware
Monday, March 15, 2010
Testing
Monday, March 15, 2010
The browser is your friend
Monday, March 15, 2010
The browser is your friend
Really
Monday, March 15, 2010
The browser is your friend
ReallyReally
Monday, March 15, 2010
The browser is your friend
ReallyReallyReally
Monday, March 15, 2010
The browser is your friend
ReallyReallyReallyReally
Monday, March 15, 2010
The browser is your friend
ReallyReallyReallyReallyReally
Monday, March 15, 2010
Set headers... and steal
Send iPhone headers from within Firefox for exampleMonday, March 15, 2010
Hmmmm, alert(“Hi”);
Monday, March 15, 2010
Automate
Create routines
Monday, March 15, 2010
Agenda
• Timetravel
• Why mobile JavaScript development?
• Tales of a mobile dev (EventNinja)
• Outlook
Monday, March 15, 2010
Better browsers
Monday, March 15, 2010
Faster devices
Monday, March 15, 2010
More market coverage
Monday, March 15, 2010
Richer device APIs
Monday, March 15, 2010
Pulse check
HumanApi - http://bit.ly/92lpyR
j Ka
a
Monday, March 15, 2010
thx to @wolframkriesing for the link
Other advantages of mobile development
Monday, March 15, 2010
thx to @wolframkriesing for the link
Other advantages of mobile development
Monday, March 15, 2010
Share your knowledgeMobile JavaScript development is young
Monday, March 15, 2010
@nonken | @uxebu
@dojo | @dojocampus
Monday, March 15, 2010
top related