Mobile JavaScript Development or HTML5 apps Nikolai Onken - uxebu - - PowerPoint PPT Presentation

▶

mobile javascript development or html5 apps

Mobile JavaScript Development or HTML5 apps Nikolai Onken - uxebu - - PowerPoint PPT Presentation

Nov 28, 2023 172 likes •1.44k views

Mobile JavaScript Development or HTML5 apps Nikolai 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,

slide-1

SLIDE 1

Mobile JavaScript Development

r HTML5 apps

Nikolai Onken - uxebu Consulting Ltd. & Co. KG

Monday, March 15, 2010

slide-2

SLIDE 2

Hi all

@nonken | @uxebu

Monday, March 15, 2010

slide-3

SLIDE 3

We open the mobile web

Monday, March 15, 2010

slide-4

SLIDE 4

Agenda

Monday, March 15, 2010

slide-5

SLIDE 5

Agenda

Timetravel

Monday, March 15, 2010

slide-6

SLIDE 6

Agenda

Timetravel
Why mobile JavaScript development?

Monday, March 15, 2010

slide-7

SLIDE 7

Agenda

Timetravel
Why mobile JavaScript development?
Tales of a mobile dev (EventNinja)

Monday, March 15, 2010

slide-8

SLIDE 8

Agenda

Timetravel
Why mobile JavaScript development?
Tales of a mobile dev (EventNinja)
Outlook

Monday, March 15, 2010

slide-9

SLIDE 9

Experiment

An ECG written in JavaScript/HTML/CSS

Monday, March 15, 2010

slide-10

SLIDE 10

Pulse check

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

j K

a

a

Monday, March 15, 2010

slide-11

SLIDE 11

Agenda

Timetravel
Why mobile JavaScript development?
Tales of a mobile dev (EventNinja)
Outlook

Monday, March 15, 2010

slide-12

SLIDE 12 Monday, March 15, 2010

slide-13

SLIDE 13 Monday, March 15, 2010

slide-14

SLIDE 14 Monday, March 15, 2010

slide-15

SLIDE 15 Monday, March 15, 2010

slide-16

SLIDE 16

2010

Monday, March 15, 2010

slide-17

SLIDE 17

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

2010

Monday, March 15, 2010

slide-18

SLIDE 18

Eric Schmidt (CEO Google Inc.): “Mobile first”
Steve Jobs (CEO Apple Inc.): “Apple is a mobile

devices company.”

2010

Monday, March 15, 2010

slide-19

SLIDE 19

Mobile browsing?

K h

WWW

$

Monday, March 15, 2010

slide-20

SLIDE 20

Mobile browsing?

K h

WWW

$

Monday, March 15, 2010

slide-21

SLIDE 21

The past

K h KKKKKKKK

O

Monday, March 15, 2010

slide-22

SLIDE 22

The future

K h h h h h h h h h

O

Monday, March 15, 2010

slide-23

SLIDE 23

Lets look at some very cool stuff http://bit.ly/bqvQIG

Monday, March 15, 2010

slide-24

SLIDE 24

Pulse check

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

j K

a

a

Monday, March 15, 2010

slide-25

SLIDE 25

Agenda

Timetravel
Why mobile JavaScript development?
Tales of a mobile developmentev

(EventNinja)

Outlook

Monday, March 15, 2010

slide-26

SLIDE 26

Mobile market

http://bit.ly/bPDn5b

5% 2% 3% 3% 4% 4% 5% 5% 10% 20% 38% Nokia Samsung LG Sony Ericsson Motorola ZTE Kyocera RIM Sharp Apple Other Monday, March 15, 2010

slide-27

SLIDE 27

Smartphone market

http://bit.ly/bPDn5b

20% 5% 15% 20% 40% Nokia RIM Apple HTC Others Monday, March 15, 2010

slide-28

SLIDE 28

d

== 2%

Is this our (developers) world?

Monday, March 15, 2010

slide-29

SLIDE 29

Seriously?

Are we happy with a 2% market share?

Monday, March 15, 2010

slide-30

SLIDE 30

ƒ a

==

How open platforms really are

Monday, March 15, 2010

slide-31

SLIDE 31

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

slide-32

SLIDE 32

Everybody wants his/her share

http://bit.ly/dgmJvN

7

Monday, March 15, 2010

slide-33

SLIDE 33

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

Monday, March 15, 2010

slide-34

SLIDE 34

Showtime - a strong case for JavaScript

http://yourappshop.com - NSFW App store without Apple

Monday, March 15, 2010

slide-35

SLIDE 35

q

What companies like Apple don’t likew

a

