A lo largo de los años como programador, he examinado quizás cientos de bases de código. Demasiados para ser exactos. Luché mucho para comprender dónde está el código significativo en la mayoría de los casos. Por lo general, una solicitud de orientación sobre a qué debo prestar atención y las instrucciones en los boletos me empujan hacia adelante. Lento pero seguro, entenderé lo que está haciendo el código. Y tú también lo entenderás. Algunas personas lo hacen mejor y otras lo hacen lentamente. No deberías avergonzarte de esto. En la mayoría de los casos, el código es complejo. Pero encontré una herramienta sencilla para facilitarle las cosas.Se llama complejidad de código y puede usarlo así
:
npx code-complexity . --limit 20 --sort ratio # --filter '**/*.js',
Imprimirá una salida similar a esta:
| expediente | complejidad | batir | proporción |
|---|---|---|---|
| src / cli.ts | 103 | 8 | 824 |
| prueba / código-complejidad.prueba.ts | 107 | 7 | 749 |
| .idea / workspace.xml | 123 | 6 | 738 |
. , , . . , , .
(complexity) (churn), . , , .
?
. , . . , , , . , .
. , . . , . sloc. . : , , .
, -, -. , , , , , .
?
. -. — , . ?
, , , . - ? git' , . , , , . , . , , , , .
+ ?
, , . , , . , . . , .
. , . , . . , , - unit-. , . TypeScript Flow .
Unit- — , , . , , , , , . , unit- , . , . , . , , . ? .
?
. . , , .
. , , . , : - . , , , .
. , , , . , . . , . , .
?
— . , , , , unit, e2e , . , -, , , . . . Node.js, , Node.js. console.log
, . , . JavaScript TypeScript debugger
, , , Node.js . IDE , . , Visual Studio Code Node.js IDE. Node.js VS Code .
— . , , "" "". .
, , , .
Blitz.js
Blitz.js — , Node.js. Ruby on Rails JavaScript/TypeScript. , , .
, , :
npx code-complexity . --limit 20 --sort ratio
| file | complexity | churn | ratio |
|---|---|---|---|
| nextjs/packages/next/compiled/webpack/bundle5.js | 91501 | 1 | 91501 |
| nextjs/packages/next/compiled/webpack/bundle5.js | 91501 | 1 | 91501 |
| nextjs/packages/next/compiled/webpack/bundle4.js | 74436 | 1 | 74436 |
| packages/cli/src/commands/generate.ts | 228 | 28 | 6384 |
| packages/cli/src/commands/new.ts | 177 | 35 | 6195 |
| packages/generator/src/generators/app-generator.ts | 235 | 23 | 5405 |
| packages/generator/src/generator.ts | 283 | 19 | 5377 |
| packages/server/src/stages/rpc/index.ts | 184 | 28 | 5152 |
| packages/server/test/dev.test.ts | 190 | 27 | 5130 |
| packages/core/src/types.ts | 160 | 28 | 4480 |
| packages/server/src/next-utils.ts | 176 | 25 | 4400 |
| packages/generator/templates/app/app/pages/index.tsx | 240 | 18 | 4320 |
| packages/server/src/config.ts | 116 | 37 | 4292 |
| packages/core/src/use-query-hooks.ts | 184 | 22 | 4048 |
| nextjs/test/integration/file-serving/test/index.test.js | 3561 | 1 | 3561 |
| examples/auth/app/pages/index.tsx | 210 | 16 | 3360 |
| packages/cli/src/commands/db.ts | 75 | 44 | 3300 |
| .github/workflows/main.yml | 132 | 24 | 3168 |
| packages/cli/test/commands/new.test.ts | 141 | 19 | 2679 |
| examples/store/app/pages/index.tsx | 181 | 14 | 2534 |
| packages/display/src/index.ts | 158 | 16 | 2528 |
, , (, ), .
, :
- packages/cli
- packages/generator
- packages/server
- packages/core
, , , , . , packages/core
, , . , , , Blitz.
React.js
React.js — , - . , . .
npx code-complexity . --limit 20 --sort ratio
:
| file | complexity | churn | ratio |
|---|---|---|---|
| packages/eslint-plugin-react-hooks/**tests**/ESLintRuleExhaustiveDeps-test.js | 7742 | 51 | 394842 |
| packages/react/src/**tests**/ReactProfiler-test.internal.js | 4002 | 95 | 380190 |
| packages/react-reconciler/src/ReactFiberWorkLoop.new.js | 2373 | 139 | 329847 |
| packages/react-reconciler/src/ReactFiberWorkLoop.old.js | 2373 | 114 | 270522 |
| packages/react-dom/src/server/ReactPartialRenderer.js | 1379 | 122 | 168238 |
| packages/react-reconciler/src/ReactFiberCommitWork.new.js | 2262 | 71 | 160602 |
| packages/react-devtools-shared/src/backend/renderer.js | 2952 | 54 | 159408 |
| packages/react-reconciler/src/ReactFiberBeginWork.new.js | 2903 | 53 | 153859 |
| scripts/rollup/bundles.js | 760 | 199 | 151240 |
| packages/react-reconciler/src/ReactFiberHooks.new.js | 2622 | 56 | 146832 |
| packages/react-dom/src/client/ReactDOMHostConfig.js | 1018 | 140 | 142520 |
| packages/react-reconciler/src/ReactFiberHooks.old.js | 2622 | 50 | 131100 |
| packages/react-reconciler/src/**tests**/ReactHooks-test.internal.js | 1641 | 74 | 121434 |
| packages/react-dom/src/**tests**/ReactDOMComponent-test.js | 2346 | 51 | 119646 |
| packages/react-dom/src/**tests**/ReactDOMServerPartialHydration-test.internal.js | 2150 | 49 | 105350 |
| packages/react-noop-renderer/src/createReactNoop.js | 966 | 109 | 105294 |
| packages/react-reconciler/src/ReactFiberCommitWork.old.js | 2262 | 46 | 104052 |
| packages/react-reconciler/src/ReactFiberBeginWork.old.js | 2903 | 35 | 101605 |
| packages/react-reconciler/src/**tests**/ReactIncrementalErrorHandling-test.internal.js | 1532 | 62 | 94984 |
| packages/react-refresh/src/**tests**/ReactFresh-test.js | 3165 | 29 | 91785 |
, , , :
- packages/react-dom
- packages/react-reconciler
React Fiber , react-dom React. React , , .
Venom — TypeScript Whatsapp
Venom — Whatsapp. . , . :
npx code-complexity . --limit 20 --sort ratio
| file | complexity | churn | ratio |
|---|---|---|---|
| src/lib/jsQR/jsQR.js | 9760 | 5 | 48800 |
| src/lib/wapi/wapi.js | 474 | 44 | 20856 |
| src/api/layers/sender.layer.ts | 546 | 36 | 19656 |
| src/lib/wapi/store/store-objects.js | 362 | 24 | 8688 |
| src/controllers/initializer.ts | 178 | 48 | 8544 |
| src/lib/wapi/jssha/index.js | 1204 | 5 | 6020 |
| src/api/layers/retriever.layer.ts | 171 | 29 | 4959 |
| src/types/WAPI.d.ts | 203 | 24 | 4872 |
| src/api/layers/host.layer.ts | 258 | 17 | 4386 |
| src/api/layers/listener.layer.ts | 206 | 21 | 4326 |
| src/controllers/browser.ts | 141 | 29 | 4089 |
| src/controllers/auth.ts | 192 | 21 | 4032 |
| src/api/model/enum/definitions.ts | 589 | 6 | 3534 |
| src/api/whatsapp.ts | 95 | 30 | 2850 |
| src/lib/wapi/functions/index.js | 97 | 24 | 2328 |
| src/api/layers/profile.layer.ts | 82 | 22 | 1804 |
| src/lib/wapi/business/send-message-with-buttons.js | 323 | 5 | 1615 |
| src/api/layers/group.layer.ts | 115 | 14 | 1610 |
| src/api/layers/controls.layer.ts | 76 | 20 | 1520 |
| src/api/model/message.ts | 114 | 11 | 1254 |
, , :
- src/lib
- src/api
- src/controllers
, src/lib
. , , .
src/api/layers/sender.layer.ts
src/api/layers/retriever.layer.ts
, . , , . , .
?
, : Software Design X-Rays (Adam Tornhill). , : . . , - , . , , , "" , . — , .
Software Design X-Rays
, , , . , .
code-complexity JavaScript TypeScript. , Java, C#, Python PHP , , , code-maat. , , .
, .
Espero que haya disfrutado de este artículo y haya hecho su vida un poco más fácil. Entrar en una nueva base de código es difícil y, especialmente en el cambiante mundo de JavaScript, es difícil mantenerse al día. Con las herramientas y los procesos presentados en este artículo, es posible que le resulte más fácil adaptarse a la nueva base de código. No dude en compartir este artículo con sus colegas y también contarles sobre las técnicas que está utilizando. La mayoría de los desarrolladores que conozco no conocen el análisis de flujo y complejidad, y puede ser muy útil para todos. ¡Así que compártelo!