Im Laufe der Jahre als Programmierer habe ich mir vielleicht Hunderte von Codebasen angesehen. Zu viele, um genau zu sein. Ich hatte große Probleme zu verstehen, wo sich der aussagekräftige Code in den meisten Fällen befindet. Normalerweise treiben mich eine Bitte um Anleitung, worauf ich achten sollte, und die Anweisungen in den Tickets voran. Langsam aber sicher werde ich verstehen, was der Code tut. Und du wirst es auch verstehen. Einige Leute machen es besser und andere machen es langsam. Sie sollten sich dafür nicht schämen. In den meisten Fällen ist der Code komplex. Aber ich habe ein einfaches Werkzeug gefunden, um es Ihnen leichter zu machen.Es heißt Code-Komplexität und Sie können es
so verwenden:
npx code-complexity . --limit 20 --sort ratio # --filter '**/*.js',
Es wird eine Ausgabe ähnlich der folgenden gedruckt:
| Datei | Komplexität | abwandern | Verhältnis |
|---|---|---|---|
| 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. , , .
, .
Ich hoffe, Ihnen hat dieser Artikel gefallen und Sie haben Ihr Leben ein wenig einfacher gemacht. Der Einstieg in eine neue Codebasis ist schwierig, und insbesondere in der sich ständig ändernden Welt von JavaScript ist es schwierig, Schritt zu halten. Mit den in diesem Artikel vorgestellten Tools und Prozessen fällt es Ihnen möglicherweise leichter, sich in die neue Codebasis einzufügen. Teilen Sie diesen Artikel gerne mit Ihren Kollegen und teilen Sie ihnen die von Ihnen verwendeten Techniken mit. Die meisten Entwickler, die ich kenne, wissen nichts über Fluss- und Komplexitätsanalysen, und sie können für alle sehr nützlich sein. Also teile es!