Best Practices - Mobile Developer Summit

Best Practicesin 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


http://shop.de/api/cart/items/

http://shop.de/api/cart/items/

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“; }}

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

for (var i=0; i<s.length; i++) 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


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/


http://jslint.com

http://jslint.com





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

• test on the desktop

• 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.comhttp://developer.vodafone.com/object-browser

•githubhttp://github.com/wolframkriesing/object-browser


http://developer.vodafone.com/object-browser

http://developer.vodafone.com/object-browser

Other sources

• google your problem

• talk to a colleague

• sleep over it


Wolfram Kriesing

http://apparat.io

http://embedjs.org

Thank you


Technology

Best Practices - Mobile Developer Summit