Insights
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.
Automatic type-safety - Made a server side change? TypeScript will warn you of errors on your client before you even save the file!
Snappy DX - tRPC has no build or compile steps, meaning no code generation, runtime bloat or build step.
Framework agnostic - Compatible with all JavaScript frameworks and runtimes. It's easy to add to your existing projects.
Autocompletion - Using tRPC is like using an SDK for your API's server code, giving you confidence in your endpoints.
Light bundle size - tRPC has zero dependencies and a tiny client-side footprint making it lightweight.
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
Insights
Meer inzichten
🛠 Frontend development
Vue Amsterdam 2024: dag 1
Dag 1 van de jaarlijkse Vue Amsterdam conference.
📱 PWA,🛠 Frontend development
PWA. Nu meer dan ooit.
De kloof tussen native en web wordt steeds kleiner. Dat bewijst ook de komst van Push Notifications voor web apps op het Home Screen (PWA’s) in iOS 16.4. Deze functionaliteit was al langer beschikbaar op Android, maar nu kunnen ontwikkelaars dit eindelijk voor beide platforms implementeren. Android en iOS samen hebben een marktaandeel van maar liefst 99% van alle mobiele gebruikers.
💫 Motion,🛠 Frontend development
Motion Library
Om een aantrekkelijke en moderne UI te bekomen, is het animeren van een website van groot belang. Daarom hebben we bij Appeel gewerkt aan een animatie project “Motion library”. In dit project worden verschillende componenten van een website geanimeerd en de code ervan getoond om zo als inspiratiebron te dienen voor alle collega’s van Appeel.