Werkzeuge zur Qualitätssicherung
in JavaScript

Tuesday 5 November 13
WER BIN ICH?

• Sebastian

Springer

• https://github.com/sspringer82
• @basti_springer

Tuesday 5 November 13
JAVASCRIPT?

Tuesday 5 November 13
QUALITÄT?

Tuesday 5 November 13
Unter Softwarequalität versteht man die Gesamtheit der
Merkmale und Merkmalswerte eines
Softwareprodukts, die sich auf des...
DOKUMENTATION?

Tuesday 5 November 13
README.MD

Tuesday 5 November 13
API DOC

npm install -g git://github.com/jsdoc3/jsdoc.git

Tuesday 5 November 13
STATISCHE VS. DYNAMISCHE
CODEANALYSE

Tuesday 5 November 13
STATISCHE CODEANALYSE

Tuesday 5 November 13
TOKENIZER?

Tuesday 5 November 13
var answer = 6 * 7;

Tuesday 5 November 13
{

SYNTAX
"type": "Program",
"body": [
{
"type": "VariableDeclaration",
"declarations": [
{
"type": "VariableDeclarator",
...
TOKENS
[
{
"type": "Keyword",
"value": "var"
},
{
"type": "Identifier",
"value": "answer"
},
{
"type": "Punctuator",
"valu...
VALIDATOR VS. LINTER

Tuesday 5 November 13
Tuesday 5 November 13
by Douglas Crockford

Tuesday 5 November 13
by Douglas Crockford
Warning: JSLint will hurt your feelings

Tuesday 5 November 13
sudo npm install -g jslint

Tuesday 5 November 13
var Calculator = function () {};
Calculator.prototype.add = function(a, b) {
if('number' !== typeof a ||'number' !== typeo...
#1 Missing 'use strict' statement.
var Calculator = function () {}; // Line 1, Pos 31
#2 Empty block.
var Calculator = fun...
ESVALIDATE

by http://esprima.org/

Tuesday 5 November 13
sudo npm install -g esvalidate

Tuesday 5 November 13
return 42; // Return statement not inside a function
function f() {
'use strict';
// No more octal
var x = 042;
// Duplica...
validate.js:1: Illegal return statement
validate.js:7: Octal literals are not allowed in
strict mode.
validate.js:10: Dupl...
KOMPLEXITÄT

Tuesday 5 November 13
PLATO

Tuesday 5 November 13
Tuesday 5 November 13
LOC
Maintainability
Estimated Errors in Implementation
Lint Errors
Tuesday 5 November 13
Tuesday 5 November 13
https://sourceforge.net/projects/pmd/files/pmd/5.0.5/pmdbin-5.0.5.zip/download

Tuesday 5 November 13
run.sh pmd -d ./pmd -rulesets ecmascript-basic

Tuesday 5 November 13
pmd/example.js:3:!
Avoid assignments in operands
pmd/example.js:3:!
Avoid using global variables
pmd/example.js:3:!
Use ==...
UnreachableCode

EqualComparison

InaccurateNumericLiteral
AssignmentInOperand
UseBaseWithParseInt
ScopeForInVariable
Glob...
CPD

Tuesday 5 November 13
run.sh cpd --minimum-tokens 12 --files /
path/to/src --language ecmascript -format xml > cpd.xml

Tuesday 5 November 13
TESTS

Tuesday 5 November 13
FRAMEWORKS

Tuesday 5 November 13
Sinon.js

Tuesday 5 November 13

FRAMEWORKS
jsunit
Sinon.js

Tuesday 5 November 13

FRAMEWORKS
jsunit
Sinon.js

FRAMEWORKS
doh

Tuesday 5 November 13
jsunit
Sinon.js

FRAMEWORKS
doh

Tuesday 5 November 13

JS Test Driver
jsunit
qunit
Sinon.js

FRAMEWORKS
doh

Tuesday 5 November 13

JS Test Driver
jsunit
qunit
Sinon.js
Jasmine

Tuesday 5 November 13

FRAMEWORKS
doh

JS Test Driver
jsunit
qunit
Sinon.js
Jasmine

Tuesday 5 November 13

Siesta

FRAMEWORKS
doh

JS Test Driver
Karma
jsunit
qunit
Sinon.js
Jasmine

Tuesday 5 November 13

Siesta

FRAMEWORKS
doh

JS Test Driver
SERVERSIDE VS. CLIENTSIDE

Tuesday 5 November 13
Tuesday 5 November 13
Tuesday 5 November 13
COVERAGE

Tuesday 5 November 13
Tuesday 5 November 13
ENTWICKLUNGSUMGEBUNG
(IDE)

Tuesday 5 November 13
Tuesday 5 November 13
SERVERSIDE

https://code.google.com/p/js-test-driver/
Tuesday 5 November 13
AUTOMATISIERUNG

Tuesday 5 November 13
Tuesday 5 November 13
JENKINS
Tasks per Ant ausführen

Visualisierung über Plugins

Tuesday 5 November 13
FRAGEN?

Tuesday 5 November 13
Kontakt
Sebastian Springer
sebastian.springer@mayflower.de
Mayflower GmbH
Mannhardtstr. 6
80538 München
Deutschland
@basti...
Upcoming SlideShare
Loading in …5
×

JavaScript Qualitätssicherung

899 views

Published on

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
899
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

JavaScript Qualitätssicherung

  1. 1. Werkzeuge zur Qualitätssicherung in JavaScript Tuesday 5 November 13
  2. 2. WER BIN ICH? • Sebastian Springer • https://github.com/sspringer82 • @basti_springer Tuesday 5 November 13
  3. 3. JAVASCRIPT? Tuesday 5 November 13
  4. 4. QUALITÄT? Tuesday 5 November 13
  5. 5. Unter Softwarequalität versteht man die Gesamtheit der Merkmale und Merkmalswerte eines Softwareprodukts, die sich auf dessen Eignung beziehen, festgelegte oder vorausgesetzte Erfordernisse zu erfüllen. (Balzert) Tuesday 5 November 13
  6. 6. DOKUMENTATION? Tuesday 5 November 13
  7. 7. README.MD Tuesday 5 November 13
  8. 8. API DOC npm install -g git://github.com/jsdoc3/jsdoc.git Tuesday 5 November 13
  9. 9. STATISCHE VS. DYNAMISCHE CODEANALYSE Tuesday 5 November 13
  10. 10. STATISCHE CODEANALYSE Tuesday 5 November 13
  11. 11. TOKENIZER? Tuesday 5 November 13
  12. 12. var answer = 6 * 7; Tuesday 5 November 13
  13. 13. { SYNTAX "type": "Program", "body": [ { "type": "VariableDeclaration", "declarations": [ { "type": "VariableDeclarator", "id": { "type": "Identifier", "name": "answer" }, "init": { "type": "BinaryExpression", "operator": "*", "left": { "type": "Literal", "value": 6, "raw": "6" }, "right": { "type": "Literal", "value": 7, "raw": "7" } } } ], "kind": "var" } ] } Tuesday 5 November 13
  14. 14. TOKENS [ { "type": "Keyword", "value": "var" }, { "type": "Identifier", "value": "answer" }, { "type": "Punctuator", "value": "=" }, { "type": "Numeric", "value": "6" }, { "type": "Punctuator", "value": "*" }, { "type": "Numeric", "value": "7" }, { "type": "Punctuator", "value": ";" } ] Tuesday 5 November 13
  15. 15. VALIDATOR VS. LINTER Tuesday 5 November 13
  16. 16. Tuesday 5 November 13
  17. 17. by Douglas Crockford Tuesday 5 November 13
  18. 18. by Douglas Crockford Warning: JSLint will hurt your feelings Tuesday 5 November 13
  19. 19. sudo npm install -g jslint Tuesday 5 November 13
  20. 20. var Calculator = function () {}; Calculator.prototype.add = function(a, b) { if('number' !== typeof a ||'number' !== typeof b) throw new Error('Can add only numbers'); return a+b; } Tuesday 5 November 13
  21. 21. #1 Missing 'use strict' statement. var Calculator = function () {}; // Line 1, Pos 31 #2 Empty block. var Calculator = function () {}; // Line 1, Pos 30 #3 Expected exactly one space between 'function' and '('. Calculator.prototype.add = function(a, b) { // Line 3, Po #4 Missing 'use strict' statement. if('number' !== typeof a ||'number' !== typeof b) // Line #5 Expected exactly one space between 'if' and '('. if('number' !== typeof a ||'number' !== typeof b) // Line #6 Missing space between '||' and 'number'. if('number' !== typeof a ||'number' !== typeof b) // Line #7 Expected exactly one space between ')' and 'throw'. throw new Error('Can add only numbers'); // Line 6, Pos 9 #8 Expected '{' and instead saw 'throw'. throw new Error('Can add only numbers'); // Line 6, Pos 9 #9 Stopping. (54% scanned). // Line 6, Pos 9 Tuesday 5 November 13
  22. 22. ESVALIDATE by http://esprima.org/ Tuesday 5 November 13
  23. 23. sudo npm install -g esvalidate Tuesday 5 November 13
  24. 24. return 42; // Return statement not inside a function function f() { 'use strict'; // No more octal var x = 042; // Duplicate property var y = { x: 1, x: 2 }; // With statement can't be used with (z) {} } Tuesday 5 November 13
  25. 25. validate.js:1: Illegal return statement validate.js:7: Octal literals are not allowed in strict mode. validate.js:10: Duplicate data property in object literal not allowed in strict mode validate.js:10: Strict mode code may not include a with statement Tuesday 5 November 13
  26. 26. KOMPLEXITÄT Tuesday 5 November 13
  27. 27. PLATO Tuesday 5 November 13
  28. 28. Tuesday 5 November 13
  29. 29. LOC Maintainability Estimated Errors in Implementation Lint Errors Tuesday 5 November 13
  30. 30. Tuesday 5 November 13
  31. 31. https://sourceforge.net/projects/pmd/files/pmd/5.0.5/pmdbin-5.0.5.zip/download Tuesday 5 November 13
  32. 32. run.sh pmd -d ./pmd -rulesets ecmascript-basic Tuesday 5 November 13
  33. 33. pmd/example.js:3:! Avoid assignments in operands pmd/example.js:3:! Avoid using global variables pmd/example.js:3:! Use ===/!== to compare with true/false or Numbers Tuesday 5 November 13
  34. 34. UnreachableCode EqualComparison InaccurateNumericLiteral AssignmentInOperand UseBaseWithParseInt ScopeForInVariable GlobalVariable AvoidTrailingComma ConsistentReturn Tuesday 5 November 13
  35. 35. CPD Tuesday 5 November 13
  36. 36. run.sh cpd --minimum-tokens 12 --files / path/to/src --language ecmascript -format xml > cpd.xml Tuesday 5 November 13
  37. 37. TESTS Tuesday 5 November 13
  38. 38. FRAMEWORKS Tuesday 5 November 13
  39. 39. Sinon.js Tuesday 5 November 13 FRAMEWORKS
  40. 40. jsunit Sinon.js Tuesday 5 November 13 FRAMEWORKS
  41. 41. jsunit Sinon.js FRAMEWORKS doh Tuesday 5 November 13
  42. 42. jsunit Sinon.js FRAMEWORKS doh Tuesday 5 November 13 JS Test Driver
  43. 43. jsunit qunit Sinon.js FRAMEWORKS doh Tuesday 5 November 13 JS Test Driver
  44. 44. jsunit qunit Sinon.js Jasmine Tuesday 5 November 13 FRAMEWORKS doh JS Test Driver
  45. 45. jsunit qunit Sinon.js Jasmine Tuesday 5 November 13 Siesta FRAMEWORKS doh JS Test Driver
  46. 46. Karma jsunit qunit Sinon.js Jasmine Tuesday 5 November 13 Siesta FRAMEWORKS doh JS Test Driver
  47. 47. SERVERSIDE VS. CLIENTSIDE Tuesday 5 November 13
  48. 48. Tuesday 5 November 13
  49. 49. Tuesday 5 November 13
  50. 50. COVERAGE Tuesday 5 November 13
  51. 51. Tuesday 5 November 13
  52. 52. ENTWICKLUNGSUMGEBUNG (IDE) Tuesday 5 November 13
  53. 53. Tuesday 5 November 13
  54. 54. SERVERSIDE https://code.google.com/p/js-test-driver/ Tuesday 5 November 13
  55. 55. AUTOMATISIERUNG Tuesday 5 November 13
  56. 56. Tuesday 5 November 13
  57. 57. JENKINS Tasks per Ant ausführen Visualisierung über Plugins Tuesday 5 November 13
  58. 58. FRAGEN? Tuesday 5 November 13
  59. 59. Kontakt Sebastian Springer sebastian.springer@mayflower.de Mayflower GmbH Mannhardtstr. 6 80538 München Deutschland @basti_springer https://github.com/sspringer82 Tuesday 5 November 13

×