Codequalität messen EnterJS, 01. Juli 2014
Andy Grunwald
• Software Engineer bei @trivago
• Open Source
• @andygrunwald
• @PHPUGDus
• andygrunwald
Code | qualität | messen
–Helmut Balzert
„Unter Softwarequalität versteht man die
Gesamtheit der Merkmale … eines
Softwareprodukts, …, festgelegte ...
(Software)-Metriken
Frontend
HTTP Requests
Navigation Timing
DOM Elemente
Browser Repaints
…
Backend
Request-Zeit
Cache-Miss / -Hits
Ressource...
Source Code
Functions count
Nested depth
Halstead
Maintainability index
LOC
Parameter count
Cyclomatic Complexity
nPath
Li...
Source Code
Functions count
Nested depth
Halstead
Maintainability index
LOC
Parameter count
Cyclomatic Complexity
nPath
Li...
_.isEmpty(e);
_.isEmpty(e);
• LOC: 19
_.isEmpty(e);
• LOC: 19
• CLOC: 2
_.isEmpty(e);
• LOC: 19
• CLOC: 2
• NCLOC: 17
_.isEmpty(e);
• LOC: 19
• CLOC: 2
• NCLOC: 17
• LLOC: 9
Source Code
Functions count
Nested depth
Halstead
Maintainability index
LOC
Parameter count
Cyclomatic Complexity
nPath
Li...
Source Code
Functions count
Nested depth
Halstead
Maintainability index
LOC
Parameter count
Cyclomatic Complexity
nPath
Li...
Cyclomatic Complexity / McCabe
Anzahl von Entscheidungspunkten
innerhalb einer Funktion (if, switch, for, while, …)
Cyclomatic Complexity: 4
nPath Complexity
Anzahl einzigartiger Ausführungspfade
innerhalb einer Funktion
nPath Complexity: 4
Cyclomatic Complexity === nPath?
Cyclomatic Complexity: 4
nPath Complexity: 8
escomplex
complexity-report
plato
Esprima
yardstick
jsmeter
ScanJS
JSHint
jsprime
DoctorJs
JSWhiz
WALA
+
Sprach-Features
JavaScript ist eine dynamische Sprache
Referenzwerte / Schwellenwerte + Kontext
Referenzwerte / Schwellenwerte
Niedrig Normal Hoch Sehr hoch
Cyclomatic Complexity 1-4 5-7 8-10 >= 11
nPath / / / >= 200
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...
Metriken
Source Code
Functions count
Nested depth
Halstead
Maintainability index
LOC
Parameter count
Cyclomatic Complexity
nPath
Li...
Verwendete Bilder
• „Ruler“ by Scott Akerman:
https://www.flickr.com/photos/sterlic/4299631538/
• „the JavaScript Code“ by...
Verwendete Bilder
• „Danger & Skull, Legoland“ by bixentro:
https://www.flickr.com/photos/bixentro/338433029
• „Baby“ by T...
Verwendete Bilder
• „Waking Up In Abbeyford Woods“ by Miles
Wolstenholme:
https://www.flickr.com/photos/oaktorphotography/...
Zitate und Tabellen
• Helmut Balzert: Lehrbuch der Softwaretechnik. Band 2:
Softwaremanagement, Software-Qualitätssicherun...
Codequalität messen (enterJS 2014)
Codequalität messen (enterJS 2014)
Codequalität messen (enterJS 2014)
Codequalität messen (enterJS 2014)
Codequalität messen (enterJS 2014)
Codequalität messen (enterJS 2014)
Codequalität messen (enterJS 2014)
Codequalität messen (enterJS 2014)
Codequalität messen (enterJS 2014)
Codequalität messen (enterJS 2014)
Codequalität messen (enterJS 2014)
Upcoming SlideShare
Loading in...5
×

Codequalität messen (enterJS 2014)

802

Published on

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.

