Best Practices - Mobile Developer Summit

891 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
891
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Best Practices - Mobile Developer Summit

  1. 1. Best Practices in mobile cross platform development @wolframkriesing @uxebu Donnerstag, 11. November 2010
  2. 2. We open the mobile web. Donnerstag, 11. November 2010
  3. 3. http://www.flickr.com/photos/andresrueda/2276197032/ Donnerstag, 11. November 2010
  4. 4. Donnerstag, 11. November 2010
  5. 5. Donnerstag, 11. November 2010
  6. 6. Donnerstag, 11. November 2010
  7. 7. JavaScript Donnerstag, 11. November 2010
  8. 8. ONLY Donnerstag, 11. November 2010
  9. 9. Use Namespaces! •globals suck •objects as namespace •easy mapping •directory structure comes by itself Donnerstag, 11. November 2010
  10. 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. 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. 12. Let's code together! Donnerstag, 11. November 2010
  13. 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. 14. Coding Style, etc. •less to think •all code looks the same •do code, don‘t style •stay focused Donnerstag, 11. November 2010
  15. 15. But! Donnerstag, 11. November 2010
  16. 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. 17. Code Folding Donnerstag, 11. November 2010
  18. 18. Template Donnerstag, 11. November 2010
  19. 19. Templates •faster •no typos •for the whole team •docs built in •copy with pride Donnerstag, 11. November 2010
  20. 20. Comment out Donnerstag, 11. November 2010
  21. 21. Comment out Donnerstag, 11. November 2010
  22. 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. 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. 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. 25. alert, console.log •alert hell? use confirm! •numbered console.log Donnerstag, 11. November 2010
  26. 26. *.toString() Donnerstag, 11. November 2010
  27. 27. debugger; Donnerstag, 11. November 2010
  28. 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. 29. EventNinja Donnerstag, 11. November 2010
  30. 30. Permissions Donnerstag, 11. November 2010
  31. 31. Extend Donnerstag, 11. November 2010
  32. 32. First Version Donnerstag, 11. November 2010
  33. 33. Backend Donnerstag, 11. November 2010
  34. 34. Object Browser Donnerstag, 11. November 2010
  35. 35. Donnerstag, 11. November 2010
  36. 36. Donnerstag, 11. November 2010
  37. 37. Donnerstag, 11. November 2010
  38. 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. 39. Other sources •google your problem •talk to a colleague •sleep over it Donnerstag, 11. November 2010
  40. 40. Wolfram Kriesing http://apparat.io http://embedjs.org Thank you Donnerstag, 11. November 2010

×