Selama bertahun-tahun sebagai programmer, saya telah melihat mungkin ratusan basis kode. Terlalu banyak untuk menjadi akurat. Saya berjuang keras untuk memahami di mana kode yang berarti dalam banyak kasus. Biasanya, permintaan panduan tentang apa yang harus saya perhatikan, dan instruksi di tiket mendorong saya maju. Perlahan tapi pasti, saya akan mengerti apa yang dilakukan kode tersebut. Dan Anda akan mengerti juga. Beberapa orang melakukannya dengan lebih baik, dan beberapa orang melakukannya dengan lambat. Anda seharusnya tidak malu dengan ini. Dalam kebanyakan kasus, kodenya rumit. Tetapi saya menemukan alat sederhana untuk mempermudah Anda.Ini disebut kompleksitas kode dan Anda dapat menggunakannya seperti
ini:
npx code-complexity . --limit 20 --sort ratio # --filter '**/*.js',
Ini akan mencetak keluaran seperti ini:
| mengajukan | kompleksitas | mengocok | perbandingan |
|---|---|---|---|
| src / cli.ts | 103 | 8 | 824 |
| tes / kode-kompleksitas.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. , , .
, .
Saya harap Anda menikmati artikel ini dan membuat hidup Anda sedikit lebih mudah. Masuk ke basis kode baru itu sulit, dan terutama di dunia JavaScript yang selalu berubah, sulit untuk mengikutinya. Dengan alat dan proses yang disajikan dalam artikel ini, Anda mungkin akan lebih mudah menyesuaikan diri dengan basis kode baru. Jangan ragu untuk membagikan artikel ini dengan kolega Anda dan juga beri tahu mereka tentang teknik yang Anda gunakan. Sebagian besar pengembang yang saya kenal tidak tahu tentang aliran dan analisis kompleksitas, dan ini bisa sangat berguna untuk semua orang. Jadi bagikan!