- Added new HTML page with compare

This commit is contained in:
Ferdi Koomen 2020-06-19 13:57:21 +02:00
parent 8907aa34c0
commit 76ad42a1f2
6 changed files with 193 additions and 61 deletions

4
samples/.gitignore vendored
View File

@ -1,3 +1,5 @@
examples
node_modules
swagger-codegen-cli-v2.jar
swagger-codegen-cli-v3.jar
examples
yarn.lock

View File

@ -7,19 +7,19 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" crossorigin="anonymous">
<title>Compared to other libraries</title>
<title>Compared to other generators</title>
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Compared to other libraries</h1>
<section class="page-header">
<h1>Compared to other generators</h1>
<p class="lead">
Depending on which generator you use, you will see different output. For instance:
Depending on which swagger generator you use, you will see different output. For instance:
Different ways of generating models, services, level of quality, HTTP client, etc.
I've compiled a list below with the results per area and how they compare
against the openapi-typescript-codegen.
against the <strong>openapi-typescript-codegen.</strong>
</p>
</div>
</section>
<h5>I've used the standard petshop examples from OpenAPI:</h5>
<ul>
<li><a href="https://petstore3.swagger.io/api/v3/openapi.json" target="_blank">https://petstore3.swagger.io/api/v3/openapi.json</a></li>
@ -41,7 +41,7 @@
<thead>
<tr>
<th width="30%"></th>
<th width="10%">openapi-typscript-codegen</th>
<th width="10%">openapi-typescript-codegen</th>
<th width="10%">aurelia</th>
<th width="10%">inversify</th>
<th width="10%">angular</th>
@ -53,7 +53,7 @@
<tbody>
<tr>
<th>Supports OpenApi v2 specification</th>
<td class="success" data-type="openapi-typscript-codegen"></td>
<td class="success" data-type="openapi-typescript-codegen"></td>
<td class="success" data-type="aurelia"></td>
<td class="success" data-type="inversify"></td>
<td class="success" data-type="angular"></td>
@ -63,7 +63,7 @@
</tr>
<tr>
<th>Supports OpenApi v3 specification</th>
<td class="success" data-type="openapi-typscript-codegen"></td>
<td class="success" data-type="openapi-typescript-codegen"></td>
<td class="danger" data-type="aurelia"></td>
<td class="danger" data-type="inversify"></td>
<td class="success" data-type="angular"></td>
@ -73,7 +73,7 @@
</tr>
<tr>
<th>Supports authentication</th>
<td class="success" data-type="openapi-typscript-codegen"></td>
<td class="success" data-type="openapi-typescript-codegen"></td>
<td class="danger" data-type="aurelia"></td>
<td class="success" data-type="inversify"></td>
<td class="success" data-type="angular"></td>
@ -83,7 +83,7 @@
</tr>
<tr>
<th>Strongly typed models</th>
<td class="success" data-type="openapi-typscript-codegen"></td>
<td class="success" data-type="openapi-typescript-codegen"></td>
<td class="success" data-type="aurelia"></td>
<td class="success" data-type="inversify"></td>
<td class="success" data-type="angular"></td>
@ -93,7 +93,7 @@
</tr>
<tr>
<th>Strongly typed enums</th>
<td class="success" data-type="openapi-typscript-codegen"></td>
<td class="success" data-type="openapi-typescript-codegen"></td>
<td class="success" data-type="aurelia"></td>
<td class="success" data-type="inversify"></td>
<td class="success" data-type="angular"></td>
@ -103,7 +103,7 @@
</tr>
<tr>
<th>Models and services exported as individual files</th>
<td class="success" data-type="openapi-typscript-codegen"></td>
<td class="success" data-type="openapi-typescript-codegen"></td>
<td class="danger" data-type="aurelia"></td>
<td class="success" data-type="inversify"></td>
<td class="success" data-type="angular"></td>
@ -113,7 +113,7 @@
</tr>
<tr>
<th>Index file that exports all services and models</th>
<td class="success" data-type="openapi-typscript-codegen"></td>
<td class="success" data-type="openapi-typescript-codegen"></td>
<td class="success" data-type="aurelia"></td>
<td class="danger" data-type="inversify"></td>
<td class="success" data-type="angular"></td>
@ -123,7 +123,7 @@
</tr>
<tr>
<th>Service returns typed result</th>
<td class="success" data-type="openapi-typscript-codegen"></td>
<td class="success" data-type="openapi-typescript-codegen"></td>
<td class="success" data-type="aurelia"></td>
<td class="success" data-type="inversify"></td>
<td class="success" data-type="angular"></td>
@ -133,17 +133,27 @@
</tr>
<tr>
<th>Service supports sending and receiving binary content</th>
<td class="success" data-type="openapi-typscript-codegen"></td>
<td class="success" data-type="openapi-typescript-codegen"></td>
<td class="success" data-type="aurelia"></td>
<td class="success" data-type="inversify"></td>
<td class="danger" data-type="angular"></td>
<td class="danger" data-type="fetch"></td>
<td class="warning" data-type="angular">
<details>
<summary>⚠️</summary>
<p>V3 version sends data as <code>application/octet-stream</code> instead of <code>application/x-www-form-urlencoded</code></p>
</details>
</td>
<td class="warning" data-type="fetch">
<details>
<summary>⚠️</summary>
<p>V3 version sends data as <code>application/octet-stream</code> instead of <code>application/x-www-form-urlencoded</code></p>
</details>
</td>
<td class="success" data-type="jquery"></td>
<td class="success" data-type="node"></td>
</tr>
<tr>
<th>Models and services contain inline documentation</th>
<td class="success" data-type="openapi-typscript-codegen"></td>
<td class="success" data-type="openapi-typescript-codegen"></td>
<td class="success" data-type="aurelia"></td>
<td class="success" data-type="inversify"></td>
<td class="success" data-type="angular"></td>
@ -153,46 +163,97 @@
</tr>
<tr>
<th>Framework agnostic</th>
<td class="success" data-type="openapi-typscript-codegen"></td>
<td class="success" data-type="openapi-typescript-codegen"></td>
<td class="danger" data-type="aurelia"></td>
<td class="danger" data-type="inversify"></td>
<td class="danger" data-type="angular"></td>
<td class="success" data-type="fetch"></td>
<td class="warning" data-type="node">
<details>
<summary>⚠️</summary>
<p>Requires portable-fetch</p>
</details>
</td>
<td class="danger" data-type="jquery"></td>
<td class="danger" data-type="node"></td>
<td class="warning" data-type="node">
<details>
<summary>⚠️</summary>
<p>Requires bluebird</p>
</details>
</td>
</tr>
<tr>
<th>Compiles in strict mode without issues</th>
<td class="success" data-type="openapi-typescript-codegen"></td>
<td class="danger" data-type="aurelia">
<details>
<summary></summary>
<p>Errors when compiling: <code>PetApi.ts:147:30 - error TS2345: Argument of type 'string | undefined' is not assignable to parameter of type 'string'</code></p>
</details>
</td>
<td class="danger" data-type="inversify">
<details>
<summary></summary>
<p>Errors when compiling: <code>pet.service.ts:312:159 - error TS2304: Cannot find name 'body'</code></p>
</details>
</td>
<td class="danger" data-type="angular">
<details>
<summary></summary>
<p>Errors when compiling: <code>pet.service.ts:528:26 - error TS1345: An expression of type 'void' cannot be tested for truthiness</code></p>
</details>
</td>
<td class="danger" data-type="fetch">
<details>
<summary></summary>
<p>Errors when compiling: <code>api.ts:2276:67 - error TS2300: Duplicate identifier 'username'</code></p>
</details>
</td>
<td class="danger" data-type="jquery">
<details>
<summary></summary>
<p>Errors when compiling: <code>PetApi.ts:25:12 - error TS2322: Type 'null' is not assignable to type 'JQueryAjaxSettings | undefined'</code></p>
</details>
</td>
<td class="danger" data-type="node">
<details>
<summary></summary>
<p>Errors when compiling: <code>api.ts:1631:45 - error TS2694: Namespace '"http"' has no exported member 'ClientResponse'</code></p>
</details>
</td>
</tr>
<tr>
<th>Generated size (typescript)</th>
<td><span class="badge" data-type="openapi-typscript-codegen">30Kb</span></td>
<td><span class="badge" data-type="aurelia">30Kb</span></td>
<td><span class="badge" data-type="inversify">30Kb</span></td>
<td><span class="badge" data-type="angular">30Kb</span></td>
<td><span class="badge" data-type="fetch">30Kb</span></td>
<td><span class="badge" data-type="jquery">30Kb</span></td>
<td><span class="badge" data-type="node">30Kb</span></td>
<td data-type="openapi-typescript-codegen"><span class="badge">30KB</span></td>
<td data-type="aurelia"><span class="badge">29KB</span></td>
<td data-type="inversify"><span class="badge">37KB</span></td>
<td data-type="angular"><span class="badge">63KB</span></td>
<td data-type="fetch"><span class="badge">85KB</span></td>
<td data-type="jquery"><span class="badge">57KB</span></td>
<td data-type="node"><span class="badge">65KB</span></td>
</tr>
<tr>
<th>Build size (javascript)</th>
<td><span class="badge" data-type="openapi-typscript-codegen">30Kb</span></td>
<td><span class="badge" data-type="aurelia">30Kb</span></td>
<td><span class="badge" data-type="inversify">30Kb</span></td>
<td><span class="badge" data-type="angular">30Kb</span></td>
<td><span class="badge" data-type="fetch">30Kb</span></td>
<td><span class="badge" data-type="jquery">30Kb</span></td>
<td><span class="badge" data-type="node">30Kb</span></td>
<th>Build size (javascript, not minimized)</th>
<td data-type="openapi-typescript-codegen"><span class="badge">17KB</span></td>
<td data-type="aurelia"><span class="badge">16KB</span></td>
<td data-type="inversify"><span class="badge">22KB</span></td>
<td data-type="angular"><span class="badge">36KB</span></td>
<td data-type="fetch"><span class="badge">48KB</span></td>
<td data-type="jquery"><span class="badge">37KB</span></td>
<td data-type="node"><span class="badge">53KB</span></td>
</tr>
<tr>
<th>Generation time</th>
<td><span class="badge" data-type="openapi-typscript-codegen">0.132s</span></td>
<td><span class="badge" data-type="aurelia">0.715s</span></td>
<td><span class="badge" data-type="inversify">0.788s</span></td>
<td><span class="badge" data-type="angular">1.386s</span></td>
<td><span class="badge" data-type="fetch">1.103s</span></td>
<td><span class="badge" data-type="jquery">0.728s</span></td>
<td><span class="badge" data-type="node">0.752s</span></td>
<td data-type="openapi-typescript-codegen"><span class="badge">0.132s</span></td>
<td data-type="aurelia"><span class="badge">0.715s</span></td>
<td data-type="inversify"><span class="badge">0.788s</span></td>
<td data-type="angular"><span class="badge">1.386s</span></td>
<td data-type="fetch"><span class="badge">1.103s</span></td>
<td data-type="jquery"><span class="badge">0.728s</span></td>
<td data-type="node"><span class="badge">0.752s</span></td>
</tr>
</tbody>
</table>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" crossorigin="anonymous"></script>
</div>
</body>
</html>

