Ao longo dos anos como programador, examinei talvez centenas de bases de código. Muitos para ser preciso. Eu me esforcei muito para entender onde está o código significativo na maioria dos casos. Normalmente, um pedido de orientação sobre o que devo prestar atenção e as instruções nos tickets me empurram para a frente. Lentamente, mas com segurança, irei entender o que o código está fazendo. E você vai entender também. Algumas pessoas fazem isso melhor e outras lentamente. Você não deveria ter vergonha disso. Na maioria dos casos, o código é complexo. Mas encontrei uma ferramenta simples para tornar as coisas mais fáceis para você.É chamado de complexidade de código e você pode usá-lo assim
:
npx code-complexity . --limit 20 --sort ratio # --filter '**/*.js',
Ele imprimirá uma saída semelhante a esta:
| Arquivo | complexidade | batedeira | Razão |
|---|---|---|---|
| src / cli.ts | 103 | 8 | 824 |
| test / code-complex.test.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 você tenha gostado deste artigo e facilitado um pouco sua vida. Entrar em uma nova base de código é difícil e, especialmente no mundo em constante mudança do JavaScript, é difícil acompanhar. Com as ferramentas e processos apresentados neste artigo, você pode achar mais fácil se ajustar à nova base de código. Sinta-se à vontade para compartilhar este artigo com seus colegas e também falar sobre as técnicas que você está usando. A maioria dos desenvolvedores que conheço não sabe sobre análise de fluxo e complexidade, e pode ser muito útil para todos. Então, compartilhe!