Monday, March 15, 2010

slide-36

SLIDE 36

q

What companies like Apple don’t like

w

a

Monday, March 15, 2010

slide-37

SLIDE 37

q

What companies like Apple don’t like

w

a

Monday, March 15, 2010

slide-38

SLIDE 38

What companies like Apple don’t like

Monday, March 15, 2010

slide-39

SLIDE 39

w

What companies like Apple don’t like

Monday, March 15, 2010

slide-40

SLIDE 40

What companies like Apple don’t like

Monday, March 15, 2010

slide-41

SLIDE 41

Your Appshop facts

Monday, March 15, 2010

slide-42

SLIDE 42

Your Appshop facts

100% HTML5

Monday, March 15, 2010

slide-43

SLIDE 43

Your Appshop facts

100% HTML5
Apps work offline

Monday, March 15, 2010

slide-44

SLIDE 44

Your Appshop facts

100% HTML5
Apps work offline
12.000.000 downloads since december 2009

Monday, March 15, 2010

slide-45

SLIDE 45

Your Appshop facts

100% HTML5
Apps work offline
12.000.000 downloads since december 2009
Payment gateway

Monday, March 15, 2010

slide-46

SLIDE 46

Your Appshop facts

100% HTML5
Apps work offline
12.000.000 downloads since december 2009
Payment gateway
It feels native

Monday, March 15, 2010

slide-47

SLIDE 47

Device APIs

What else is happening in the mobile world?

Monday, March 15, 2010

slide-48

SLIDE 48

m

Camera APIs (AR anyone?)

Monday, March 15, 2010

slide-49

SLIDE 49

S

Calendar APIs

Monday, March 15, 2010

slide-50

SLIDE 50

v

Access to local data

Monday, March 15, 2010

slide-51

SLIDE 51

Payment integration

Monday, March 15, 2010

slide-52

SLIDE 52

K

Payment integration

Monday, March 15, 2010

slide-53

SLIDE 53

F

More device APIs

q0

Monday, March 15, 2010

slide-54

SLIDE 54

It’s all in the works

Monday, March 15, 2010

slide-55

SLIDE 55

It’s all in the works

JIL - http://jil.org

Vodafone, Verizon Wireless, China Mobile and Softbank Mobile (1.1 billion customers) Monday, March 15, 2010

slide-56

SLIDE 56

It’s all in the works

JIL - http://jil.org

Vodafone, Verizon Wireless, China Mobile and Softbank Mobile (1.1 billion customers)

BONDI - http://bondi.omtp.org

Monday, March 15, 2010

slide-57

SLIDE 57

It’s all in the works

JIL - http://jil.org

Vodafone, 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

slide-58

SLIDE 58

Pulse check

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

j K

a

a

Monday, March 15, 2010

slide-59

SLIDE 59

Timetravel
Why mobile JavaScript development?
Tales of a mobile dev (EventNinja)
Outlook

Agenda

Monday, March 15, 2010

slide-60

SLIDE 60

EventNinja

Tales of a mobile dev

Monday, March 15, 2010

slide-61

SLIDE 61 Monday, March 15, 2010

slide-62

SLIDE 62 Monday, March 15, 2010

slide-63

SLIDE 63

http://www.eventninja.net

Monday, March 15, 2010

slide-64

SLIDE 64 Monday, March 15, 2010

slide-65

SLIDE 65 Monday, March 15, 2010

slide-66

SLIDE 66

Mobile prototyping

Monday, March 15, 2010

slide-67

SLIDE 67

The cloud

Monday, March 15, 2010

slide-68

SLIDE 68

Google Calendar

Monday, March 15, 2010

slide-69

SLIDE 69 Monday, March 15, 2010

slide-70

SLIDE 70 Monday, March 15, 2010

slide-71

SLIDE 71

The architecture of EventNinja

Monday, March 15, 2010

slide-72

SLIDE 72

