codequalität messen (enterjs 2014)
DESCRIPTION
German talk. Hold at the enterJS 2014 in Cologne at 1st July 2014 (11:40 - 12:25) German description: Bei gesetzten Sprachen wie Java, C und PHP gehören Tools zum Messen von Kennzahlen zur Bestimmung der Qualität von Software zum Alltag. Für JavaScript ist das noch ein recht neuer Bereich. Besonders in modernen Webprojekten ist eine Charakterisierung der Software in Bezug auf Qualitätskennzahlen allerdings ein wichtiger Faktor hinsichtlich der Entwicklungs- und Ausführungsgeschwindigkeit sowie der Stabilität. Dieser Vortrag gibt eine Einführung in Metriken, wie sie sich erfassen und für die tägliche Arbeit nutzen lassen.TRANSCRIPT
![Page 1: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/1.jpg)
Codequalität messen EnterJS, 01. Juli 2014
![Page 2: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/2.jpg)
Andy Grunwald
• Software Engineer bei @trivago
• Open Source
• @andygrunwald
• @PHPUGDus
• andygrunwald
![Page 3: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/3.jpg)
Code | qualität | messen
![Page 4: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/4.jpg)
![Page 5: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/5.jpg)
–Helmut Balzert
„Unter Softwarequalität versteht man die Gesamtheit der Merkmale … eines Softwareprodukts, …, festgelegte oder
vorausgesetzte Erfordernisse zu erfüllen.“
![Page 6: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/6.jpg)
![Page 7: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/7.jpg)
(Software)-Metriken
![Page 8: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/8.jpg)
Frontend
HTTP Requests
Navigation Timing
DOM Elemente
Browser Repaints
…
Backend
Request-Zeit
Cache-Miss / -Hits
Ressource-Zeit
Business-Logik
…
Source Code
![Page 9: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/9.jpg)
Source Code
Functions count
Nested depth
Halstead
Maintainability index
LOC
Parameter count
Cyclomatic ComplexitynPath
Lint errors
CLOCLLOC
Your metric here
![Page 10: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/10.jpg)
Source Code
Functions count
Nested depth
Halstead
Maintainability index
LOC
Parameter count
Cyclomatic ComplexitynPath
Lint errors
CLOCLLOC
Your metric here
![Page 11: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/11.jpg)
_.isEmpty(e);
![Page 12: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/12.jpg)
_.isEmpty(e);
• LOC: 19
![Page 13: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/13.jpg)
_.isEmpty(e);
• LOC: 19
• CLOC: 2
![Page 14: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/14.jpg)
_.isEmpty(e);
• LOC: 19
• CLOC: 2
• NCLOC: 17
![Page 15: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/15.jpg)
_.isEmpty(e);
• LOC: 19
• CLOC: 2
• NCLOC: 17
• LLOC: 9
![Page 16: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/16.jpg)
Source Code
Functions count
Nested depth
Halstead
Maintainability index
LOC
Parameter count
Cyclomatic ComplexitynPath
Lint errors
CLOCLLOC
Your metric here
![Page 17: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/17.jpg)
Source Code
Functions count
Nested depth
Halstead
Maintainability index
LOC
Parameter count
Cyclomatic Complexity nPath
Lint errors
CLOCLLOC
Your metric here
![Page 18: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/18.jpg)
Cyclomatic Complexity / McCabe
Anzahl von Entscheidungspunkteninnerhalb einer Funktion (if, switch, for,
while, …)
![Page 19: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/19.jpg)
Cyclomatic Complexity: 4
![Page 20: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/20.jpg)
nPath Complexity
Anzahl einzigartiger Ausführungspfade innerhalb einer Funktion
![Page 21: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/21.jpg)
nPath Complexity: 4
![Page 22: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/22.jpg)
Cyclomatic Complexity === nPath?
![Page 23: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/23.jpg)
Cyclomatic Complexity: 4
![Page 24: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/24.jpg)
nPath Complexity: 8
![Page 25: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/25.jpg)
![Page 26: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/26.jpg)
escomplex
complexity-report
plato
Esprima
yardstick
jsmeter
![Page 27: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/27.jpg)
ScanJS
JSHint
jsprime
DoctorJs
JSWhiz
WALA
![Page 28: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/28.jpg)
![Page 29: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/29.jpg)
+
![Page 30: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/30.jpg)
![Page 31: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/31.jpg)
Sprach-Features
![Page 32: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/32.jpg)
![Page 33: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/33.jpg)
JavaScript ist eine dynamische Sprache
![Page 34: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/34.jpg)
![Page 35: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/35.jpg)
Referenzwerte / Schwellenwerte + Kontext
![Page 36: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/36.jpg)
![Page 37: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/37.jpg)
Referenzwerte / Schwellenwerte
Niedrig Normal Hoch Sehr hoch
Cyclomatic
Complexity1-4 5-7 8-10 >= 11
nPath / / / >= 200
![Page 38: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/38.jpg)
Java (45 Projekte)
Metrik Niedrig Normal Hoch Sehr hoch
CYCLO/LOC 0.16 0.20 0.24 0.36
LOC/Methode 7 10 13 19.5
NOM/Class 4 7 10 15
C++ (37 Projekte)
Metrik Niedrig Normal Hoch Sehr hoch
CYCLO/LOC 0.20 0.25 0.30 0.45
LOC/Methode 5 10 16 24
NOM/Class 4 9 15 22.5
![Page 39: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/39.jpg)
Metriken
![Page 40: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/40.jpg)
Source Code
Functions count
Nested depth
Halstead
Maintainability index
LOC
Parameter count
Cyclomatic ComplexitynPath
Lint errors
CLOCLLOC
Your metric here
![Page 41: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/41.jpg)
![Page 42: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/42.jpg)
![Page 43: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/43.jpg)
![Page 44: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/44.jpg)
Verwendete Bilder
• „Ruler“ by Scott Akerman: https://www.flickr.com/photos/sterlic/4299631538/
• „the JavaScript Code“ by Dmitry Baranovskiy: https://www.flickr.com/photos/dmitry-baranovskiy/2378867408
• „Ignition“ by Zach Dischner: https://www.flickr.com/photos/zachd1_618/3489625168
• „Tools IMG_0171“ by OZinOH: https://www.flickr.com/photos/75905404@N00/7126146307
![Page 45: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/45.jpg)
Verwendete Bilder
• „Danger & Skull, Legoland“ by bixentro: https://www.flickr.com/photos/bixentro/338433029
• „Baby“ by The Noun Project: http://thenounproject.com/term/baby/47/
• „Man“ by The Noun Project: http://thenounproject.com/term/man/2/
• „Sasquatch“ by Mike Wirth: http://thenounproject.com/term/sasquatch/2680/
![Page 46: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/46.jpg)
Verwendete Bilder
• „Waking Up In Abbeyford Woods“ by Miles Wolstenholme: https://www.flickr.com/photos/oaktorphotography/14444806464
• „Danke 102/365“ by Dennis Skley: https://www.flickr.com/photos/dskley/13796815083/
• „Questions“ by Oberazzi: https://www.flickr.com/photos/oberazzi/318947873/in/photostream/
![Page 47: Codequalität messen (enterJS 2014)](https://reader033.vdocuments.pub/reader033/viewer/2022061218/54b753ee4a795917738b45b3/html5/thumbnails/47.jpg)
Zitate und Tabellen
• Helmut Balzert: Lehrbuch der Softwaretechnik. Band 2: Softwaremanagement, Software-Qualitätssicherung, Unternehmensmodellierung, Spektrum Akademischer Verlag, Heidelberg 1998, ISBN 3-8274-0065-1, S. 257
• Michele Lanza, Radu Marinescu: Object-Oriented Metrics in Practice: Using Software Metrics to Characterize, Evaluate, and Improve the Design of Object-Oriented Systems, Springer 2006, ISBN 3540244298