47
Codequalität messen EnterJS, 01. Juli 2014

Codequalität messen (enterJS 2014)

Embed Size (px)

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.

Citation preview

Page 1: Codequalität messen (enterJS 2014)

Codequalität messen EnterJS, 01. Juli 2014

Page 2: Codequalität messen (enterJS 2014)

Andy Grunwald

• Software Engineer bei @trivago

• Open Source

• @andygrunwald

• @PHPUGDus

• andygrunwald

Page 3: Codequalität messen (enterJS 2014)

Code | qualität | messen

Page 4: Codequalität messen (enterJS 2014)
Page 5: Codequalität messen (enterJS 2014)

–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)
Page 7: Codequalität messen (enterJS 2014)

(Software)-Metriken

Page 8: Codequalität messen (enterJS 2014)

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)

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)

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)

_.isEmpty(e);

Page 12: Codequalität messen (enterJS 2014)

_.isEmpty(e);

• LOC: 19

Page 13: Codequalität messen (enterJS 2014)

_.isEmpty(e);

• LOC: 19

• CLOC: 2

Page 14: Codequalität messen (enterJS 2014)

_.isEmpty(e);

• LOC: 19

• CLOC: 2

• NCLOC: 17

Page 15: Codequalität messen (enterJS 2014)

_.isEmpty(e);

• LOC: 19

• CLOC: 2

• NCLOC: 17

• LLOC: 9

Page 16: Codequalität messen (enterJS 2014)

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)

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)

Cyclomatic Complexity / McCabe

Anzahl von Entscheidungspunkteninnerhalb einer Funktion (if, switch, for,

while, …)

Page 19: Codequalität messen (enterJS 2014)

Cyclomatic Complexity: 4

Page 20: Codequalität messen (enterJS 2014)

nPath Complexity

Anzahl einzigartiger Ausführungspfade innerhalb einer Funktion

Page 21: Codequalität messen (enterJS 2014)

nPath Complexity: 4

Page 22: Codequalität messen (enterJS 2014)

Cyclomatic Complexity === nPath?

Page 23: Codequalität messen (enterJS 2014)

Cyclomatic Complexity: 4

Page 24: Codequalität messen (enterJS 2014)

nPath Complexity: 8

Page 25: Codequalität messen (enterJS 2014)
Page 26: Codequalität messen (enterJS 2014)

escomplex

complexity-report

plato

Esprima

yardstick

jsmeter

Page 27: Codequalität messen (enterJS 2014)

ScanJS

JSHint

jsprime

DoctorJs

JSWhiz

WALA

Page 28: Codequalität messen (enterJS 2014)
Page 29: Codequalität messen (enterJS 2014)

+

Page 30: Codequalität messen (enterJS 2014)
Page 31: Codequalität messen (enterJS 2014)

Sprach-Features

Page 32: Codequalität messen (enterJS 2014)
Page 33: Codequalität messen (enterJS 2014)

JavaScript ist eine dynamische Sprache

Page 34: Codequalität messen (enterJS 2014)
Page 35: Codequalität messen (enterJS 2014)

Referenzwerte / Schwellenwerte + Kontext

Page 36: Codequalität messen (enterJS 2014)
Page 37: Codequalität messen (enterJS 2014)

Referenzwerte / Schwellenwerte

Niedrig Normal Hoch Sehr hoch

Cyclomatic

Complexity1-4 5-7 8-10 >= 11

nPath / / / >= 200

Page 38: Codequalität messen (enterJS 2014)

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)

Metriken

Page 40: Codequalität messen (enterJS 2014)

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)
Page 42: Codequalität messen (enterJS 2014)
Page 43: Codequalität messen (enterJS 2014)
Page 44: Codequalität messen (enterJS 2014)

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)

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)

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)

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