the hitchhiker's guide to mobile development

100
The hitchhiker's guide to mobile development Mobilism 2011 Nikolai Onken uxebu Sunday, May 15, 2011

Upload: nikolai-onken

Post on 27-Jan-2015

120 views

Category:

Technology


5 download

DESCRIPTION

The slides from my talk at the mobilism 2011

TRANSCRIPT

Page 1: The Hitchhiker's guide to mobile development

The hitchhiker's guide to mobile development

Mobilism 2011

Nikolai Onkenuxebu

Sunday, May 15, 2011

Page 2: The Hitchhiker's guide to mobile development

@nonken

Sunday, May 15, 2011

Page 3: The Hitchhiker's guide to mobile development

Sunday, May 15, 2011

Page 4: The Hitchhiker's guide to mobile development

We open the mobile web.

Sunday, May 15, 2011

Page 5: The Hitchhiker's guide to mobile development

How you totally should do it

Sunday, May 15, 2011

Page 6: The Hitchhiker's guide to mobile development

Lets look at

Sunday, May 15, 2011

Page 7: The Hitchhiker's guide to mobile development

Lets look at

1. Current state of mobile dev

Sunday, May 15, 2011

Page 8: The Hitchhiker's guide to mobile development

Lets look at

1. Current state of mobile dev

2. Coding

Sunday, May 15, 2011

Page 9: The Hitchhiker's guide to mobile development

Lets look at

1. Current state of mobile dev

2. Coding

3. Call for action

Sunday, May 15, 2011

Page 10: The Hitchhiker's guide to mobile development

Current state of mobile dev

Sunday, May 15, 2011

Page 11: The Hitchhiker's guide to mobile development

State of mobile dev: runtimes

Sunday, May 15, 2011

Page 12: The Hitchhiker's guide to mobile development

State of mobile dev: runtimes

Sunday, May 15, 2011

Page 13: The Hitchhiker's guide to mobile development

State of mobile dev: runtimes

Sunday, May 15, 2011

Page 14: The Hitchhiker's guide to mobile development

State of mobile dev: runtimes

Sunday, May 15, 2011

Page 15: The Hitchhiker's guide to mobile development

State of mobile dev: runtimes

Sunday, May 15, 2011

Page 16: The Hitchhiker's guide to mobile development

State of mobile dev: runtimes

Sunday, May 15, 2011

Page 17: The Hitchhiker's guide to mobile development

State of mobile dev: runtimes

Sunday, May 15, 2011

Page 18: The Hitchhiker's guide to mobile development

State of mobile dev: runtimes

Sunday, May 15, 2011

Page 19: The Hitchhiker's guide to mobile development

State of mobile dev: runtimes

Sunday, May 15, 2011

Page 20: The Hitchhiker's guide to mobile development

State of mobile dev: runtimes

Sunday, May 15, 2011

Page 21: The Hitchhiker's guide to mobile development

State of mobile dev: runtimes

Sunday, May 15, 2011

Page 22: The Hitchhiker's guide to mobile development

State of mobile dev: runtimes I would use

Sunday, May 15, 2011

Page 23: The Hitchhiker's guide to mobile development

State of mobile dev: runtimes I would use

Sunday, May 15, 2011

Page 24: The Hitchhiker's guide to mobile development

State of mobile dev: debugging

Sunday, May 15, 2011

Page 25: The Hitchhiker's guide to mobile development

http://bit.ly/chrome-remote

State of mobile dev: debugging

Sunday, May 15, 2011

Page 26: The Hitchhiker's guide to mobile development

http://bit.ly/weinre

State of mobile dev: debugging

Sunday, May 15, 2011

Page 27: The Hitchhiker's guide to mobile development

http://jsconsole.com

State of mobile dev: debugging

Sunday, May 15, 2011

Page 28: The Hitchhiker's guide to mobile development

http://bit.ly/o-dragonfly

State of mobile dev: debugging

Sunday, May 15, 2011

Page 29: The Hitchhiker's guide to mobile development

http://jsdebugger.appspot.com

State of mobile dev: debugging

Sunday, May 15, 2011

Page 30: The Hitchhiker's guide to mobile development

http://zeonjs.com

State of mobile dev: debugging

Sunday, May 15, 2011

Page 31: The Hitchhiker's guide to mobile development

State of mobile dev: debugging

Sunday, May 15, 2011

Page 32: The Hitchhiker's guide to mobile development

http://cloud9ide.com

