SlideShare a Scribd company logo
1 of 63
Download to read offline
JavaScript
                           Tools

                           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
140Bytes
                                           By 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! but not ctrl+r
                       ctrl+a, ctrl+e, up, down, tab, shift+tab,

                     • 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
WebKit Inspector
                            Remote

                               DEMO




Dienstag, 31. Mai 2011
Analyzers



Dienstag, 31. Mai 2011
Dienstag, 31. Mai 2011
Profiler

                           DEMO
                           sortdemo




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?
                                            NO
               d.query("h2")
                   .style({position:"absolute", color:"red"})
                   .anim({left:300}, 500)


                                   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
Thank you



                          Wolfram Kriesing
                            uxebu.com




Dienstag, 31. Mai 2011

More Related Content

Viewers also liked

40mb Images
40mb Images40mb Images
40mb Imageswoppi
 
Spielst du noch oder lernst du schon? : (Nicht nur) methodisch-didaktische Üb...
Spielst du noch oder lernst du schon? : (Nicht nur) methodisch-didaktische Üb...Spielst du noch oder lernst du schon? : (Nicht nur) methodisch-didaktische Üb...
Spielst du noch oder lernst du schon? : (Nicht nur) methodisch-didaktische Üb...Realidades Virtuais
 
The Contextual Experience of the Mobile Web
The Contextual Experience of the Mobile WebThe Contextual Experience of the Mobile Web
The Contextual Experience of the Mobile WebJeff Carouth
 
Innovative Learning Environments – Insights from Recent OECD/CERI Analyses 
Innovative Learning Environments – Insights from Recent OECD/CERI Analyses Innovative Learning Environments – Insights from Recent OECD/CERI Analyses 
Innovative Learning Environments – Insights from Recent OECD/CERI Analyses EDEN Digital Learning Europe
 
Anonymous: Kollektive Identitäten im sogenannten Cyberwar um Wikileaks
Anonymous: Kollektive Identitäten im sogenannten Cyberwar um Wikileaks Anonymous: Kollektive Identitäten im sogenannten Cyberwar um Wikileaks
Anonymous: Kollektive Identitäten im sogenannten Cyberwar um Wikileaks Jana Herwig
 
Society of Digital Agencies (SoDA) 2011 Digital Marketing Outlook
Society of Digital Agencies (SoDA) 2011 Digital Marketing OutlookSociety of Digital Agencies (SoDA) 2011 Digital Marketing Outlook
Society of Digital Agencies (SoDA) 2011 Digital Marketing OutlookSociety of Digital Agencies
 
Pragmatic Guide to Git
Pragmatic Guide to GitPragmatic Guide to Git
Pragmatic Guide to GitConFoo
 

Viewers also liked (7)

40mb Images
40mb Images40mb Images
40mb Images
 
Spielst du noch oder lernst du schon? : (Nicht nur) methodisch-didaktische Üb...
Spielst du noch oder lernst du schon? : (Nicht nur) methodisch-didaktische Üb...Spielst du noch oder lernst du schon? : (Nicht nur) methodisch-didaktische Üb...
Spielst du noch oder lernst du schon? : (Nicht nur) methodisch-didaktische Üb...
 
The Contextual Experience of the Mobile Web
The Contextual Experience of the Mobile WebThe Contextual Experience of the Mobile Web
The Contextual Experience of the Mobile Web
 
Innovative Learning Environments – Insights from Recent OECD/CERI Analyses 
Innovative Learning Environments – Insights from Recent OECD/CERI Analyses Innovative Learning Environments – Insights from Recent OECD/CERI Analyses 
Innovative Learning Environments – Insights from Recent OECD/CERI Analyses 
 
Anonymous: Kollektive Identitäten im sogenannten Cyberwar um Wikileaks
Anonymous: Kollektive Identitäten im sogenannten Cyberwar um Wikileaks Anonymous: Kollektive Identitäten im sogenannten Cyberwar um Wikileaks
Anonymous: Kollektive Identitäten im sogenannten Cyberwar um Wikileaks
 
Society of Digital Agencies (SoDA) 2011 Digital Marketing Outlook
Society of Digital Agencies (SoDA) 2011 Digital Marketing OutlookSociety of Digital Agencies (SoDA) 2011 Digital Marketing Outlook
Society of Digital Agencies (SoDA) 2011 Digital Marketing Outlook
 
Pragmatic Guide to Git
Pragmatic Guide to GitPragmatic Guide to Git
Pragmatic Guide to Git
 

Similar to JavaScript Tools (PHPConference 2011, Berlin)

HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIsklipstein
 
Mobile Webapps Entwicklung
Mobile Webapps EntwicklungMobile Webapps Entwicklung
Mobile Webapps EntwicklungMatthias Luebken
 
Why RealURL sucks - and how to fix it
Why RealURL sucks - and how to fix itWhy RealURL sucks - and how to fix it
Why RealURL sucks - and how to fix itjweiland
 
Java scriptgettingstarted
Java scriptgettingstartedJava scriptgettingstarted
Java scriptgettingstartedwolframkriesing
 

Similar to JavaScript Tools (PHPConference 2011, Berlin) (7)

HTML5 JavaScript APIs
HTML5 JavaScript APIsHTML5 JavaScript APIs
HTML5 JavaScript APIs
 
Mobile Webapps Entwicklung
Mobile Webapps EntwicklungMobile Webapps Entwicklung
Mobile Webapps Entwicklung
 
Aus alt mach neu
Aus alt mach neuAus alt mach neu
Aus alt mach neu
 
