Best Practices - Mobile Developer Summit

Best Practices
in mobile cross platform development
@wolframkriesing
@uxebu
Donnerstag, 11. November 2010

We open the mobile web.

http://www.flickr.com/photos/andresrueda/2276197032/

JavaScript

ONLY

Use Namespaces!
•globals suck
•objects as namespace
•easy mapping
•directory structure comes by itself

Use Namespaces!
shop.page.cart.getItems() javascript
http://shop.de/api/cart/items/ URL
(r'^cart/items/$', views.cart.get_items), mapper
def get_items(request):
item_ids = request.POST.list("ids")
code

Patterns
•solve your problem
•solve it again
•copy+paste•
•you got a pattern
•abstract it
•reuse the pattern
AJAX

Let's code together!

for (var i=0; i<s.length; i++)
if (i%2) node.innerHTML = „is even“
else node.innerHTML = „is odd“;
for (var i=0, len=s.length; i<len; i++){
if (i%2){
node.innerHTML = „is even“;
} else {
node.innerHTML = „is odd“;
}
}
if (i%2==0)
node.innerHTML = „is even“;
else
node.innerHTML = „is odd“;
node.innerHTML = i%2 ? „is even“ : „is odd“;

Coding Style, etc.
•less to think
•all code looks the same
•do code, don‘t style
•stay focused

But!

d.declare(obj, null, {
func1:function(){}
});
var obj = {};
obj.func1 = function(){}
var obj = new Object();
Object.prototype.func1 = function(){}
var obj = new function(){
arguments.callee.prototype.func1 = function(){}
}

Code Folding

Template

Templates
•faster
•no typos
•for the whole team
•docs built in
•copy with pride

Comment out

JSLint
•finds IE traps (trailing comma)
•gives JS insight (parseInt, ===, ...)
•understand type coercion
•finds missing var statements
•undefined vars, typos (myVar vs. myvar)
http://jslint.com
http://wolfram.kriesing.de/blog/index.php/2007/understanding-jslint-output
http://www.danhulton.com/blog/2008/01/16/integrate-js-lint-into-komodo-edit/

Try it first (1)
d.query("h2")
.style({color:"red"})
.anim({left:300}, 500)
Are you sure this works?
d.query("h2")
.style({position:"absolute", color:"red"})
.anim({left:300}, 500)
NO
save one reload!

Try it first (2)
•try the code in FireBug first
•learn more about your library
•play with the code
•find better ways?

alert, console.log
•alert hell? use confirm!
•numbered console.log

*.toString()

debugger;

Best Practices
• test on the desktop
• try-catch a lot
• alert() IS your friend!
• simplify your CSS

EventNinja

Permissions

Extend

First Version

Backend

Object Browser

Open Source
•a developer must have
•developer.vodafone.com
http://developer.vodafone.com/object-browser
•github
http://github.com/wolframkriesing/object-browser

Other sources
•google your problem
•talk to a colleague
•sleep over it

Wolfram Kriesing
http://apparat.io
http://embedjs.org
Thank you

Best Practices - Mobile Developer Summit

More Related Content

What's hot (6)

Viewers also liked (8)

Similar to Best Practices - Mobile Developer Summit (20)

More from wolframkriesing (20)

Recently uploaded (20)

Best Practices - Mobile Developer Summit