CSSplexity (Barcamp Salzburg)

Mein Vortrag am Barcamp »The Next Web« an der FH Salzburg am 21. Oktober 2016 über die Anwendung von Komplexitätsmetriken auf eine Nicht-Programmiersprache.

Transcript

1. CSSPLEXITY ANWENDUNG VON KOMPLEXITÄTSMETRIKEN AUF EINE NICHT-PROGRAMMIERSPRACHE
2. Hallo, ich bin THOMAS @RASSHOFER
3. FRONTEND ENTWICKLER @ SINNERSCHRADER
4. Wir suchen immer gute Leute! JOBS@SINNERSCHRADER.COM
5. METRIKEN
6. METRIKEN IEEE Standard 1061
7. METRIKEN IEEE Standard 1061
8. »Not everything that can be counted counts. Not everything that counts can be counted.« »You can‘t control what you can‘t measure«
9. KRITIERIEN FÜR GUTE SOFTWAREMETRIKEN?
10. KRITIERIEN FÜR GUTE METRIKEN ▸ Objektivität: Keine subjektiven Einflüsse ▸ Zuverlässigkeit: Gleiche Ergebnisse bei Wiederholung ▸ Normierung: Messergebnisskala und Vergleichbarkeitsskala ▸ Vergleichbarkeit: Maß mit anderen Maßen in Relation setzbar
11. KRITIERIEN FÜR GUTE METRIKEN ▸ Ökonomische Effizienz: Minimale Kosten ▸ Nützlichkeit: Messbare Erfüllung praktischer Bedürfnisse ▸ Validität: Schluss von messbaren Größen auf andere Kenngrößen
12. LOC
14. LINES OF CODE So einfach wie unaussagekräftig (→ Nützlichkeit und Validität) ▸ Zeilen mit »echtem« Code ▸ Zeilen mit Kommentaren (insgesamt vs. einzeilig vs. Blöcke) ▸ Zeilen mit Code und Kommentaren ▸ Leere Zeilen
15. LINES OF CODE
16. CSS-KOMPLEXITÄT UND -PERFORMANCE
17. PARKER
18. ANALYZE-CSS
19. ANALYZE-CSS
20. ANALYZE-CSS
21. ZYKLOMATISCHE KOMPLEXITÄT
23. !
24. ZYKLOMATISCHE KOMPLEXITÄT Eine statische Quellcode-Metrik, die durch Erstellung eines Kontrollflussgraphen berechnet wird. Definiert als Anzahl linear unabhängiger Pfade durch den Fluss des Quellcodes des Programms. !
25. ZYKLOMATISCHE KOMPLEXITÄT Unabhängige Pfade sind definiert als Pfade, die zumindest eine Kante besitzen, die in keinem anderen Pfad durchlaufen wurde. Kontrollfluss bildet ein Programm als Graph ab, bestehend aus Knoten (Nodes) und Kanten (Edges). !
26. ZYKLOMATISCHE KOMPLEXITÄT Kann durch folgende Formel berechnet werden… ▸ = Anzahl der Kanten (Edges) im Graphen ▸ = Anzahl der Knoten (Nodes) im Graphen ▸ = Anzahl der Knoten (Nodes) mit Exit-Points
27. ZYKLOMATISCHE KOMPLEXITÄT In einem binären Kontext kann sie wie folgt berechnet werden… ▸ = Anzahl der Binärverzweigungen (= Knoten, die eine Bedingung enthalten) (»Anzahl an Entscheidungen plus Eins«)
28. ZYKLOMATISCHE KOMPLEXITÄT Komplexitätszahlen und ihre Entsprechungen ▸ 1–10 = strukturiert und gut geschrieben, geringes Risiko ▸ 11–20 = komplex, erträgliches Risiko ▸ 21–50 = sehr komplex, hohes Risiko ▸ >50 = untestbar, extrem hohes Risiko
29. ZYKLOMATISCHE KOMPLEXITÄT
30. ZYKLOMATISCHE KOMPLEXITÄT Prinzipiell die Anzahl der IFs/ELSEs sowie die Ermittlung der Anzahl der Pfade durch das Programm. (= Anzahl der möglichen Ergebnisse der gegebenen Bedingungen) Faustregel: Je kleiner die zyklomatische Komplexität eines Programms, desto einfacher ist es, es zu verstehen, desto geringer ist das Risiko, es zu modifizieren.
31. ZYKLOMATISCHE KOMPLEXITÄT ANGEWANDT AUF CSS
32. ZYKLOMATISCHE KOMPLEXITÄT BEI CSS Angewandt auf CSS, sprechen wir von der Anzahl der Entscheidungen, die ein Browser treffen muss, ob er ein Element styled oder nicht. Faustregel: Jeder Teil eines CSS-Selektors ist ein IF-Statement. Aus je mehr IF-Statements ein Selektor besteht, desto größer ist seine zyklomatische Komplexität.
33. ZYKLOMATISCHE KOMPLEXITÄT BEI CSS spiegel.de .column-wide .asset-list-box-hp-special ul li div.video-pic div.image-buttons-panel a span.button.btn-video-text tesla.com .footer-publisher__row--more
34. SELEKTOREN = SUBJEKTE + KONDITIONEN .column-wide .asset-list-box-hp-special ul li div.video-pic div.image-buttons-panel a span.button.btn-video-text { // Do something } ▸ Subjekt (um was es geht): .btn-video-text ▸ Kondition (unnötige Komplexität): .column-wide .asset- list-box-hp-special ul li div.video-pic div.image-buttons-panel a span.button
35. BEISPIELE a#content.active > div::first-line [data-content] (Anzahl der Kanten) (Anzahl der Knoten) (Anzahl der Exit-Knoten) !
36. BEISPIELE .column-wide .asset-list-box-hp-special ul li div.video-pic div.image-buttons-panel a span.button.btn-video-text (Anzahl der Kanten) (Anzahl der Knoten) (Anzahl der Exit-Knoten) !
37. BEISPIELE .footer-publisher__row--more (Anzahl der Kanten) (Anzahl der Knoten) (Anzahl der Exit-Knoten) !
38. BEISPIELE
39. BEISPIELE
40. BEISPIELE
41. HALSTEAD METRIKEN
42. HALSTEAD-METRIKEN ▸ Vokabular: ▸ Länge: ▸ Volumen: ▸ Schwierigkeit (zu verstehen): ▸ Aufwand (um zu verstehen):
43. HALSTEAD-METRIKEN ▸ = Anzahl der einzigartigen Operatoren ▸ = Anzahl der einzigartigen Operanden ▸ = Gesamtanzahl der Operatoren ▸ = Gesamtanzahl der Operanden
44. HALSTEAD-METRIKEN ▸ Operatoren = Schlüsselwörter = if, (), {} ▸ Operanden = Bezeichner = foo, bar, 123
45. HALSTEAD-METRIKEN if (a < 5) { if (a > 10) b = b * a; } Einzigartige Operatoren: if, (, ), {, }, >, <, =, *, ; Einzigartige Operanden: a, 5, 10, b
46. HALSTEAD-METRIKEN ANGEWANDT AUF CSS
47. HALCSSTEAD IF (is_child()) { IF (is_pseudo_element('first-line')) { IF (is_on('div')) { IF (is_adjacent_sibling()) { IF (is_class('active')) { IF (is_id('content')) { IF (is_on('a')) { … } } } } } } }
48. HALCSSTEAD Einzigartige Operatoren: if, (, ), {, } ▸ ▸
49. HALCSSTEAD Einzigartige Operanden: is_child, is_pseudo_element, first-line, is_on, div, is_adjacent_sibling, is_class, active, is_id, content, a ▸ ▸
50. HALCSSTEAD / / ▸ Vokabular: ▸ Länge: ▸ Volumen: ▸ Schwierigkeit: ▸ Aufwand:
51. GROSSARTIG. UND JETZT?
52. Jedes Mal, wenn du qualifizierst oder verschachtelst, fügst du ein neues IF-Statement hinzu. Behalte diese IFs stets im Hinterkopf, um deine Selektoren vernünftig/sinnvoll zu halten.
53. Halte die (zyklomatische) Komplexität minimal. Verwende Tools wie CSSplexity, Parker oder analyze-css, um Metriken zu deinen Selektoren zu erhalten.
54. Wenn eine Verschachtelung nicht wirklich notwendig ist, dann füge sie auch nicht ein. Manchmal ist Verschachteln in CSS notwendig, meistens nicht.
55. Lies deine Selektoren von rechts. Beginne mit dem Teil, den du eigentlich benötigst. Stelle so wenig zusätzliches CSS voran wie möglich, um das korrekte Ergebnis zu erzielen.
56. Keine Hacks beim Sinn und Zweck des Selektors. Stelle sicher, dass du die Selektoren schreibst, die du benötigst, nicht die, die gerade irgendwie funktionieren.
57. SCSSPLEXITY? LESSPLEXITY? BALD? ES LIEGT AN EUCH!
58. ABSCHLIESSENDE WORTE Metriken müssen für Anwendungszwecke justiert werden. Es gibt keine allgemeingültigen Standards. Definiert euer eigenes Set an Metriken und ihre Maxima für euer Projekt. Metriken sind kein Ersatz für Revisionen, Tests oder Verifizierungen.
60. LINKS CSSplexity: github.com/rasshofer/cssplexity Visualization: github.com/rasshofer/cssplexity-visualization CLI: github.com/rasshofer/cssplexity-cli Parker: github.com/katiefenn/parker analyze-css: github.com/macbre/analyze-css sloc: github.com/flosse/sloc
61. LINKS McCabe’s Paper: literateprogramming.com/mccabe.pdf IEEE Standard 1061: cow.ceng.metu.edu.tr/Courses/ download_courseFile.php?id=2681
62. SINNERSCHRADER.COM JOBS@SINNERSCHRADER.COM