best practices - mobile developer summit
DESCRIPTION
I am trying to show some useful tricks and tips when developing mobile web apps.TRANSCRIPT
![Page 1: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/1.jpg)
Best Practicesin mobile cross platform development
@wolframkriesing@uxebu
Donnerstag, 11. November 2010
![Page 2: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/2.jpg)
We open the mobile web.
Donnerstag, 11. November 2010
![Page 3: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/3.jpg)
http://www.flickr.com/photos/andresrueda/2276197032/
Donnerstag, 11. November 2010
![Page 4: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/4.jpg)
Donnerstag, 11. November 2010
![Page 5: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/5.jpg)
Donnerstag, 11. November 2010
![Page 6: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/6.jpg)
Donnerstag, 11. November 2010
![Page 7: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/7.jpg)
JavaScript
Donnerstag, 11. November 2010
![Page 8: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/8.jpg)
ONLY
Donnerstag, 11. November 2010
![Page 9: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/9.jpg)
Use Namespaces!
• globals suck
• objects as namespace
• easy mapping
• directory structure comes by itself
Donnerstag, 11. November 2010
![Page 10: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/10.jpg)
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
![Page 11: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/11.jpg)
Patterns
• solve your problem
• solve it again
• copy+paste•
• you got a pattern
• abstract it
• reuse the pattern
AJAX
Donnerstag, 11. November 2010
![Page 12: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/12.jpg)
Let's code together!
Donnerstag, 11. November 2010
![Page 13: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/13.jpg)
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
![Page 14: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/14.jpg)
Coding Style, etc.
• less to think
• all code looks the same
• do code, don‘t style
• stay focused
Donnerstag, 11. November 2010
![Page 15: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/15.jpg)
But!
Donnerstag, 11. November 2010
![Page 16: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/16.jpg)
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
![Page 17: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/17.jpg)
Code Folding
Donnerstag, 11. November 2010
![Page 18: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/18.jpg)
Template
Donnerstag, 11. November 2010
![Page 19: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/19.jpg)
Templates
• faster
• no typos
• for the whole team
• docs built in
• copy with pride
Donnerstag, 11. November 2010
![Page 20: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/20.jpg)
Comment out
Donnerstag, 11. November 2010
![Page 21: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/21.jpg)
Comment out
Donnerstag, 11. November 2010
![Page 22: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/22.jpg)
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
![Page 23: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/23.jpg)
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
![Page 24: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/24.jpg)
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
![Page 25: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/25.jpg)
alert, console.log
• alert hell? use confirm!
• numbered console.log
Donnerstag, 11. November 2010
![Page 26: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/26.jpg)
*.toString()
Donnerstag, 11. November 2010
![Page 27: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/27.jpg)
debugger;
Donnerstag, 11. November 2010
![Page 28: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/28.jpg)
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
![Page 29: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/29.jpg)
EventNinja
Donnerstag, 11. November 2010
![Page 30: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/30.jpg)
Permissions
Donnerstag, 11. November 2010
![Page 31: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/31.jpg)
Extend
Donnerstag, 11. November 2010
![Page 32: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/32.jpg)
First Version
Donnerstag, 11. November 2010
![Page 33: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/33.jpg)
Backend
Donnerstag, 11. November 2010
![Page 34: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/34.jpg)
Object Browser
Donnerstag, 11. November 2010
![Page 35: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/35.jpg)
Donnerstag, 11. November 2010
![Page 36: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/36.jpg)
Donnerstag, 11. November 2010
![Page 37: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/37.jpg)
Donnerstag, 11. November 2010
![Page 38: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/38.jpg)
Open Source
•a developer must have
•developer.vodafone.comhttp://developer.vodafone.com/object-browser
•githubhttp://github.com/wolframkriesing/object-browser
Donnerstag, 11. November 2010
![Page 39: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/39.jpg)
Other sources
• google your problem
• talk to a colleague
• sleep over it
Donnerstag, 11. November 2010
![Page 40: Best Practices - Mobile Developer Summit](https://reader034.vdocument.in/reader034/viewer/2022051513/545af69bb1af9f40378b5b0e/html5/thumbnails/40.jpg)
Wolfram Kriesing
http://apparat.io
http://embedjs.org
Thank you
Donnerstag, 11. November 2010