View File

@ -1,20 +1,25 @@
#!/bin/sh
rm -rf examples
curl https://repo1.maven.org/maven2/io/swagger/swagger-codegen-cli/2.4.14/swagger-codegen-cli-2.4.14.jar -o swagger-codegen-cli-v2.jar
curl https://repo1.maven.org/maven2/io/swagger/codegen/v3/swagger-codegen-cli/3.0.20/swagger-codegen-cli-3.0.20.jar -o swagger-codegen-cli-v3.jar
echo v2/typescript-aurelia && time java -jar ./swagger-codegen-cli-v2.jar generate -i v2/spec.json -l typescript-aurelia -o examples/v2/typescript-aurelia/ &> /dev/null
echo v2/typescript-angular && time java -jar ./swagger-codegen-cli-v2.jar generate -i v2/spec.json -l typescript-angular -o examples/v2/typescript-angular/ &> /dev/null
echo v2/typescript-inversify && time java -jar ./swagger-codegen-cli-v2.jar generate -i v2/spec.json -l typescript-inversify -o examples/v2/typescript-inversify/ &> /dev/null
echo v2/typescript-fetch && time java -jar ./swagger-codegen-cli-v2.jar generate -i v2/spec.json -l typescript-fetch -o examples/v2/typescript-fetch/ &> /dev/null
echo v2/typescript-jquery && time java -jar ./swagger-codegen-cli-v2.jar generate -i v2/spec.json -l typescript-jquery -o examples/v2/typescript-jquery/ &> /dev/null
echo v2/typescript-node && time java -jar ./swagger-codegen-cli-v2.jar generate -i v2/spec.json -l typescript-node -o examples/v2/typescript-node/ &> /dev/null
echo v2/typescript-aurelia && time java -jar ./swagger-codegen-cli-v2.jar generate -i v2/spec.json -l typescript-aurelia -o examples/v2/typescript-aurelia/
echo v2/typescript-angular && time java -jar ./swagger-codegen-cli-v2.jar generate -i v2/spec.json -l typescript-angular -o examples/v2/typescript-angular/
echo v2/typescript-inversify && time java -jar ./swagger-codegen-cli-v2.jar generate -i v2/spec.json -l typescript-inversify -o examples/v2/typescript-inversify/
echo v2/typescript-fetch && time java -jar ./swagger-codegen-cli-v2.jar generate -i v2/spec.json -l typescript-fetch -o examples/v2/typescript-fetch/
echo v2/typescript-jquery && time java -jar ./swagger-codegen-cli-v2.jar generate -i v2/spec.json -l typescript-jquery -o examples/v2/typescript-jquery/
echo v2/typescript-node && time java -jar ./swagger-codegen-cli-v2.jar generate -i v2/spec.json -l typescript-node -o examples/v2/typescript-node/
echo v3/typescript-angular && time java -jar ./swagger-codegen-cli-v3.jar generate -i v3/spec.json -l typescript-angular -o examples/v3/typescript-angular/ &> /dev/null
echo v3/typescript-fetch && time java -jar ./swagger-codegen-cli-v3.jar generate -i v3/spec.json -l typescript-fetch -o examples/v3/typescript-fetch/ &> /dev/null
echo v3/typescript-angular && time java -jar ./swagger-codegen-cli-v3.jar generate -i v3/spec.json -l typescript-angular -o examples/v3/typescript-angular/
echo v3/typescript-fetch && time java -jar ./swagger-codegen-cli-v3.jar generate -i v3/spec.json -l typescript-fetch -o examples/v3/typescript-fetch/
echo v2/openapi-typescript-codegen && time node ../bin/index.js --input v2/spec.json --output examples/v2/openapi-typescript-codegen/ &> /dev/null
echo v3/openapi-typescript-codegen && time node ../bin/index.js --input v3/spec.json --output examples/v3/openapi-typescript-codegen/ &> /dev/null
echo v2/openapi-typescript-codegen && time node ../bin/index.js --input v2/spec.json --output examples/v2/openapi-typescript-codegen/
echo v3/openapi-typescript-codegen && time node ../bin/index.js --input v3/spec.json --output examples/v3/openapi-typescript-codegen/
yarn install
yarn run build
cd examples
find . -type f ! -iname "*.ts" -delete