State of mobile dev: editors

Sunday, May 15, 2011

Page 33: The Hitchhiker's guide to mobile development

http://cloud9ide.com

State of mobile dev: editors

Sunday, May 15, 2011

Page 34: The Hitchhiker's guide to mobile development

SubEthaEdit FTW

State of mobile dev: debugging

Sunday, May 15, 2011

Page 35: The Hitchhiker's guide to mobile development

Sunday, May 15, 2011

Page 36: The Hitchhiker's guide to mobile development

Sunday, May 15, 2011

Page 37: The Hitchhiker's guide to mobile development

Sunday, May 15, 2011

Page 38: The Hitchhiker's guide to mobile development

Sunday, May 15, 2011

Page 39: The Hitchhiker's guide to mobile development

http://apparat.io

http://build.phonegap.com

https://github.com/brianleroux/cordova

State of mobile dev: build services

Sunday, May 15, 2011

Page 40: The Hitchhiker's guide to mobile development

http://apparat.io

http://build.phonegap.com

https://github.com/brianleroux/cordova

State of mobile dev: build services

Sunday, May 15, 2011

Page 41: The Hitchhiker's guide to mobile development

http://apparat.io

State of mobile dev: build services

Sunday, May 15, 2011

Page 42: The Hitchhiker's guide to mobile development

http://apparat.io

State of mobile dev: build services

Sunday, May 15, 2011

Page 43: The Hitchhiker's guide to mobile development

http://apparat.io

State of mobile dev: build services

Sunday, May 15, 2011

Page 44: The Hitchhiker's guide to mobile development

http://ripple.tinyhippos.com/

https://github.com/vf/web-testsuite

State of mobile dev: testing

Sunday, May 15, 2011

Page 45: The Hitchhiker's guide to mobile development

http://ripple.tinyhippos.com/

https://github.com/vf/web-testsuite

State of mobile dev: testing

Sunday, May 15, 2011

Page 46: The Hitchhiker's guide to mobile development

http://distimo.com

State of mobile dev: reporting

Sunday, May 15, 2011

Page 47: The Hitchhiker's guide to mobile development

http://distimo.com

State of mobile dev: reporting

Sunday, May 15, 2011

Page 48: The Hitchhiker's guide to mobile development

State of mobile dev: app stores

yea right...

Sunday, May 15, 2011

Page 49: The Hitchhiker's guide to mobile development

State of mobile dev: app stores...

Probably more than just ‘mobile’ - chromestore anyone?

Sunday, May 15, 2011

Page 50: The Hitchhiker's guide to mobile development

State of mobile dev: libraries

tons of em

Sunday, May 15, 2011

Page 51: The Hitchhiker's guide to mobile development

State of mobile dev: libraries

but size matters!

Sunday, May 15, 2011

Page 52: The Hitchhiker's guide to mobile development

Coding

Sunday, May 15, 2011

Page 53: The Hitchhiker's guide to mobile development

Rewire our brains

Sunday, May 15, 2011

Page 54: The Hitchhiker's guide to mobile development

What about those libraries?

Sunday, May 15, 2011

Page 55: The Hitchhiker's guide to mobile development

Uh oh

Sunday, May 15, 2011

Page 56: The Hitchhiker's guide to mobile development

Uh oh

Sunday, May 15, 2011

Page 57: The Hitchhiker's guide to mobile development

Uh oh

Sunday, May 15, 2011

Page 58: The Hitchhiker's guide to mobile development

Uh oh

Sunday, May 15, 2011

Page 59: The Hitchhiker's guide to mobile development

Uh oh

Sunday, May 15, 2011

Page 60: The Hitchhiker's guide to mobile development

What about maintainability?

Sunday, May 15, 2011

Page 61: The Hitchhiker's guide to mobile development

Work with features and interfaces

Don’t branch your code

Sunday, May 15, 2011

Page 62: The Hitchhiker's guide to mobile development

Bad

Sunday, May 15, 2011

Page 63: The Hitchhiker's guide to mobile development

Really Bad

Sunday, May 15, 2011

Page 64: The Hitchhiker's guide to mobile development

Good

Sunday, May 15, 2011

Page 65: The Hitchhiker's guide to mobile development

Good

Sunday, May 15, 2011

Page 66: The Hitchhiker's guide to mobile development

Good

Sunday, May 15, 2011

Page 67: The Hitchhiker's guide to mobile development

Good

Sunday, May 15, 2011

