fullstack

Insights

Full-stack Type Safety met tRPC: een match made in heaven

🛠 Frontend development

Tegenwoordig werken software-ingenieurs met complexere technologieen dan ooit tevoren. Dit heeft geleid tot de opkomst van nieuwe, gespecialiseerde talen en tools om de creatie en het onderhoud van code te helpen stroomlijnen. Of u nu werkt met op een microservices gebaseerde architectuur of een serverless applicatie bouwt, het is ongelooflijk belangrijk dat uw code typesave is.

Wat is type safety?

Type safety is een eigenschap van programmeertalen die ervoor zorgt dat een programma met een error stopt als er een mismatch is tussen de types van de in- en output’s.

Waarom is type safety zo cruciaal?

Als een stuk code niet type safe is, loopt het het risico onjuiste output te produceren! Dit is een ernstig probleem dat kan leiden tot bugs en dataverlies. Een type safe programma is een programma dat type-controle uitvoert als onderdeel van de normale werking van de taal. De taal controleert de typen gegevens wanneer een programma wordt gecompileerd en stopt met een foutmelding als de types niet overeenkomen. Er zijn een paar redenen waarom type safety essentieel is voor een succesvol softwareontwikkelingsproces:

  • Verbeterde leesbaarheid en onderhoudbaarheid

  • Type safe code is gemakkelijker te lezen en toegankelijker voor nieuwe ontwikkelaars. Ervaren ingenieurs kunnen typeveiligheid gebruiken als een soort "contract" om ervoor te zorgen dat hun workflows grondig worden gedocumenteerd.

  • Type safety helpt fouten eerder in het ontwikkelingsproces op te sporen door ervoor te zorgen dat gegevens consistent zijn. Dit verkleint de kans dat bugs in de productie terechtkomen.

Waarom tRPC?

Bij het bouwen van TypeScript-applicaties is het moeilijk om volledige type-safety te hebben tussen de frontend en de backend. Je zou denken om meer types te schrijven, maar de beste type systems zouden helemaal geen types moeten schrijven. En dit is waar tRPC schittert!

tRPC is een library waarmee u volledig type-safe API's kunt maken zonder dat er schema's nodig zijn. Met tRPC kunt u types delen tussen uw client en server, en alleen de types - niet de servercode - importeren in uw frontend. Met end-to-end type safety kun je fouten tussen je frontend en backend opvangen tijdens het compileren.

Chack

Automatic type-safety - Made a server side change? TypeScript will warn you of errors on your client before you even save the file!

Chack

Snappy DX - tRPC has no build or compile steps, meaning no code generation, runtime bloat or build step.

Chack

Framework agnostic - Compatible with all JavaScript frameworks and runtimes. It's easy to add to your existing projects.

Chack

Autocompletion - Using tRPC is like using an SDK for your API's server code, giving you confidence in your endpoints.

Chack

Light bundle size - tRPC has zero dependencies and a tiny client-side footprint making it lightweight.

Chack

Batteries included - We provide adapters for React, Next.js, Express, Fastify, AWS Lambda, Solid, Svelte, and more.

Waarom niet GraphQL?

tRPC en GraphQL bieden dezelfde functionaliteit: Data krijgen van de server naar de client. GraphQL is een specificatie waarmee de client specifieke gegevens kan opvragen, die de server omzet in een antwoord met alleen de gevraagde velden. tRPC is een protocol waarmee de client door de server gedefinieerde procedures kan aanroepen, relevante invoer kan doorgeven en een antwoord terugkrijgt. De invoer wordt bij runtime gecontroleerd met behulp van validatie libraries zoals Zod, Yup of Superstruct. De types van de procedures kunnen worden afgeleid van de server naar de client. De API van tRPC kan rechtstreeks worden aangeroepen, maar bevat een wrapper rond React Query, die een uitstekende gebruikerservaring garandeert.

Zowel GraphQL als tRPC ondersteunen end-to-end type controle, waarbij GraphQL codegeneratie vereist tijdens de ontwikkeling. Beide zijn snel genoeg voor onze doeleinden.

Hoe werkt het (in Nextjs)?