25
samples/package.json Normal file
View File

@ -0,0 +1,25 @@
{
"name": "compare",
"version": "1.0.0",
"description": "Package file to compare generated libraries.",
"license": "MIT",
"scripts": {
"build": "tsc"
},
"devDependencies": {
"@angular/common": "9.1.11",
"@angular/core": "9.1.11",
"@types/bluebird": "3.5.32",
"@types/jquery": "3.3.38",
"@types/node": "14.0.13",
"@types/request": "2.48.5",
"aurelia-framework": "1.3.1",
"aurelia-http-client": "1.3.1",
"bluebird": "3.7.2",
"jquery": "3.5.1",
"request": "2.88.2",
"rxjs": "6.5.5",
"rxjs-compat": "6.5.5",
"typescript": "3.9.5"
}
}

39
samples/tsconfig.json Normal file
View File

@ -0,0 +1,39 @@
{
"compileOnSave": false,
"compilerOptions": {
"target": "ES2017",
"module": "ES6",
"moduleResolution": "Node",
"lib": ["ES2017", "DOM"],
"types": ["node"],
"typeRoots": ["node_modules/@types"],
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"skipLibCheck": true,
"strict": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"removeComments": true,
"experimentalDecorators": true
},
"include": [
"./examples/v2/openapi-typescript-codegen/**/*.ts",
"./examples/v2/typescript-angular/**/*.ts",
"./examples/v2/typescript-aurelia/**/*.ts",
"./examples/v2/typescript-fetch/**/*.ts",
"./examples/v2/typescript-inversify/**/*.ts",
"./examples/v2/typescript-jquery/**/*.ts",
"./examples/v2/typescript-node/**/*.ts",
"./examples/v3/openapi-typescript-codegen/**/*.ts",
"./examples/v3/typescript-angular/**/*.ts",
"./examples/v3/typescript-fetch/**/*.ts"
],
"exclude": [
"node_modules"
]
}