Published in: Software, Technology, Sports
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
802
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Verteilung:
    Wer ist denn Entwickler? Wer ist denn Teamleader oder Entscheider?
    Vorlieben:
    Wer mag denn Mathe bzw. Statistik?
  • Bachelor of Science in Wirtschaftsinformatik

    Anfang 2013 bei trivago
    Backend: Skalierung, Caching-Infrastruktur, Architektur (Hardware + Software)

    @PHPUGDus: Alles außer PHP … Web / Developer-Themen
  • Was bedeutet „Codequalität messen“ eigentlich?

    Im Duden steht “leider” nichts
  • Code
    JavaScript-Konferenz
    => Quellcode bzw. Innenleben von Software ==> JavaScript

    Viele der Konzepte / Kennzahlen auf andere Sprachen übertragbar!
    Bitte beachten: OOP, Funktionsorientiert, Prototyporientiert, etc.
  • Qualität
    Softwarequalität: Ist === Soll-Zustand
    Codequalität: Teilaspekt von Softwarequalität
    Nicht-funktionale Anforderungen:
    Konformität, Verständlichkeit, Analysierbarkeit, Modifizierbarkeit,Prüfbarkeit
    => Codestruktur!
  • messen
    Merkmale / Eigenschaften werden als numerische Werte zusammengefasst.

    Ergebnis: Messwert + Einheit

    => Übertragen auf Software: Software-Metriken
  • Wer hat denn bereits Erfahrungen mit Kennzahlen oder Metriken?
    trivago usecase: Reicht die Server-Infrastruktur für die TV-Werbung?
    Argumente für
    … eine Anschaffung?
    … Refactoring?
    => Steigen wir ein…
  • ====> „Was wollen wir messen?“
    Fast alles messbar. Macht alles Sinn?

    Codequalität … Nicht funktionale Anforderungen
    Qualitätsmerkmale wie z.B. Wartbarkeit, Erweiterbarkeit oder Verständlichkeit
  • Auch hier: ==> „Was wollen wir messen?“
    Fast alles messbar. Macht alles Sinn?

    Kleiner Ausschnitt von Metriken.
    Zählmetriken: LOC …
    Zusammengesetzte Metriken + mehreren Faktoren: Halstead, Maintainability Index
  • Kleiner Anfang mit simplen Metriken: LOC, CLOC, NCLOC, LLOC
  • Leicht gekürzte isEmpty von Underscore.js

    LOC, CLOC, NCLOC, LLOC
  • Lines of code
  • Commented LOC
  • Non commented LOC / Physical LOC
  • Logical LOC

    Soweit alles klar?
    Recht einfach, oder?
  • Noch mal zur Übersicht.
    4 Metriken. 3 dargestellt.
  • Etwas komplizierter
    Allein betrachtet (meiner Meinung nach) sinnvoller

    Start: Definition
  • Indikator für die Komplexität des (Teil)-Programms
    => Variablennamen + Kommentare tragen auch dazu bei

    Synonym: McCabe
  • Cyclomatic Complexity

    Nicht der schönste Code.
    Hat bestimmt jeder Entwickler schon gesehen
  • Branch coverage:
    Anzahl der Tests um alle Möglichkeiten getestet zu haben
  • nPath
  • Nun könnte man meinen:
    Beides das selbe?

    => Nein: Ein anderes Beispiel
  • Cyclomatic Complexity
  • nPath
  • Tools
    Es gibt nicht DAS Tool (leider)

    Tooling ist bescheiden, da gibt es noch viel zu tun
  • ScanJS: Security Analyse von Mozilla, kann auch dazu verwendet werden
    JSHint: maxcomplexity option
    jsprime: Security Analyse Tool -> basiert auf Esprima
    DoctorJs: Mozilla
    JSWhiz: Static Analysis for JavaScript Memory Leaks (Google)
    Weitere Tools: WALA, cloc, sloc, sclc, pmd
  • Open platform to manage code quality

    Plugins für jede Sprache: JavaScript, CSS, PHP, Java, .NET, …
    Multi-Language-Projects
  • Jetzt kommt das große AAAAABER …

    Es besteht Gefahr bei falscher Nutzung von Metriken
  • Viele der Konzepte / Kennzahlen auf andere Sprachen übertragbar!
    Bitte beachten: OOP, Funktionsorientiert, Prototyporientiert, etc.

    Einfache Portierung von Tools aus Java und C nicht möglich.
  • foo-loop: Jeder

    for-in: Steigen die meisten aus

    .forEach: Selten -> yardstick
  • Statische Code-Analyse
    Code wird nicht ausgeführt, sondern nur untersucht

    => Wissenschafter: v8 gehooked … Analyse beim ausführen
    Vorteile: Analyse zur Ausführung (dynamische Inhalte)
    Nachteil: Nicht der ganze Code
  • Ein normaler Mensch: 1,80m groß. Normal? Groß? Klein?

    Gegenüber einem Baby: Groß
    Gegenüber einem Yeti: Klein
  • Es kommt nicht nur auf die Sprache an, sondern auch auf den Kontext

    Was ist das für eine Software?
    => Library, Framework, Applikation?
    => Aus welchem Bereich? Medizin? Statische Code Analyse? etc.
  • Welche Metriken sind wichtig?
  • Wald vor lauter Bäumen nicht
    Eine Herausforderung.

    Wie ist die Fragestellung? Was will ich erreichen?
  • Geklaut: http://de.slideshare.net/JarrodOverson/complexity-28214103?qid=597db38e-e335-46a8-9d53-d811d3f1b90d&v=default&b=&from_search=2 (Folie 6)
  • Geklaut: Folie 19 (http://de.slideshare.net/JarrodOverson/complexity-28214103?qid=597db38e-e335-46a8-9d53-d811d3f1b90d&v=default&b=&from_search=2)
  • Geklaut von http://manuel-pichler.de/stuff/slides/2009-09-12-phpunconf-softwaremetriken-verstehen-und-nutzen.pdf (Folie 4)
  • Geklaut: http://manuel-pichler.de/stuff/slides/2009-09-12-phpunconf-softwaremetriken-verstehen-und-nutzen.pdf
  • Geklaut: http://manuel-pichler.de/stuff/slides/2009-09-12-phpunconf-softwaremetriken-verstehen-und-nutzen.pdf
    http://jmikola.github.io/slides/beautiful_measurable_software/#/14/3
  • Geklaut: http://manuel-pichler.de/stuff/slides/2009-09-12-phpunconf-softwaremetriken-verstehen-und-nutzen.pdf
    http://jmikola.github.io/slides/beautiful_measurable_software/#/14/3
  • Geklaut: http://manuel-pichler.de/stuff/slides/2009-09-12-phpunconf-softwaremetriken-verstehen-und-nutzen.pdf
  • Zitat von S. 11 von dem Object Oriented metrics buch
  • Geklaut: http://jmikola.github.io/slides/beautiful_measurable_software/#/23/1
  • Geklaut: http://de.slideshare.net/proofek/magic-behind-the-numbers-software-metrics-in-practice-11308143 (Folie 71)
  • Geklaut: http://de.slideshare.net/ircmaxell/development-by-the-numbers-confoo
  • Geklaut: http://de.slideshare.net/heavysixer/code-quality-29610071?qid=597db38e-e335-46a8-9d53-d811d3f1b90d&v=default&b=&from_search=6
  • Geklaut: http://de.slideshare.net/heavysixer/code-quality-29610071?qid=597db38e-e335-46a8-9d53-d811d3f1b90d&v=default&b=&from_search=6
  • Geklaut: http://de.slideshare.net/heavysixer/code-quality-29610071?qid=597db38e-e335-46a8-9d53-d811d3f1b90d&v=default&b=&from_search=6
  • Geklaut: http://de.slideshare.net/heavysixer/code-quality-29610071?qid=597db38e-e335-46a8-9d53-d811d3f1b90d&v=default&b=&from_search=6
  • Geklaut: http://de.slideshare.net/heavysixer/code-quality-29610071?qid=597db38e-e335-46a8-9d53-d811d3f1b90d&v=default&b=&from_search=6
  • Geklaut: http://de.slideshare.net/heavysixer/code-quality-29610071?qid=597db38e-e335-46a8-9d53-d811d3f1b90d&v=default&b=&from_search=6
  • Geklaut: http://de.slideshare.net/kiwankang76/code-metrics-32380341?qid=597db38e-e335-46a8-9d53-d811d3f1b90d&v=qf1&b=&from_search=36
  • Codequalität messen (enterJS 2014)

    1. 1. Codequalität messen EnterJS, 01. Juli 2014
    2. 2. Andy Grunwald • Software Engineer bei @trivago • Open Source • @andygrunwald • @PHPUGDus • andygrunwald
    3. 3. Code | qualität | messen
    4. 4. –Helmut Balzert „Unter Softwarequalität versteht man die Gesamtheit der Merkmale … eines Softwareprodukts, …, festgelegte oder vorausgesetzte Erfordernisse zu erfüllen.“
    5. 5. (Software)-Metriken
    6. 6. Frontend HTTP Requests Navigation Timing DOM Elemente Browser Repaints … Backend Request-Zeit Cache-Miss / -Hits Ressource-Zeit Business-Logik … Source Code
    7. 7. Source Code Functions count Nested depth Halstead Maintainability index LOC Parameter count Cyclomatic Complexity nPath Lint errors CLOC LLOC Your metric here
    8. 8. Source Code Functions count Nested depth Halstead Maintainability index LOC Parameter count Cyclomatic Complexity nPath Lint errors CLOC LLOC Your metric here
    9. 9. _.isEmpty(e);
    10. 10. _.isEmpty(e); • LOC: 19
    11. 11. _.isEmpty(e); • LOC: 19 • CLOC: 2
    12. 12. _.isEmpty(e); • LOC: 19 • CLOC: 2 • NCLOC: 17
    13. 13. _.isEmpty(e); • LOC: 19 • CLOC: 2 • NCLOC: 17 • LLOC: 9
    14. 14. Source Code Functions count Nested depth Halstead Maintainability index LOC Parameter count Cyclomatic Complexity nPath Lint errors CLOC LLOC Your metric here
    15. 15. Source Code Functions count Nested depth Halstead Maintainability index LOC Parameter count Cyclomatic Complexity nPath Lint errors CLOC LLOC Your metric here
    16. 16. Cyclomatic Complexity / McCabe Anzahl von Entscheidungspunkten innerhalb einer Funktion (if, switch, for, while, …)
    17. 17. Cyclomatic Complexity: 4
    18. 18. nPath Complexity Anzahl einzigartiger Ausführungspfade innerhalb einer Funktion
    19. 19. nPath Complexity: 4
    20. 20. Cyclomatic Complexity === nPath?
    21. 21. Cyclomatic Complexity: 4
    22. 22. nPath Complexity: 8
    23. 23. escomplex complexity-report plato Esprima yardstick jsmeter
    24. 24. ScanJS JSHint jsprime DoctorJs JSWhiz WALA
    25. 25. +
    26. 26. Sprach-Features
    27. 27. JavaScript ist eine dynamische Sprache
    28. 28. Referenzwerte / Schwellenwerte + Kontext
    29. 29. Referenzwerte / Schwellenwerte Niedrig Normal Hoch Sehr hoch Cyclomatic Complexity 1-4 5-7 8-10 >= 11 nPath / / / >= 200
    30. 30. 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
    31. 31. Metriken
    32. 32. Source Code Functions count Nested depth Halstead Maintainability index LOC Parameter count Cyclomatic Complexity nPath Lint errors CLOC LLOC Your metric here
    33. 33. 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/7126146 307
    34. 34. 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/
    35. 35. Verwendete Bilder • „Waking Up In Abbeyford Woods“ by Miles Wolstenholme: https://www.flickr.com/photos/oaktorphotography/14444 806464 • „Danke 102/365“ by Dennis Skley: https://www.flickr.com/photos/dskley/13796815083/ • „Questions“ by Oberazzi: https://www.flickr.com/photos/oberazzi/318947873/in/ph otostream/
    36. 36. 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
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×