connect-bufbuild-and-grpc-web-comparison.md

Code size comparison

This comparison between Connect-Web and gRPC-web

We generated code for the proto using protoc-gen-grpc-web and protoc-gen-connect-es. We then bundled a client for the service (see the client's PR) with vite, compressed it as a web server would usually do.

manabuf-syllabus-ts proto

• protoc-gen-grpc-web: https://github.com/manabie-com/manabuf-syllabus-ts/commit/e71368eb9ed9ba620c06b707937437d3ac21a20e
• protoc-gen-connect-es: https://github.com/manabie-com/manabuf-syllabus-ts/pull/184

code generator	bundle size	compressed
connect	819.60 kB	87.39 kB
grpc-web	3,625.92 kB	261.09 kB

What I did:

I tried to use glob import to import all files from manabuf-syllabus proto

// grpc-web
const modules = import.meta.glob("../../../../../node_modules/manabuf-syllabus/**/*.js", {
    eager: true,
});
console.log("===", modules);

// connect-web
const modules = import.meta.glob("../../../../../node_modules/manabuf-syllabus-v2/**/*.ts", {
    eager: true,
});
console.log("===", modules);

How to use connect

• Make sure your service already allow those headers
• Update your squad proto in gen tool
• Using in FE code

Notes

The generated proto PR will create directly on school-portal-admin with the prefix [connect-bufbuild][achirecture] (for example) and our repo only keeps the latest three PRs, it will auto-close the stale PRs as well