EmbedJS
EmbedJSEmbedJS
EmbedJS
 
Why RealURL sucks - and how to fix it
Why RealURL sucks - and how to fix itWhy RealURL sucks - and how to fix it
Why RealURL sucks - and how to fix it
 
Munichjs javascript
Munichjs javascriptMunichjs javascript
Munichjs javascript
 
Java scriptgettingstarted
Java scriptgettingstartedJava scriptgettingstarted
Java scriptgettingstarted
 

More from wolframkriesing

JavaScript The Language Meetup - Async functions
JavaScript The Language Meetup - Async functionsJavaScript The Language Meetup - Async functions
JavaScript The Language Meetup - Async functionswolframkriesing
 
Our react-native experiences at crewmeister
Our react-native experiences at crewmeisterOur react-native experiences at crewmeister
Our react-native experiences at crewmeisterwolframkriesing
 
ES6 katas - talk given at enterjs
ES6 katas - talk given at enterjsES6 katas - talk given at enterjs
ES6 katas - talk given at enterjswolframkriesing
 
TDD for Kids - VLCjs (Valencia Spain, July 2015)
TDD for Kids - VLCjs (Valencia Spain, July 2015)TDD for Kids - VLCjs (Valencia Spain, July 2015)
TDD for Kids - VLCjs (Valencia Spain, July 2015)wolframkriesing
 
ES6Katas.org - an introduction and the story behind
ES6Katas.org - an introduction and the story behindES6Katas.org - an introduction and the story behind
ES6Katas.org - an introduction and the story behindwolframkriesing
 
TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015wolframkriesing
 
TDD with Google Spreadsheets
TDD with Google SpreadsheetsTDD with Google Spreadsheets
TDD with Google Spreadsheetswolframkriesing
 
Refactoring out of the mess
Refactoring out of the messRefactoring out of the mess
Refactoring out of the messwolframkriesing
 
Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)wolframkriesing
 
Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)wolframkriesing
 
react.js - DOM as it was meant
react.js - DOM as it was meantreact.js - DOM as it was meant
react.js - DOM as it was meantwolframkriesing
 
Pixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup SalzburgPixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup Salzburgwolframkriesing
 
Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012wolframkriesing
 
Webtestsuite black berrydevcon
Webtestsuite black berrydevconWebtestsuite black berrydevcon
Webtestsuite black berrydevconwolframkriesing
 
NEXT11, Puzzle pieces of our mobile web approach
NEXT11, Puzzle pieces of our mobile web approachNEXT11, Puzzle pieces of our mobile web approach
NEXT11, Puzzle pieces of our mobile web approachwolframkriesing
 

More from wolframkriesing (20)

JavaScript The Language Meetup - Async functions
JavaScript The Language Meetup - Async functionsJavaScript The Language Meetup - Async functions
JavaScript The Language Meetup - Async functions
 
Our react-native experiences at crewmeister
Our react-native experiences at crewmeisterOur react-native experiences at crewmeister
Our react-native experiences at crewmeister
 
ES6 katas - talk given at enterjs
ES6 katas - talk given at enterjsES6 katas - talk given at enterjs
ES6 katas - talk given at enterjs
 
TDD for Kids - VLCjs (Valencia Spain, July 2015)
TDD for Kids - VLCjs (Valencia Spain, July 2015)TDD for Kids - VLCjs (Valencia Spain, July 2015)
TDD for Kids - VLCjs (Valencia Spain, July 2015)
 
ES6Katas.org - an introduction and the story behind
ES6Katas.org - an introduction and the story behindES6Katas.org - an introduction and the story behind
ES6Katas.org - an introduction and the story behind
 
TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015TDD with Google Spreadsheets #enterjs 2015
TDD with Google Spreadsheets #enterjs 2015
 
Baby steps
Baby stepsBaby steps
Baby steps
 
TDD with Google Spreadsheets
TDD with Google SpreadsheetsTDD with Google Spreadsheets
TDD with Google Spreadsheets
 
ECMAScript 6 for real
ECMAScript 6 for realECMAScript 6 for real
ECMAScript 6 for real
 
Refactoring out of the mess
Refactoring out of the messRefactoring out of the mess
Refactoring out of the mess
 
Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)Day2 - Refactoring (Lecture SS 2015)
Day2 - Refactoring (Lecture SS 2015)
 
Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)Day1 - TDD (Lecture SS 2015)
Day1 - TDD (Lecture SS 2015)
 
react.js - DOM as it was meant
react.js - DOM as it was meantreact.js - DOM as it was meant
react.js - DOM as it was meant
 
Pixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup SalzburgPixelplant - WebDev Meetup Salzburg
Pixelplant - WebDev Meetup Salzburg
 
Better Code through TDD
Better Code through TDDBetter Code through TDD
Better Code through TDD
 
April JavaScript Tools
April JavaScript ToolsApril JavaScript Tools
April JavaScript Tools
 
Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012Presentation Mobile Monday Munich, March 2012
Presentation Mobile Monday Munich, March 2012
 
Webtestsuite black berrydevcon
Webtestsuite black berrydevconWebtestsuite black berrydevcon
Webtestsuite black berrydevcon
 
WAC
WACWAC
WAC
 
NEXT11, Puzzle pieces of our mobile web approach
NEXT11, Puzzle pieces of our mobile web approachNEXT11, Puzzle pieces of our mobile web approach
NEXT11, Puzzle pieces of our mobile web approach
 

JavaScript Tools (PHPConference 2011, Berlin)