Where to start refactoring?
2 likes427 views
My talk at Berlin Beautiful Code Meetup (11.Jul.2016) Video: https://youtu.be/HyE-LbP1Ob0
Where to start refactoring?
- 2. Agenda 1. Identify biggest files 2. Identify most complex files 3. Identify most changed files 4. Crossing our findings
- 4. $ git clone https://github.com/jquery/jquery.git $ cd jquery $ git checkout 3.1.0
- 6. $ find src -type f | xargs wc -l | sort | tail
- 7. $ find src -type f | xargs wc -l | sort | tail 234 src/callbacks.js 237 src/selector-native.js 389 src/deferred.js 424 src/css.js 481 src/core.js 486 src/manipulation.js 688 src/effects.js 726 src/event.js 855 src/ajax.js 9026 total
- 9. $ brew install cloc $ find src -type f | xargs cloc —by-file | head -n 20
- 10. $ find src -type f | xargs cloc —by-file | head -n 20 … omitted output … File blank comment code ----------------------------------------------------------------------------------------- src/effects.js 101 56 531 src/ajax.js 168 179 508 src/event.js 125 94 507 src/manipulation.js 93 44 349 src/core.js 104 78 299 src/css.js 81 65 278 src/deferred.js 66 86 237 src/selector-native.js 38 47 152 src/offset.js 42 38 152 … omitted output …
- 16. $ npm install -g jscomplexity $ cd src $ jscomplexity
- 17. $ jscomplexity ┌────────────────────────────────────────────────────────────────────────────────┬────────────────────┐ │ File │ Complexity │ ├────────────────────────────────────────────────────────────────────────────────┼────────────────────┤ │ ./ajax.js │ 123 │ │ ./event.js │ 120 │ │ ./effects.js │ 108 │ │ ./manipulation.js │ 77 │ │ ./css.js │ 73 │ │ ./core.js │ 54 │ │ ./selector-native.js │ 44 │ │ ./event/trigger.js │ 38 │ … omitted output …
- 19. $ git log --pretty=format: --name-only -- src | sort | uniq -c | sort -rg | head
- 20. $ git log --pretty=format: --name-only -- src | sort | uniq -c | sort -rg | head 4115 601 src/core.js 560 src/event.js 379 src/ajax.js 346 src/manipulation.js 343 src/jquery/jquery.js 239 src/attributes.js 236 src/css.js 222 src/sizzle 201 src/effects.js
- 21. $ git log --pretty=format: --name-only --after="1 year ago" -- src | sort | uniq -c | sort -rg | head
- 22. $ git log --pretty=format: --name-only --after="1 year ago" -- src | sort | uniq -c | sort -rg | head 137 22 src/event.js 17 src/core.js 14 src/ajax.js 13 src/manipulation.js 11 src/deferred.js 11 src/css.js 10 src/css/showHide.js 9 src/offset.js 9 src/effects.js
- 24. $ shopt -s globstar # if you are on bash (4+) $ git effort --above 8 src/**/*.js -- --after="1 year ago"
- 25. $ git effort --above 8 src/**/*.js -- --after="1 year ago” path commits active days src/event.js................................. 22 21 src/core.js.................................. 17 16 src/ajax.js.................................. 14 14 src/manipulation.js.......................... 13 11 src/deferred.js.............................. 11 11 src/css.js................................... 11 11 src/css/showHide.js.......................... 10 10 src/offset.js................................ 9 8 src/effects.js............................... 9 8
- 27. File code --------------------------- src/effects.js 531 src/ajax.js 508 src/event.js 507 src/manipulation.js 349 src/core.js 299 src/css.js 278 │ File │ Cmp │ ├───────────────────┼─────┤ │ ./ajax.js │ 123 │ │ ./event.js │ 120 │ │ ./effects.js │ 108 │ │ ./manipulation.js │ 77 │ │ ./css.js │ 73 │ │ ./core.js │ 54 │ path commits src/event.js............ 22 src/core.js............. 17 src/ajax.js............. 14 src/manipulation.js..... 13 src/deferred.js......... 11 src/css.js.............. 11 src/css/showHide.js..... 10 src/offset.js........... 9 src/effects.js.......... 9 Biggest Most complex Most changed
- 28. File code --------------------------- src/effects.js 531 src/ajax.js 508 src/event.js 507 src/manipulation.js 349 src/core.js 299 src/css.js 278 │ File │ Cmp │ ├───────────────────┼─────┤ │ ./ajax.js │ 123 │ │ ./event.js │ 120 │ │ ./effects.js │ 108 │ │ ./manipulation.js │ 77 │ │ ./css.js │ 73 │ │ ./core.js │ 54 │ path commits src/event.js............ 22 src/core.js............. 17 src/ajax.js............. 14 src/manipulation.js..... 13 src/deferred.js......... 11 src/css.js.............. 11 src/css/showHide.js..... 10 src/offset.js........... 9 src/effects.js.......... 9 Biggest Most complex Most changed
- 29. File code --------------------------- src/effects.js 531 src/ajax.js 508 src/event.js 507 src/manipulation.js 349 src/core.js 299 src/css.js 278 │ File │ Cmp │ ├───────────────────┼─────┤ │ ./ajax.js │ 123 │ │ ./event.js │ 120 │ │ ./effects.js │ 108 │ │ ./manipulation.js │ 77 │ │ ./css.js │ 73 │ │ ./core.js │ 54 │ path commits src/event.js............ 22 src/core.js............. 17 src/ajax.js............. 14 src/manipulation.js..... 13 src/deferred.js......... 11 src/css.js.............. 11 src/css/showHide.js..... 10 src/offset.js........... 9 src/effects.js.......... 9 Biggest Most complex Most changed
- 30. File code --------------------------- src/effects.js 531 src/ajax.js 508 src/event.js 507 src/manipulation.js 349 src/core.js 299 src/css.js 278 │ File │ Cmp │ ├───────────────────┼─────┤ │ ./ajax.js │ 123 │ │ ./event.js │ 120 │ │ ./effects.js │ 108 │ │ ./manipulation.js │ 77 │ │ ./css.js │ 73 │ │ ./core.js │ 54 │ path commits src/event.js............ 22 src/core.js............. 17 src/ajax.js............. 14 src/manipulation.js..... 13 src/deferred.js......... 11 src/css.js.............. 11 src/css/showHide.js..... 10 src/offset.js........... 9 src/effects.js.......... 9 Biggest Most complex Most changed
- 31. File code --------------------------- src/effects.js 531 src/ajax.js 508 src/event.js 507 src/manipulation.js 349 src/core.js 299 src/css.js 278 │ File │ Cmp │ ├───────────────────┼─────┤ │ ./ajax.js │ 123 │ │ ./event.js │ 120 │ │ ./effects.js │ 108 │ │ ./manipulation.js │ 77 │ │ ./css.js │ 73 │ │ ./core.js │ 54 │ path commits src/event.js............ 22 src/core.js............. 17 src/ajax.js............. 14 src/manipulation.js..... 13 src/deferred.js......... 11 src/css.js.............. 11 src/css/showHide.js..... 10 src/offset.js........... 9 src/effects.js.......... 9 Biggest Most complex Most changed
- 32. File code --------------------------- src/effects.js 531 src/ajax.js 508 src/event.js 507 src/manipulation.js 349 src/core.js 299 src/css.js 278 │ File │ Cmp │ ├───────────────────┼─────┤ │ ./ajax.js │ 123 │ │ ./event.js │ 120 │ │ ./effects.js │ 108 │ │ ./manipulation.js │ 77 │ │ ./css.js │ 73 │ │ ./core.js │ 54 │ path commits src/event.js............ 22 src/core.js............. 17 src/ajax.js............. 14 src/manipulation.js..... 13 src/deferred.js......... 11 src/css.js.............. 11 src/css/showHide.js..... 10 src/offset.js........... 9 src/effects.js.......... 9 Biggest Most complex Most changed
- 33. File code --------------------------- src/effects.js 531 src/ajax.js 508 src/event.js 507 src/manipulation.js 349 src/core.js 299 src/css.js 278 │ File │ Cmp │ ├───────────────────┼─────┤ │ ./ajax.js │ 123 │ │ ./event.js │ 120 │ │ ./effects.js │ 108 │ │ ./manipulation.js │ 77 │ │ ./css.js │ 73 │ │ ./core.js │ 54 │ path commits src/event.js............ 22 src/core.js............. 17 src/ajax.js............. 14 src/manipulation.js..... 13 src/deferred.js......... 11 src/css.js.............. 11 src/css/showHide.js..... 10 src/offset.js........... 9 src/effects.js.......... 9 Biggest Most complex Most changed
- 34. File code --------------------------- src/effects.js 531 src/ajax.js 508 src/event.js 507 src/manipulation.js 349 src/core.js 299 src/css.js 278 │ File │ Cmp │ ├───────────────────┼─────┤ │ ./ajax.js │ 123 │ │ ./event.js │ 120 │ │ ./effects.js │ 108 │ │ ./manipulation.js │ 77 │ │ ./css.js │ 73 │ │ ./core.js │ 54 │ path commits src/event.js............ 22 src/core.js............. 17 src/ajax.js............. 14 src/manipulation.js..... 13 src/deferred.js......... 11 src/css.js.............. 11 src/css/showHide.js..... 10 src/offset.js........... 9 src/effects.js.......... 9 Biggest Most complex Most changed
- 35. File code --------------------------- src/effects.js 531 src/ajax.js 508 src/event.js 507 src/manipulation.js 349 src/core.js 299 src/css.js 278 │ File │ Cmp │ ├───────────────────┼─────┤ │ ./ajax.js │ 123 │ │ ./event.js │ 120 │ │ ./effects.js │ 108 │ │ ./manipulation.js │ 77 │ │ ./css.js │ 73 │ │ ./core.js │ 54 │ path commits src/event.js............ 22 src/core.js............. 17 src/ajax.js............. 14 src/manipulation.js..... 13 src/deferred.js......... 11 src/css.js.............. 11 src/css/showHide.js..... 10 src/offset.js........... 9 src/effects.js.......... 9 Biggest Most complex Most changed
- 36. File code --------------------------- src/effects.js 531 src/ajax.js 508 src/event.js 507 src/manipulation.js 349 src/core.js 299 src/css.js 278 │ File │ Cmp │ ├───────────────────┼─────┤ │ ./ajax.js │ 123 │ │ ./event.js │ 120 │ │ ./effects.js │ 108 │ │ ./manipulation.js │ 77 │ │ ./css.js │ 73 │ │ ./core.js │ 54 │ path commits src/event.js............ 22 src/core.js............. 17 src/ajax.js............. 14 src/manipulation.js..... 13 src/deferred.js......... 11 src/css.js.............. 11 src/css/showHide.js..... 10 src/offset.js........... 9 src/effects.js.......... 9 Biggest Most complex Most changed
- 37. File code --------------------------- src/effects.js 531 src/ajax.js 508 src/event.js 507 src/manipulation.js 349 src/core.js 299 src/css.js 278 │ File │ Cmp │ ├───────────────────┼─────┤ │ ./ajax.js │ 123 │ │ ./event.js │ 120 │ │ ./effects.js │ 108 │ │ ./manipulation.js │ 77 │ │ ./css.js │ 73 │ │ ./core.js │ 54 │ path commits src/event.js............ 22 src/core.js............. 17 src/ajax.js............. 14 src/manipulation.js..... 13 src/deferred.js......... 11 src/css.js.............. 11 src/css/showHide.js..... 10 src/offset.js........... 9 src/effects.js.......... 9 Biggest Most complex Most changed
- 38. File code --------------------------- src/effects.js 531 src/ajax.js 508 src/event.js 507 src/manipulation.js 349 src/core.js 299 src/css.js 278 │ File │ Cmp │ ├───────────────────┼─────┤ │ ./ajax.js │ 123 │ │ ./event.js │ 120 │ │ ./effects.js │ 108 │ │ ./manipulation.js │ 77 │ │ ./css.js │ 73 │ │ ./core.js │ 54 │ path commits src/event.js............ 22 src/core.js............. 17 src/ajax.js............. 14 src/manipulation.js..... 13 src/deferred.js......... 11 src/css.js.............. 11 src/css/showHide.js..... 10 src/offset.js........... 9 src/effects.js.......... 9 Biggest Most complex Most changed
- 39. File code --------------------------- src/effects.js 531 src/ajax.js 508 src/event.js 507 src/manipulation.js 349 src/core.js 299 src/css.js 278 │ File │ Cmp │ ├───────────────────┼─────┤ │ ./ajax.js │ 123 │ │ ./event.js │ 120 │ │ ./effects.js │ 108 │ │ ./manipulation.js │ 77 │ │ ./css.js │ 73 │ │ ./core.js │ 54 │ path commits src/event.js............ 22 src/core.js............. 17 src/ajax.js............. 14 src/manipulation.js..... 13 src/deferred.js......... 11 src/css.js.............. 11 src/css/showHide.js..... 10 src/offset.js........... 9 src/effects.js.......... 9 Biggest Most complex Most changed