1. Eerst moet je een router aanmaken:

Initialiseer je tRPC backend met de initTRPC functie en maak je eerste router aan.

2. Maak tRPC-hooks

Maak een reeks sterk getypeerde hooks met behulp van de API's type signature.

// utils/trpc.ts
// ======================================================

import { httpBatchLink } from '@trpc/client';
import { createTRPCNext } from '@trpc/next';
import type { AppRouter } from '../server/routers/_app';

function getBaseUrl() {
  if (typeof window !== 'undefined')
    // browser should use relative path
    return '';

  if (process.env.VERCEL_URL)
    // reference for vercel.com
    return `https://${process.env.VERCEL_URL}`;

  if (process.env.RENDER_INTERNAL_HOSTNAME)
    // reference for render.com
    return `http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}`;

  // assume localhost
  return `http://localhost:${process.env.PORT ?? 3000}`;
}

export const trpc = createTRPCNext<AppRouter>({
  config({ ctx }) {
    return {
      links: [
        httpBatchLink({
          /**
           * If you want to use SSR, you need to use the server's full URL
           * @link https://trpc.io/docs/ssr
           **/
          url: `${getBaseUrl()}/api/trpc`,
        }),
      ],
      /**
       * @link https://tanstack.com/query/v4/docs/reference/QueryClient
       **/
      // queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } },
    };
  },
  /**
   * @link https://trpc.io/docs/ssr
   **/
  ssr: true,
});
// => { useQuery: ..., useMutation: ...}

3. Configureer _app.tsx

// pages/_app.tsx
// ======================================================

import type { AppType } from 'next/app';
import { trpc } from '../utils/trpc';

const MyApp: AppType = ({ Component, pageProps }) => {
  return <Component {...pageProps} />;
};

export default trpc.withTRPC(MyApp);

4. Maak de API requests

// pages/index.tsx
// ======================================================

import { trpc } from '../utils/trpc';
export default function IndexPage() {
  const hello = trpc.hello.useQuery({ text: 'client' });
  if (!hello.data) {
    return <div>Loading...</div>;
  }
  return (
    <div>
      <p>{hello.data.greeting}</p>
    </div>
  );
}

Conclusie

Hoewel moderne technologieën het ontwikkelingsproces kunnen helpen stroomlijnen, moeten ingenieurs erop letten hun code zo te ontwerpen dat deze type safe is. Full-stack type safety met tRPC maakt het gemakkelijker om code te schrijven die vrij is van runtime fouten.

Aaron

Aaron

Delen:

Op zoek naar inspiratie?

Wij zorgen voor gepast advies op het vlak van frontend development.

💌

Insights

Meer inzichten

nextjs-13

🛠 Frontend development

Next.js 13

Het is zover, Next.js 13 is sinds 25 oktober 2022 uitgebracht. Exact zes jaar later dan de eerste Next.js release. Waarom zou je Next.js willen gebruiken en wat zijn de nieuwe functionaliteiten in Next.js 13? In deze blogpost bespreken we wat de verschillen zijn tussen Server-Side en Client-Side Rendering. Vervolgens onderzoeken we hoe je een applicatie structureert, wat server componenten zijn, streamen van UI en enkele verbeteringen. Als laatste bekijken we wat Next.js 13 voor de toekomst te bieden heeft.

Spline

🛠 Frontend development

Hoe maak je een moderne UI met Spline

Het ontwerpen van een aantrekkelijke user interface is niet altijd evident. Daarom is het belangrijk om de nieuwste trends te volgen en inspiratie te halen uit werken die beschikbaar staan op het internet. Zo heb ik Spline leren kennen. Spline is een design tool om op een relatief gemakkelijke wijze 3d graphics te creëren voor de web. In deze post, zal ik uitleggen wat de basisfuncties zijn en hoe je deze software kan gebruiken voor jouw volgend project.

css

🛠 Frontend development

Dingen die je in CSS kan doen in plaats van Javascript

Wanneer je wat wilt maken in Javascript dat mogelijk is in CSS, gebruik dan CSS. Of zoek eens op of het mogelijk is tenminste. 🤓