+-----------------------------------------------------------------------------------------+
|                  Modern API Protocol Architecture Matrix (2026)                         |
+-----------------------------------------------------------------------------------------+

gRPC (Backend Microservices Titan)
- Wire Protocol: HTTP/2 Binary Protocol Buffers.
- Best for: Polyglot microservices (Go, Java, Rust, C++), high-throughput service meshes.
- Browser Limitation: Requires gRPC-Web proxy / Envoy sidecar.

CONNECTRPC (The Modern Browser-Native Protobuf Standard)
- Wire Protocol: Connect Protocol / gRPC / gRPC-Web over HTTP/1.1, HTTP/2, or HTTP/3!
- Best for: Web & Mobile clients calling Protobuf backend services natively via 'fetch()'!
- Superpower: Zero proxy needed! Swappable with standard gRPC servers.

tRPC (Full-Stack TypeScript Developer Velocity)
- Wire Protocol: Standard JSON / SuperJSON over HTTP POST/GET.
- Best for: Next.js / TanStack Start / React TypeScript monorepos.
- Superpower: ZERO codegen, ZERO .proto files! Pure TypeScript type inference across client/server.

+-----------------------------------------------------------------------------------------+
|                  gRPC-Web Proxy vs ConnectRPC Browser Architecture                      |
+-----------------------------------------------------------------------------------------+

LEGACY gRPC-WEB ARCHITECTURE (High Complexity):
[Browser App] ===(gRPC-Web Over HTTP/1.1)===> [ENVOY PROXY] ===(gRPC HTTP/2)===> [Backend Service]
* Fragile infrastructure requirement; extra network hop; painful debugging.

CONNECTRPC ARCHITECTURE (2026 Modern Standard):
[Browser / Mobile App] =================(Native fetch over HTTP/3)=================> [Go / Node Server]
* Zero Envoy proxy needed! ConnectRPC handler serves Connect, gRPC, and REST simultaneously!

syntax = "proto3";
package order.v1;
option go_package = "in/mojostudio/order/v1;orderv1";

service OrderService {
  rpc GetOrder(GetOrderRequest) returns (GetOrderResponse);
}

message GetOrderRequest {
  string order_id = 1;
}

message GetOrderResponse {
  string order_id = 1;
  double amount_usd = 2;
  string status = 3;
}

// server/main.go
package main

import (
	"context"
	"log"
	"net/http"

	"connectrpc.com/connect"
	"golang.org/x/net/http2"
	"golang.org/x/net/http2/h2c"
	orderv1 "in/mojostudio/order/v1"
	"in/mojostudio/order/v1/orderv1connect"
)

type OrderServer struct{}

func (s *OrderServer) GetOrder(
	ctx context.Context,
	req *connect.Request[orderv1.GetOrderRequest],
) (*connect.Response[orderv1.GetOrderResponse], error) {
	log.Printf("📦 Received GetOrder request for Order ID: %s", req.Msg.OrderId)

	res := connect.NewResponse(&orderv1.GetOrderResponse{
		OrderId:   req.Msg.OrderId,
		AmountUsd: 149.99,
		Status:    "COMPLETED",
	})
	return res, nil
}

func main() {
	server := &OrderServer{}
	mux := http.NewServeMux()
	
	// Register ConnectRPC handler (Supports Connect, gRPC, and gRPC-Web simultaneously!)
	path, handler := orderv1connect.NewOrderServiceHandler(server)
	mux.Handle(path, handler)

	log.Println("🚀 ConnectRPC Server running on :8080...")
	http.ListenAndServe(":8080", h2c.NewHandler(mux, &http2.Server{}))
}

// client/orderClient.ts
import { createClient } from "@connectrpc/connect";
import { createConnectTransport } from "@connectrpc/connect-web";
import { OrderService } from "./gen/order/v1/order_pb";

// 1. Initialize Browser Transport (Uses standard browser fetch!)
const transport = createConnectTransport({
  baseUrl: "https://api.mojostudio.in",
});

// 2. Create Type-Safe RPC Client
const client = createClient(OrderService, transport);

async function fetchOrderDetails(orderId: string) {
  // Fully typed request and response!
  const response = await client.getOrder({ orderId });
  console.log(`✅ Order Amount: $`{response.amountUsd}, Status: `{response.status}`);
}

// server/trpc/router.ts
import { initTRPC } from "@trpc/server";
import { z } from "zod";

const t = initTRPC.create();

export const appRouter = t.router({
  getUserProfile: t.procedure
    .input(z.object({ userId: z.string().uuid() }))
    .query(async ({ input }) => {
      // Direct TypeScript execution
      return {
        id: input.userId,
        name: "Sachin Sharma",
        role: "Lead Systems Architect",
      };
    }),
});

// Export Router Type Definition for Client Inference!
export type AppRouter = typeof appRouter;

// client/UserProfile.tsx
import { createTRPCReact } from "@trpc/react-query";
import type { AppRouter } from "../server/trpc/router";

export const trpc = createTRPCReact<AppRouter>();

export function UserProfile({ userId }: { userId: string }) {
  // Instant TypeScript compile-time autocompletion with ZERO codegen build steps!
  const { data, isLoading } = trpc.getUserProfile.useQuery({ userId });

  if (isLoading) return <div>Loading...</div>;
  return <h1>{data?.name} - {data?.role}</h1>;
}

+-----------------------------------------------------------------------------------------+
|                  The 2026 Split-Stack Enterprise API Architecture                       |
+-----------------------------------------------------------------------------------------+

1. INTERNAL SERVICE MESH (Go, Rust, Java):
   - Protocol: gRPC / ConnectRPC (Binary Protobuf over HTTP/2)
   - Advantage: Sub-millisecond latency, strict schema contracts, minimal CPU overhead.

2. WEB & MOBILE FRONTEND APPLICATIONS:
   - Protocol: ConnectRPC or tRPC
   - Advantage: ConnectRPC for polyglot backends; tRPC for fast Next.js full-stack teams.

3. PUBLIC DEVELOPER PLATFORM & PARTNER ECOSYSTEM:
   - Protocol: REST / OpenAPI 3.1 (JSON over HTTPS)
   - Advantage: Maximum global interoperability with third-party SDKs and Webhooks.

       +-------------------------------------------------------------+
       |             Roundtrip Request Latency (10,000 req/sec) (ms) |
       +-------------------------------------------------------------+
 Standard REST API (JSON over HTTP/1.1) | ==================================== [14.5 ms]
 tRPC (JSON over HTTP/2)                | ====================== [8.8 ms]
 ConnectRPC (Binary Protobuf over HTTP/2)| === [1.4 ms]
 Pure gRPC (Binary Protobuf over HTTP/2) | == [1.1 ms] (13x Lower Latency than REST!)
                                        +-------------------------------------+
                                        0ms     4ms     8ms     12ms    16ms

       +-------------------------------------------------------------+
       |             Network Payload Size (1,000 Complex Records)    |
       +-------------------------------------------------------------+
 JSON String Payload (REST / tRPC)      | ==================================== [480 KB]
 Binary Protobuf (gRPC / ConnectRPC)    | ======= [78 KB] (83.7% Bandwidth Reduction!)
                                        +-------------------------------------+
                                        0KB    100KB   200KB   300KB   400KB