I am trying to show some useful tricks and tips when developing mobile web apps.

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

2. We open the mobile web.
Donnerstag, 11. November 2010

3. http://www.flickr.com/photos/andresrueda/2276197032/
Donnerstag, 11. November 2010

4. Donnerstag, 11. November 2010

5. Donnerstag, 11. November 2010

6. Donnerstag, 11. November 2010

7. JavaScript
Donnerstag, 11. November 2010

8. ONLY
Donnerstag, 11. November 2010

9. Use Namespaces!
•globals suck
•objects as namespace
•easy mapping
•directory structure comes by itself
Donnerstag, 11. November 2010

10. 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

11. Patterns
•solve your problem
•solve it again
•copy+paste•
•you got a pattern
•abstract it
•reuse the pattern
AJAX
Donnerstag, 11. November 2010

12. Let's code together!
Donnerstag, 11. November 2010

13. 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

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

15. But!
Donnerstag, 11. November 2010

16. 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

17. Code Folding
Donnerstag, 11. November 2010

18. Template
Donnerstag, 11. November 2010

19. Templates
•faster
•no typos
•for the whole team
•docs built in
•copy with pride
Donnerstag, 11. November 2010

20. Comment out
Donnerstag, 11. November 2010

21. Comment out
Donnerstag, 11. November 2010

22. 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

23. 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

24. 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

25. alert, console.log
•alert hell? use confirm!
•numbered console.log
Donnerstag, 11. November 2010

26. *.toString()
Donnerstag, 11. November 2010

27. debugger;
Donnerstag, 11. November 2010

28. 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

29. EventNinja
Donnerstag, 11. November 2010

30. Permissions
Donnerstag, 11. November 2010

31. Extend
Donnerstag, 11. November 2010

32. First Version
Donnerstag, 11. November 2010

33. Backend
Donnerstag, 11. November 2010

34. Object Browser
Donnerstag, 11. November 2010

35. Donnerstag, 11. November 2010

36. Donnerstag, 11. November 2010

37. Donnerstag, 11. November 2010

38. Open Source
•a developer must have
•developer.vodafone.com
http://developer.vodafone.com/object-browser
•github
http://github.com/wolframkriesing/object-browser
Donnerstag, 11. November 2010

39. Other sources
•google your problem
•talk to a colleague
•sleep over it
Donnerstag, 11. November 2010

40. Wolfram Kriesing
http://apparat.io
http://embedjs.org
Thank you
Donnerstag, 11. November 2010