javascript tools (phpconference 2011, berlin)
Post on 29-Nov-2014
3.235 Views
Preview:
DESCRIPTION
TRANSCRIPT
JavaScriptTools
Wolfram Kriesing
Co-Founder
@wolframkriesing
Dienstag, 31. Mai 2011
We open the mobile web.
Dienstag, 31. Mai 2011
http://www.flickr.com/photos/andresrueda/2276197032/
Dienstag, 31. Mai 2011
http://www.flickr.com/photos/cmoi/760513848/
Dienstag, 31. Mai 2011
Editors
Dienstag, 31. Mai 2011
WebStorm
Dienstag, 31. Mai 2011
Komodo
Dienstag, 31. Mai 2011
Cloud9
Dienstag, 31. Mai 2011
Dienstag, 31. Mai 2011
Minifiers
Dienstag, 31. Mai 2011
Ping Response Time
on mobile!?
Dienstag, 31. Mai 2011
Dienstag, 31. Mai 2011
Dienstag, 31. Mai 2011
Dienstag, 31. Mai 2011
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
...
Dienstag, 31. Mai 2011
Compare
http://compressorrater.thruhere.net/
Dienstag, 31. Mai 2011
Dienstag, 31. Mai 2011
http://closure-compiler.appspot.com/home
Dienstag, 31. Mai 2011
Think different!
Dienstag, 31. Mai 2011
140BytesBy Jed Schmidt
http://140byt.es/
https://github.com/jed/140bytes/wiki/Byte-saving-techniques
Dienstag, 31. Mai 2011
Dienstag, 31. Mai 2011
Dienstag, 31. Mai 2011
Dienstag, 31. Mai 2011
Dienstag, 31. Mai 2011
Dienstag, 31. Mai 2011
Dienstag, 31. Mai 2011
DocTools
Dienstag, 31. Mai 2011
https://github.com/micmath/jsdoc/
Dienstag, 31. Mai 2011
http://dojodocs.uxebu.com/
https://github.com/wolframkriesing/dools
Dienstag, 31. Mai 2011
http://embedjs.org/apidocs/dools/app/apidoc/embedjs/
Dienstag, 31. Mai 2011
Dienstag, 31. Mai 2011
Testing
Dienstag, 31. Mai 2011
Testing
• unit testing
• synch
• asynch
• automation
• selenium like
• webdriver
Dienstag, 31. Mai 2011
http://en.wikipedia.org/wiki/List_of_unit_testing_frameworks#JavaScript
Dienstag, 31. Mai 2011
Jasmine
http://pivotal.github.com/jasmine/
Dienstag, 31. Mai 2011
Dienstag, 31. Mai 2011
Dienstag, 31. Mai 2011
Dienstag, 31. Mai 2011
DocTests
Dienstag, 31. Mai 2011
Inspector
FireBug
Dienstag, 31. Mai 2011
• console
•debugger
• resource panel
• ...
Dienstag, 31. Mai 2011
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
Dienstag, 31. Mai 2011
Console
Dienstag, 31. Mai 2011
*.toString()
• function source
• function parameters
• even console.log.toString()
Dienstag, 31. Mai 2011
*.toString()
Dienstag, 31. Mai 2011
Fix in Place
Dienstag, 31. Mai 2011
Stacktrace
http://eriwen.com/javascript/js-stack-trace/
Dienstag, 31. Mai 2011
Dienstag, 31. Mai 2011
DEMO
WebKit Inspector
Remote
Dienstag, 31. Mai 2011
Analyzers
Dienstag, 31. Mai 2011
Dienstag, 31. Mai 2011
Profiler
DEMOsortdemo
Dienstag, 31. Mai 2011
JSLint
Dienstag, 31. Mai 2011
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/
Dienstag, 31. Mai 2011
Tips
Dienstag, 31. Mai 2011
Comment out
Dienstag, 31. Mai 2011
Comment out
Dienstag, 31. Mai 2011
Template
Dienstag, 31. Mai 2011
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!
Dienstag, 31. Mai 2011
alert, console.log
• alert hell? use confirm!
• numbered console.log
Dienstag, 31. Mai 2011
zeon.js
Dienstag, 31. Mai 2011
zeon.js
DEMO
Dienstag, 31. Mai 2011
Wolfram Kriesing
uxebu.com
Thank you
Dienstag, 31. Mai 2011
top related