DEV Community

Stop using Swagger-UI and MSW, but SDK instead

Jeongho Nam on July 28, 2023

Summary If you're a frontend developer, stop using swagger-ui and msw. Instead, you can build SDK (Software Development Kit) automatic...

Read full post

Fyodor • Jul 30 '23

That’s a nice approach, and I (being a frontend dev) like the attitude very much 👍 There are some considerations though that I’d suggest to take into account, as I genuinely believe that there’s no “one size fits all” solution.

Swagger UI is just a tool, one of many, which makes work with OpenAPI specification generated from BE code a bit more convenient. There’s a bunch of them. And there’s quite a few tools that allow generating frontends (framework-specific btw) from OAS in a flexible way.
OAS is not just the way to “read BE”, at least in team work. It’s a living documentation and a contract, BE-FE interface so to speak, which allows to reason about different features without digging into implementation.
OAS is a good industry standard. And it allows to build framework-agnostic tools on top of it. That’s probably a more universal approach, as it provides a way to work with APIs both in design-first and code-first way, either you use swagger, or stoplight, or whatnot.

I’m pretty sure none of that is a news for you, so it’s not to bring some controversy to the topic, rather an opinion in response to the suggestion in summary section. It’s not just that universal answer probably.

But I will definitely give it a try as a big fan of Nest.js myself 👍

Jeongho Nam • Jul 30 '23

I agree with your insight and always try to follow OAS standards.

The reason for introducing this tool is that TypeScript's openapi-generator is immature, so many front-end developers read and write interaction code by themselves without automating SDK generation.

Of course, as @nestia/migrate is not matured yet, it could be another immature SDK generator for someone's insight \o/.

Andrei Stoian • Jul 31 '23

Have you tried swagger-typescript-api?

Beeno Tung • Aug 28 '23

You may try "npm init rpc", it's also generate client sdk based on server implementation. You don't need to specific the interface in multiple places with it.

Fyodor • Aug 28 '23

That's interesting. Do you use it for something? What does it make under the hood actually? The package and repo look quite weird and obscure.

Beeno Tung • Aug 28 '23

I use the create-* package to generate the skeleton of backend server, and it generates the typescript client on the fly.
I can then use the client sdk in SPA (angular or react).
I know there are at least 10+ e-commerce projects based on this design (booking, office automation, e-shop, e.t.c.)

Maxim Mazurok • Aug 2 '23

Interesting stuff, you might want to check out Orval. It has sdk/dto generation as well as MSW generation with fakerjs.
I'll look more into this project, hopefully I'll be able to utilise it without doing a rewrite of backend from C# to JS.

orlein • Jul 30 '23

Samchon's approach is very revolutionary. He deserves much more attention.

Furer Alexander • Jul 30 '23

Revolutionary ?! Haven't you heard about open api tools generator project that exists for years and has really BIIIG community and adopters? And btw, bindings for so many languages and frameworks, not just ts/js ?

Jeongho Nam • Jul 31 '23 • Edited

My program is not revolutionary, but is not it the 1st that supporting mock up simulation? Also, I experienced openapi-generator, but it was not enough usable, especially restoring JSON schema to TypeScript definition.

Furer Alexander • Jul 31 '23

1.Google for pact - you won't need another mockup tool.
2.We are generating ts for pretty complex open api schema without any issue

Jeongho Nam • Jul 31 '23

Thanks, I will study it
I often utilize discriminated union type due to business logic reason, but openapi-generator be broken