Page 68: The Hitchhiker's guide to mobile development

http://embedjs.org

The DIY framework

Sunday, May 15, 2011

Page 69: The Hitchhiker's guide to mobile development

Sunday, May 15, 2011

Page 70: The Hitchhiker's guide to mobile development

Sunday, May 15, 2011

Page 71: The Hitchhiker's guide to mobile development

vs.

Sunday, May 15, 2011

Page 72: The Hitchhiker's guide to mobile development

vs.

Sunday, May 15, 2011

Page 73: The Hitchhiker's guide to mobile development

vs.

13 LOC

~200 LOC

Sunday, May 15, 2011

Page 74: The Hitchhiker's guide to mobile development

Enough code? Demo

Mobilism app

Sunday, May 15, 2011

Page 75: The Hitchhiker's guide to mobile development

Mixins hell yea

Sunday, May 15, 2011

Page 76: The Hitchhiker's guide to mobile development

• Different approach on event handling

• Simple, clear implementation

• Less overhead than the multi purpose event handlers such as dojo.connect

• More explicit than pub/sub 

• https://github.com/uxebu/delegate

Delegate

Sunday, May 15, 2011

Page 77: The Hitchhiker's guide to mobile development

Delegate

Sunday, May 15, 2011

Page 78: The Hitchhiker's guide to mobile development

Delegate

Sunday, May 15, 2011

Page 79: The Hitchhiker's guide to mobile development

Delegate

Sunday, May 15, 2011

Page 80: The Hitchhiker's guide to mobile development

Delegate

Sunday, May 15, 2011

Page 81: The Hitchhiker's guide to mobile development

• Mobilism Schedule (Object emitters)

https://github.com/nonken/mobilism2011

Example: Delegate

Sunday, May 15, 2011

Page 82: The Hitchhiker's guide to mobile development

• Based on delegate’s event handling

• No templating language!

• Objects emit events on state change

• Data binding takes care of modifying DOM 

Data binding

Sunday, May 15, 2011

Page 83: The Hitchhiker's guide to mobile development

Data binding

Sunday, May 15, 2011

Page 84: The Hitchhiker's guide to mobile development

Data binding

Sunday, May 15, 2011

Page 85: The Hitchhiker's guide to mobile development

Data binding

Sunday, May 15, 2011

Page 86: The Hitchhiker's guide to mobile development

• Mobilism schedule (Data binding)

Example

Sunday, May 15, 2011

Page 87: The Hitchhiker's guide to mobile development

• Binds native DOM events to object methods

DOM Events

Sunday, May 15, 2011

Page 88: The Hitchhiker's guide to mobile development

DOM Events

Sunday, May 15, 2011

Page 89: The Hitchhiker's guide to mobile development

DOM Events

Sunday, May 15, 2011

Page 90: The Hitchhiker's guide to mobile development

DOM Events

Sunday, May 15, 2011

Page 91: The Hitchhiker's guide to mobile development

DOM Events

Sunday, May 15, 2011

Page 92: The Hitchhiker's guide to mobile development

• Mobilism mobile app (DOM event binding)

Example DOM Events

Sunday, May 15, 2011

Page 93: The Hitchhiker's guide to mobile development

• Curve Desaster - the experiment

https://github.com/uxebu/curvedesaster

• No library

• Using only the Delegate mixin and a mixin helper

• wwtest / http://10.0.2.1:8080

Gaming

Sunday, May 15, 2011

Page 94: The Hitchhiker's guide to mobile development

Call for action

Sunday, May 15, 2011

Page 95: The Hitchhiker's guide to mobile development

What is happening right now?

• Fact: Native mobile is moving fast

• Bad: Apple disabled Nitro in WebView

• Good: Android now has an ADK

• Awesome: Chromestore now has payment APIs

• Woot: HP kicks ass, you can use node.js!

• ...

Sunday, May 15, 2011

Page 96: The Hitchhiker's guide to mobile development

How can we be of influence?

Sunday, May 15, 2011

Page 97: The Hitchhiker's guide to mobile development

Push PhoneGap to its limits

Sunday, May 15, 2011

Page 98: The Hitchhiker's guide to mobile development

Human APIs... in JavaScript!

Sunday, May 15, 2011

Page 99: The Hitchhiker's guide to mobile development

Questions?

Sunday, May 15, 2011

Page 100: The Hitchhiker's guide to mobile development

@nonken

http://uxebu.com - @uxebu

Wuut

Sunday, May 15, 2011