PhoneGap (http://phonegap.com)
W3C Widgets (Opera)
(Others) Palm

Runtimes used

Monday, March 15, 2010

slide-73

SLIDE 73

Appstore coverage

Monday, March 15, 2010

slide-74

SLIDE 74

Dojo

Monday, March 15, 2010

slide-75

SLIDE 75

Performance

Monday, March 15, 2010

slide-76

SLIDE 76

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

slide-77

SLIDE 77

Dojo’s toolchain

Monday, March 15, 2010

slide-78

SLIDE 78

Dojos Buildsystem

Monday, March 15, 2010

slide-79

SLIDE 79

Minify and shrink JavaScript
Build into single or several files
Build and concatenate CSS
Optimize images

Monday, March 15, 2010

slide-80

SLIDE 80 Monday, March 15, 2010

slide-81

SLIDE 81 Monday, March 15, 2010

slide-82

SLIDE 82

Other Dojo goodness

Monday, March 15, 2010

slide-83

SLIDE 83

Class inheritance - dojo.declare

Other Dojo goodness

Monday, March 15, 2010

slide-84

SLIDE 84

Class inheritance - dojo.declare
Dojos event system - dojo.connect

Other Dojo goodness

Monday, March 15, 2010

slide-85

SLIDE 85

Class inheritance - dojo.declare
Dojos event system - dojo.connect
Powerful extendable query engine -

dojo.query

Other Dojo goodness

Monday, March 15, 2010

slide-86

SLIDE 86

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

slide-87

SLIDE 87

document.getElement...

But!

Don’t forget about “real” JavaScript

Monday, March 15, 2010

slide-88

SLIDE 88

What we have learned

Monday, March 15, 2010

slide-89

SLIDE 89

Code simple!

Monday, March 15, 2010

slide-90

SLIDE 90

Step back!

Especially if the desktop browser was your runtime of the past

Monday, March 15, 2010

slide-91

SLIDE 91

Semantics?

A short story

Monday, March 15, 2010

slide-92

SLIDE 92 Monday, March 15, 2010

slide-93

SLIDE 93

<ul> <li>Hi</li> </ul>

Monday, March 15, 2010

slide-94

SLIDE 94

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

Monday, March 15, 2010

slide-95

SLIDE 95

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

Monday, March 15, 2010

slide-96

SLIDE 96

IE anyone?

Monday, March 15, 2010

slide-97

SLIDE 97

IE anyone?

Monday, March 15, 2010

slide-98

SLIDE 98

IE anyone?

Monday, March 15, 2010

slide-99

SLIDE 99

Do what your runtime can do

Not more

Monday, March 15, 2010

slide-100

SLIDE 100

Communications

Monday, March 15, 2010

slide-101

SLIDE 101

XMLHttpRequest?

Communications

Monday, March 15, 2010

slide-102

SLIDE 102

XMLHttpRequest?
JSONP / JSON?

Communications

Monday, March 15, 2010

slide-103

SLIDE 103 Monday, March 15, 2010

slide-104

SLIDE 104

Look ahead

Monday, March 15, 2010

slide-105

SLIDE 105

Look ahead But don’t implement everything

Monday, March 15, 2010

slide-106

SLIDE 106

Scaling and ppi

Be aware

Monday, March 15, 2010

slide-107

SLIDE 107

Testing

Monday, March 15, 2010

slide-108

SLIDE 108

The browser is your friend

Monday, March 15, 2010

slide-109

SLIDE 109

The browser is your friend

Really

Monday, March 15, 2010

slide-110

SLIDE 110

The browser is your friend

Really Really

Monday, March 15, 2010

slide-111

SLIDE 111

The browser is your friend

Really Really Really

Monday, March 15, 2010

slide-112

SLIDE 112

The browser is your friend

Really Really Really Really

Monday, March 15, 2010

slide-113

SLIDE 113

The browser is your friend

Really Really Really Really Really

Monday, March 15, 2010

slide-114

SLIDE 114

Set headers... and steal

Send iPhone headers from within Firefox for example

Monday, March 15, 2010

slide-115

SLIDE 115

Hmmmm, alert(“Hi”);

Monday, March 15, 2010

slide-116

SLIDE 116

Automate Create routines

Monday, March 15, 2010

slide-117

SLIDE 117

Agenda

Timetravel
Why mobile JavaScript development?
Tales of a mobile dev (EventNinja)
Outlook

Monday, March 15, 2010

slide-118

SLIDE 118

Better browsers

Monday, March 15, 2010

slide-119

SLIDE 119

Faster devices

Monday, March 15, 2010

slide-120

SLIDE 120

More market coverage

Monday, March 15, 2010

slide-121

SLIDE 121

Richer device APIs

Monday, March 15, 2010

slide-122

SLIDE 122

Pulse check

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

j K

a

a

Monday, March 15, 2010

slide-123

SLIDE 123 thx to @wolframkriesing for the link

Other advantages of mobile development

Monday, March 15, 2010

slide-124

SLIDE 124 thx to @wolframkriesing for the link

Other advantages of mobile development

Monday, March 15, 2010

slide-125

SLIDE 125

Share your knowledge

Mobile JavaScript development is young

Monday, March 15, 2010

slide-126

SLIDE 126

@nonken | @uxebu @dojo | @dojocampus

Monday, March 15, 2010