Submit Search
Upload
Where to start refactoring?
•
2 likes
•
427 views
thiagoalessio
Follow
My talk at Berlin Beautiful Code Meetup (11.Jul.2016) Video: https://youtu.be/HyE-LbP1Ob0
Read less
Read more
Software
Report
Share
Report
Share
1 of 40
Download now
Download to read offline
Recommended
C/C++とWebAssemblyを利用したライブラリ開発
C/C++とWebAssemblyを利用したライブラリ開発
祐司 伊藤
Task Automatisierung mit Grunt.js
Task Automatisierung mit Grunt.js
3rfan
Modern Mobile Web Apps
Modern Mobile Web Apps
dynamis
Config
Config
guest4f11e4
Wordpress 24/7
Wordpress 24/7
Антон Еремин
Progressive Mobile Web Apps
Progressive Mobile Web Apps
dynamis
Convox: Open Source Tooling for ECS
Convox: Open Source Tooling for ECS
Noah Zoschke
Choose Your Own AWS Adventure
Choose Your Own AWS Adventure
Noah Zoschke
Recommended
C/C++とWebAssemblyを利用したライブラリ開発
C/C++とWebAssemblyを利用したライブラリ開発
祐司 伊藤
Task Automatisierung mit Grunt.js
Task Automatisierung mit Grunt.js
3rfan
Modern Mobile Web Apps
Modern Mobile Web Apps
dynamis
Config
Config
guest4f11e4
Wordpress 24/7
Wordpress 24/7
Антон Еремин
Progressive Mobile Web Apps
Progressive Mobile Web Apps
dynamis
Convox: Open Source Tooling for ECS
Convox: Open Source Tooling for ECS
Noah Zoschke
Choose Your Own AWS Adventure
Choose Your Own AWS Adventure
Noah Zoschke
Node.js and Web.js
Node.js and Web.js
Will Gunn
GRUNT - The JavaScript Task Runner
GRUNT - The JavaScript Task Runner
Larry Nung
Service Workers
Service Workers
Patrick Kettner
Discover ServiceWorker
Discover ServiceWorker
Sandro Paganotti
Dart != JavaScript
Dart != JavaScript
Christian Grobmeier
Using Node.js for everything or what it is to write a book about it
Using Node.js for everything or what it is to write a book about it
Krasimir Tsonev
Dart und JavaScript
Dart und JavaScript
Christian Grobmeier
More Related Content
What's hot
Node.js and Web.js
Node.js and Web.js
Will Gunn
GRUNT - The JavaScript Task Runner
GRUNT - The JavaScript Task Runner
Larry Nung
Service Workers
Service Workers
Patrick Kettner
Discover ServiceWorker
Discover ServiceWorker
Sandro Paganotti
Dart != JavaScript
Dart != JavaScript
Christian Grobmeier
Using Node.js for everything or what it is to write a book about it
Using Node.js for everything or what it is to write a book about it
Krasimir Tsonev
Dart und JavaScript
Dart und JavaScript
Christian Grobmeier
What's hot
(7)
Node.js and Web.js
Node.js and Web.js
GRUNT - The JavaScript Task Runner
GRUNT - The JavaScript Task Runner
Service Workers
Service Workers
Discover ServiceWorker
Discover ServiceWorker
Dart != JavaScript
Dart != JavaScript
Using Node.js for everything or what it is to write a book about it
Using Node.js for everything or what it is to write a book about it
Dart und JavaScript
Dart und JavaScript
Where to start refactoring?
1.
Where to start refactoring?
2.
Agenda 1. Identify biggest
files 2. Identify most complex files 3. Identify most changed files 4. Crossing our findings
3.
4.
$ git clone
https://github.com/jquery/jquery.git $ cd jquery $ git checkout 3.1.0
5.
Biggest files
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
8.
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 …
11.
Most complex files
12.
13.
14.
15.
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 …
18.
Most changed files
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
23.
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
26.
Crossing our findings
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
40.
Thank you ;D @thiagoalessio github.com/thiagoalessio
Download now