best practices - mobile developer summit
Post on 01-Nov-2014
798 Views
Preview:
DESCRIPTION
TRANSCRIPT
Best Practicesin mobile cross platform development
@wolframkriesing@uxebu
Donnerstag, 11. November 2010
We open the mobile web.
Donnerstag, 11. November 2010
http://www.flickr.com/photos/andresrueda/2276197032/
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
JavaScript
Donnerstag, 11. November 2010
ONLY
Donnerstag, 11. November 2010
Use Namespaces!
• globals suck
• objects as namespace
• easy mapping
• directory structure comes by itself
Donnerstag, 11. November 2010
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
Donnerstag, 11. November 2010
Patterns
• solve your problem
• solve it again
• copy+paste•
• you got a pattern
• abstract it
• reuse the pattern
AJAX
Donnerstag, 11. November 2010
Let's code together!
Donnerstag, 11. November 2010
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“;
Donnerstag, 11. November 2010
Coding Style, etc.
• less to think
• all code looks the same
• do code, don‘t style
• stay focused
Donnerstag, 11. November 2010
But!
Donnerstag, 11. November 2010
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(){}}
Donnerstag, 11. November 2010
Code Folding
Donnerstag, 11. November 2010
Template
Donnerstag, 11. November 2010
Templates
• faster
• no typos
• for the whole team
• docs built in
• copy with pride
Donnerstag, 11. November 2010
Comment out
Donnerstag, 11. November 2010
Comment out
Donnerstag, 11. November 2010
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/
Donnerstag, 11. November 2010
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!
Donnerstag, 11. November 2010
Try it first (2)
• try the code in FireBug first
• learn more about your library
• play with the code
• find better ways?
Donnerstag, 11. November 2010
alert, console.log
• alert hell? use confirm!
• numbered console.log
Donnerstag, 11. November 2010
*.toString()
Donnerstag, 11. November 2010
debugger;
Donnerstag, 11. November 2010
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
Donnerstag, 11. November 2010
EventNinja
Donnerstag, 11. November 2010
Permissions
Donnerstag, 11. November 2010
Extend
Donnerstag, 11. November 2010
First Version
Donnerstag, 11. November 2010
Backend
Donnerstag, 11. November 2010
Object Browser
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Donnerstag, 11. November 2010
Open Source
•a developer must have
•developer.vodafone.comhttp://developer.vodafone.com/object-browser
•githubhttp://github.com/wolframkriesing/object-browser
Donnerstag, 11. November 2010
Other sources
• google your problem
• talk to a colleague
• sleep over it
Donnerstag, 11. November 2010
Wolfram Kriesing
http://apparat.io
http://embedjs.org
Thank you
Donnerstag, 11. November 2010
top related