Best Practices - Mobile Developer Summit

  • Published on
    01-Nov-2014

  • View
    793

  • Download
    0

Embed Size (px)

DESCRIPTION

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

Transcript

<ul><li><p>Best Practicesin mobile cross platform development</p><p>@wolframkriesing@uxebu</p><p>Donnerstag, 11. November 2010</p></li><li><p>We open the mobile web.</p><p>Donnerstag, 11. November 2010</p></li><li><p>http://www.flickr.com/photos/andresrueda/2276197032/</p><p>Donnerstag, 11. November 2010</p></li><li><p>Donnerstag, 11. November 2010</p></li><li><p>Donnerstag, 11. November 2010</p></li><li><p>Donnerstag, 11. November 2010</p></li><li><p>JavaScript</p><p>Donnerstag, 11. November 2010</p></li><li><p>ONLY</p><p>Donnerstag, 11. November 2010</p></li><li><p>Use Namespaces!</p><p> globals suck</p><p> objects as namespace</p><p> easy mapping</p><p> directory structure comes by itself</p><p>Donnerstag, 11. November 2010</p></li><li><p>Use Namespaces!</p><p>shop.page.cart.getItems() javascript</p><p>http://shop.de/api/cart/items/ URL</p><p>(r'^cart/items/$', views.cart.get_items), mapper</p><p>def get_items(request): item_ids = request.POST.list("ids")</p><p>code</p><p>Donnerstag, 11. November 2010</p>http://shop.de/api/cart/items/http://shop.de/api/cart/items/</li><li><p>Patterns</p><p> solve your problem </p><p> solve it again</p><p> copy+paste </p><p> you got a pattern</p><p> abstract it</p><p> reuse the pattern</p><p>AJAX</p><p>Donnerstag, 11. November 2010</p></li><li><p>Let's code together!</p><p>Donnerstag, 11. November 2010</p></li><li><p>for (var i=0; i</p></li><li><p>Coding Style, etc.</p><p> less to think</p><p> all code looks the same</p><p> do code, dont style</p><p> stay focused</p><p>Donnerstag, 11. November 2010</p></li><li><p>But!</p><p>Donnerstag, 11. November 2010</p></li><li><p>d.declare(obj, null, {func1:function(){}</p><p>});</p><p>var obj = {};obj.func1 = function(){}</p><p>var obj = new Object();Object.prototype.func1 = function(){}</p><p>var obj = new function(){ arguments.callee.prototype.func1 = function(){}}</p><p>Donnerstag, 11. November 2010</p></li><li><p>Code Folding</p><p>Donnerstag, 11. November 2010</p></li><li><p>Template</p><p>Donnerstag, 11. November 2010</p></li><li><p>Templates</p><p> faster</p><p> no typos</p><p> for the whole team</p><p> docs built in</p><p> copy with pride</p><p>Donnerstag, 11. November 2010</p></li><li><p>Comment out</p><p>Donnerstag, 11. November 2010</p></li><li><p>Comment out</p><p>Donnerstag, 11. November 2010</p></li><li><p>JSLint</p><p> finds IE traps (trailing comma)</p><p> gives JS insight (parseInt, ===, ...)</p><p> understand type coercion</p><p> finds missing var statements</p><p> undefined vars, typos (myVar vs. myvar)</p><p>http://jslint.com</p><p>http://wolfram.kriesing.de/blog/index.php/2007/understanding-jslint-output</p><p>http://www.danhulton.com/blog/2008/01/16/integrate-js-lint-into-komodo-edit/</p><p>Donnerstag, 11. November 2010</p>http://jslint.comhttp://jslint.comhttp://wolfram.kriesing.de/blog/index.php/2007/understanding-jslint-outputhttp://wolfram.kriesing.de/blog/index.php/2007/understanding-jslint-outputhttp://www.danhulton.com/blog/2008/01/16/integrate-js-lint-into-komodo-edit/http://www.danhulton.com/blog/2008/01/16/integrate-js-lint-into-komodo-edit/</li><li><p>Try it first (1)</p><p>d.query("h2") .style({color:"red"}) .anim({left:300}, 500)</p><p>Are you sure this works?</p><p>d.query("h2") .style({position:"absolute", color:"red"}) .anim({left:300}, 500)</p><p>NO</p><p>save one reload!</p><p>Donnerstag, 11. November 2010</p></li><li><p>Try it first (2)</p><p> try the code in FireBug first</p><p> learn more about your library</p><p> play with the code</p><p> find better ways?</p><p>Donnerstag, 11. November 2010</p></li><li><p>alert, console.log</p><p> alert hell? use confirm!</p><p> numbered console.log</p><p>Donnerstag, 11. November 2010</p></li><li><p>*.toString()</p><p>Donnerstag, 11. November 2010</p></li><li><p>debugger;</p><p>Donnerstag, 11. November 2010</p></li><li><p>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</p><p>Donnerstag, 11. November 2010</p></li><li><p>EventNinja</p><p>Donnerstag, 11. November 2010</p></li><li><p>Permissions</p><p>Donnerstag, 11. November 2010</p></li><li><p>Extend</p><p>Donnerstag, 11. November 2010</p></li><li><p>First Version</p><p>Donnerstag, 11. November 2010</p></li><li><p>Backend</p><p>Donnerstag, 11. November 2010</p></li><li><p>Object Browser</p><p>Donnerstag, 11. November 2010</p></li><li><p>Donnerstag, 11. November 2010</p></li><li><p>Donnerstag, 11. November 2010</p></li><li><p>Donnerstag, 11. November 2010</p></li><li><p>Open Source</p><p>a developer must havedeveloper.vodafone.com</p><p>http://developer.vodafone.com/object-browser</p><p>githubhttp://github.com/wolframkriesing/object-browser</p><p>Donnerstag, 11. November 2010</p>http://developer.vodafone.com/object-browserhttp://developer.vodafone.com/object-browser</li><li><p>Other sources</p><p> google your problem</p><p> talk to a colleague</p><p> sleep over it</p><p>Donnerstag, 11. November 2010</p></li><li><p>Wolfram Kriesing</p><p>http://apparat.io</p><p>http://embedjs.org</p><p>Thank you</p><p>Donnerstag, 11. November 2010</p></li></ul>