View File

@ -1320,9 +1320,9 @@ acorn-jsx@^5.2.0:
integrity sha512-HiUX/+K2YpkpJ+SzBffkM/AQ2YE03S0U1kjTLVpoJdhZMOWy8qvXVN9JdLqv2QsaQ6MPYQIuNmwD8zOiYUofLQ==
acorn-walk@^7.1.1:
version "7.1.1"
resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.1.1.tgz#345f0dffad5c735e7373d2fec9a1023e6a44b83e"
integrity sha512-wdlPY2tm/9XBr7QkKlq0WQVgiuGTX6YWPyRyBviSoScBuLfTVQhvwg6wJ369GJ/1nPfTLMfnrFIfjqVg6d+jQQ==
version "7.2.0"
resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
acorn@^7.1.1:
version "7.3.1"
@ -2024,9 +2024,9 @@ ecc-jsbn@~0.1.1:
safer-buffer "^2.1.0"
electron-to-chromium@^1.3.413:
version "1.3.474"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.474.tgz#161af012e11f96795eade84bf03b8ddc039621b9"
integrity sha512-fPkSgT9IBKmVJz02XioNsIpg0WYmkPrvU1lUJblMMJALxyE7/32NGvbJQKKxpNokozPvqfqkuUqVClYsvetcLw==
version "1.3.478"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.478.tgz#cfa0f2f0d3012463438a3bc81f50f2d109aca450"
integrity sha512-pt9GUDD52uEO9ZXWcG4UuW/HwE8T+a8iFP7K2qqWrHB5wUxbbvCIXGBVpQDDQwSR766Nn4AkmLYxOUNd4Ji5Dw==
emoji-regex@^7.0.1:
version "7.0.3"