openapi-typescript-codegen VS protobuf-ts

I’d also add that if you use Typescript with an OpenAPI client generator (https://github.com/ferdikoomen/openapi-typescript-codegen) it can immensely alleviate some of the biggest pain points of seperate backend and front-end. It always used to be a major pain in the ass with the amount of overhead an API change would incur - updating documentation, postman, constant communication between backend and front-end devs, etc. Now I just npm run generate, I see new API changes in my Git client and Typescript errors for code that needs updating.

Also, using a library like Tanstack Query or Rdtk Query can almost completely eliminate manual state management, and kinda makes the whole development experience feel almost like SSR.

I have been in love with Loopback.io since v2 even though it was a bit of a rollercoaster.. Loopback v4 is a beautiful library. Its been around longer than nestjs but that's the easiest thing to compare it too. I recently have been creating lb4 servers that interface nextjs and react native clients. Initially, I identify my entities and use cases that I want to build. I then use the lb4 cli to auto generate models, relations, controllers, datasources, interceptors (add logic on methods/classes). I can start testing them with the OpenAPI explorer. With the openapi-typescript-codegen library I can generate services from my lb4 OpenAPI spec that I can use on the client side. From there, you can really query data easily with the loopback filter (which can be used on the client too). I initially started doing this with angular1/2+ but its been pleasant using many clients. Even though I have been leveraging it for years in production, I am still learning and exploring. There are many other awesome things I can expand on or explain if you are interested!

https://loopback.io/doc/en/lb4/

https://github.com/ferdikoomen/openapi-typescript-codegen/tr...

In our current project with a TS frontend and Python backend, we use an OpenAPI schema as the source of truth and openapi-typescript-codegen [0] to interface with it on the client side. While not perfect, it provides a very nice interface to our API with request/response typings.

I also wrote a 10-line mock API wrapper that you can call as mockApi((request) => response), and it will type-check that your mock function implements the API correctly.

[0]: https://github.com/ferdikoomen/openapi-typescript-codegen

Second step is to generate typescript types from the backend's spec. You can use a library like this.

openapi-typescript-codegen Generates a Typescript client with interfaces from an OpenAPI spec.

I'm not familiar with all the options openapi-generator has. I tried it awhile ago and found it quite buggy, and more of a pain to run, especially if you're not already doing Java development. I ended up preferring OpenAPI Typescript Codegen, which is written in Typescript. One option it has which would solve the problem you're running into here, is that you can tell it to use union types instead of enums. So your interfaces would be generated as

I'm currently working on two separate projects, the first is a Django project with DRF and I codegen with drf-spectacular [1] and openapi-typescript-codegen [2]. The other project also uses Django, with the API through Hasura and codegen with graphql-codegen [3]. In both of these cases I've been able to largely avoid duplicating my models clientside, or at least it isn't manual.

1: https://github.com/ferdikoomen/openapi-typescript-codegen

2: https://drf-spectacular.readthedocs.io/en/latest/

3: https://github.com/dotansimha/graphql-code-generator

For typescript client code generation, I typically use something like openapi-typescript-codegen, but there are a lot more generators (like the openapi-generator project) that are imperfect in their own ways, I'm sure you can find one that works for you.

DX for front or back end? The beauty of tRPC is that the types are derived/inferred from the backend runtime code (like, as you type). It would be nigh impossible to do that with grpc(-web) using proto files as the source of truth.

It's possible there's a project out there which could automatically produce proto files from something like zod, json-schema, etc. which could be directly interpreted by TS to provide similar (as you type) DX while still allowing some other language backend to consume the derived proto files (though the DX there would be less than ideal).

If you're just looking for similar TS clients/interfaces for grpc-web then I'd recommend https://github.com/timostamm/protobuf-ts which operates on plain JS objects (no new MyMessage().serialize(), instead the code generator mostly produces TS interfaces for you to work against: const myMessage: MyMessage = pojoConformingToInterface; const binary = MyMessage.toBinary(myMessage);)

https://github.com/timostamm/protobuf-ts (RpcMetaData) https://github.com/timostamm/protobuf-ts/blob/main/MANUAL.md

The second big difference is that we now have auto-generated client and server stubs. For this task, I chose to use buf and the protobuf-ts plugin in order to generate idiomatic Typescript classes and objects. Not only do these classes describe the types we'll use in the server and client, but also includes the actual gRPC implementations used to serialize and send messages back and forth across the wire.

I wouldn’t use grpc with web if you can avoid it. If you’re looking for a ts protobuf library I can recommend this one https://github.com/timostamm/protobuf-ts

https://github.com/timostamm/protobuf-ts looks interesting too.

I'd recommend looking into protobuf-ts (Timo from Buf) or protobuf-es (Buf maintained).

Use a GRPC library for frontend, assuming you want to go with Typescript take a look at https://github.com/timostamm/protobuf-ts Frontend frameworks like Angular/React/Vue don't define what and how to implement backend communication. You can use what you want and how you want it.

And there's also this which is by the same author but came before it: https://github.com/timostamm/protobuf-ts

The latter has code-generation for services and has various transport packages for twirp, grpc, and grpc-web.

This looks very interesting! Anything that can move people away from protobuf.js (which seems to no longer be maintained and depends on prototype values for "default values" meaning that you can't send deserialized protobuf messages to/from web workers) and the "native" JS codegen by Google (which produces code that is both very slow and a awkward to use) is a win in my book.

We're currently using https://github.com/timostamm/protobuf-ts which has been fantastic. It's codegen is dependent on the protoc binary as it is implemented as a protoc plugin, but the code it generates passes the protobuf conformance tests. The generated code also outputs plain objects when deserializing protobuf messages which means it works perfectly when sending stuff to/from web workers. It also has grpc, grpc-web, and twirp clients.