Mobile JavaScript Development - QCon 2010

Mobile JavaScript Development

or HTML5 appsNikolai Onken - uxebu Consulting Ltd. & Co. KG

Monday, March 15, 2010

Hi all@nonken | @uxebu


We open the mobile web


Agenda


Agenda

• Timetravel


Agenda

• Timetravel

• Why mobile JavaScript development?


Agenda

• Timetravel


• Tales of a mobile dev (EventNinja)


Agenda

• Timetravel



• Outlook


Experiment

An ECG written in JavaScript/HTML/CSS


Pulse check

HumanApi - http://bit.ly/92lpyR

j Ka

a


http://www.eff.org/deeplinks/2010/03/iphone-developer-program-license-agreement-all


Agenda

• Timetravel



• Outlook


2010


• Eric Schmidt (CEO Google Inc.): “Mobile first”

2010


• Eric Schmidt (CEO Google Inc.): “Mobile first”

• Steve Jobs (CEO Apple Inc.): “Apple is a mobile devices company.”

2010


Mobile browsing?

KhWWW

$


Mobile browsing?

Kh WWW

$


The past

K

h

KKKKKKKKO


The future

K

hhhhhhhhhO


Lets look at some very cool stuff

http://bit.ly/bqvQIG




Pulse check


j Ka

a




Agenda

• Timetravel


• Tales of a mobile developmentev (EventNinja)

• Outlook


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




Smartphone market

http://bit.ly/bPDn5b

20%

5%

15%

20%

40%

Nokia RIM Apple HTC Others




d == 2%

Is this our (developers) world?


Seriously?

Are we happy with a 2% market share?


ƒ a==

How open platforms really are


Reality check:

http://bit.ly/dgmJvN

“you're prohibited from distributing it (the app) through competing app stores like Cydia or Rock Your Phone”




http://cydia.saurik.com/

http://cydia.saurik.com/

http://rockyourphone.com/

http://rockyourphone.com/

Everybody wants his/her share

http://bit.ly/dgmJvN

7Monday, March 15, 2010



Some things you actually don’t have to share, weird huh?


Showtime - a strong case for JavaScript

http://yourappshop.com - NSFW

App store without Apple


http://yourappshop.com

http://yourappshop.com

qWhat companies like Apple don’t like

wa


What companies like Apple don’t like


wWhat companies like Apple don’t like


What companies like Apple don’t like


Your Appshop facts


Your Appshop facts

• 100% HTML5


Your Appshop facts

• 100% HTML5

• Apps work offline


Your Appshop facts

• 100% HTML5


• 12.000.000 downloads since december 2009


Your Appshop facts

• 100% HTML5



• Payment gateway


Your Appshop facts

• 100% HTML5



• Payment gateway

• It feels native


Device APIs

What else is happening in the mobile world?


mCamera APIs (AR anyone?)


SCalendar APIs


vAccess to local data


Payment integration


KPayment integration


FMore device APIs

q0


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




• BONDI - http://bondi.omtp.org

• W3C (Device APIs) - http://bit.ly/bdm4wv


Pulse check


j Ka

a




• Timetravel



• Outlook

Agenda


EventNinja

Tales of a mobile dev


http://www.eventninja.net




Mobile prototyping


The cloud


Google Calendar


The architecture of EventNinja


• PhoneGap (http://phonegap.com)

• W3C Widgets (Opera)

• (Others) Palm

Runtimes used


Appstore coverage


Dojo


Performance


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!


Dojo’s toolchain


Dojos Buildsystem


• Minify and shrink JavaScript

• Build into single or several files

• Build and concatenate CSS

• Optimize images


Other Dojo goodness


• Class inheritance - dojo.declare

Other Dojo goodness



• Dojos event system - dojo.connect

Other Dojo goodness




• Powerful extendable query engine - dojo.query

Other Dojo goodness




• Powerful extendable query engine - dojo.query

• Much much more (See Dylans talk today)

Other Dojo goodness


document.getElement...

But!

Don’t forget about “real” JavaScript


What we have learned


Code simple!


Step back!

Especially if the desktop browser was your runtime of the past


Semantics?A short story



<ul> <li><a href=””>Hi</a></li></ul>

<a href=””>Hi</a>Monday, March 15, 2010

IE anyone?


Do what your runtime can do

Not more


Communications


• XMLHttpRequest?

Communications


• XMLHttpRequest?

• JSONP / JSON?

Communications


Look ahead


Look aheadBut don’t implement

everything


Scaling and ppiBe aware


Testing


The browser is your friend



Really



ReallyReally



ReallyReallyReally



ReallyReallyReallyReally



ReallyReallyReallyReallyReally


Set headers... and steal

Send iPhone headers from within Firefox for exampleMonday, March 15, 2010

Hmmmm, alert(“Hi”);


Automate

Create routines


Agenda

• Timetravel



• Outlook


Better browsers


Faster devices


More market coverage


Richer device APIs


Pulse check


j Ka

a




thx to @wolframkriesing for the link

Other advantages of mobile development


Share your knowledgeMobile JavaScript development is young


@nonken | @uxebu

@dojo | @dojocampus


Mobile JavaScript Development - QCon 2010

Technology

Transcript of Mobile JavaScript Development - QCon 2010