JavaScript Tools (PHPConference 2011, Berlin)

JavaScriptTools

Wolfram Kriesing

Co-Founder

@wolframkriesing

Dienstag, 31. Mai 2011

We open the mobile web.


http://www.flickr.com/photos/andresrueda/2276197032/


http://www.flickr.com/photos/cmoi/760513848/




Editors


WebStorm


Komodo


Cloud9



Minifiers


Ping Response Time

on mobile!?





http://code.google.com/intl/de-DE/closure/compiler/

https://github.com/mishoo/UglifyJS/

http://developer.yahoo.com/yui/compressor/

http://shrinksafe.dojotoolkit.org/

http://www.crockford.com/javascript/jsmin.html

...


Compare

http://compressorrater.thruhere.net/



http://closure-compiler.appspot.com/home


Think different!


140BytesBy Jed Schmidt

http://140byt.es/

https://github.com/jed/140bytes/wiki/Byte-saving-techniques








DocTools


https://github.com/micmath/jsdoc/


http://dojodocs.uxebu.com/

https://github.com/wolframkriesing/dools


http://embedjs.org/apidocs/dools/app/apidoc/embedjs/



Testing


Testing

• unit testing

• synch

• asynch

• automation

• selenium like

• webdriver


http://en.wikipedia.org/wiki/List_of_unit_testing_frameworks#JavaScript


Jasmine

http://pivotal.github.com/jasmine/





DocTests


Inspector

FireBug


• console

•debugger

• resource panel

• ...


Firebug/Inspector

• has keyboard shortcuts!ctrl+a, ctrl+e, up, down, tab, shift+tab, but not ctrl+r

• console.log("See this %s", var, obj, array)

• monitorEvents($("id"))

• profile(1), profileEnd(1)

http://getfirebug.com/console.html

http://getfirebug.com/commandline.html

http://getfirebug.com/keyboard.html








Console


*.toString()

• function source

• function parameters

• even console.log.toString()


*.toString()


Fix in Place


Stacktrace

http://eriwen.com/javascript/js-stack-trace/


http://www.danhulton.com/blog/2008/01/16/integrate-js-lint-into-komodo-edit/



DEMO

WebKit Inspector

Remote


Analyzers



Profiler

DEMOsortdemo


JSLint


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://jslint.com

http://jslint.com





Tips


Comment out


Comment out


Template


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!


alert, console.log

• alert hell? use confirm!

• numbered console.log


zeon.js


zeon.js

DEMO


Wolfram Kriesing

uxebu.com

Thank you


JavaScript Tools (PHPConference 2011, Berlin)

Technology