Zod'a Modüler ve Hafif Bir Alternatif: Valibot ile Paket Boyutunu %90 Azaltın

0:00

/0

1×

Zod'a Modüler ve Hafif Bir Alternatif: Valibot ile Paket Boyutunu %90 Azaltın

Modern web geliştirme dünyasında performans, artık bir lüks değil; kullanıcı deneyimi ve SEO başarısı için zorunlu bir kriterdir. Frontend uygulamalarımız büyüdükçe JavaScript paket boyutları (bundle size) şişer, bu da sayfa yüklenme sürelerini ve tarayıcının kod derleme süresini olumsuz etkiler.

Veri doğrulama (schema validation) söz konusu olduğunda Zod, TypeScript ekosisteminin tartışmasız kralı konumundaydı. Ancak Zod'un önemli bir problemi var: Monolitik mimarisi. Kullanmadığınız özellikler bile bundle boyutunuza dahil edilir.

Tam da bu noktada sahneye Valibot çıkıyor! Valibot, Zod'un sunduğu tip güvenliği ve kullanım kolaylığını korurken, Tree-shaking desteği sayesinde şema doğrulama kütüphanenizin kapladığı alanı %90'a varan oranlarda küçültüyor.

Bu yazıda, Valibot'un modüler mimarisini, Tree-shaking mekanizmasını ve frontend performansında nasıl bir devrim yarattığını yakından inceleyeceğiz.

Zod Neden Şişiyor? Monolitik Mimarinin Sınırları

Zod, nesne odaklı ve method-chaining (zincirleme metot) mantığıyla çalışır. Örneğin bir e-posta alanını doğrulamak için şu kodu yazarız:

import { z } from 'zod';

const EmailSchema = z.string().email();

Kulağa harika geliyor, değil mi? Ancak arka planda z objesi, Zod'un sunduğu tüm doğrulama fonksiyonlarını (URL, UUID, Regex, IP adresi vb.) bünyesinde barındıran devasa bir nesnedir. Siz uygulamanızda sadece string() ve email() kullansanız dahi, bundler (Webpack, Vite, Rollup) bu büyük objeyi parçalayamaz. Sonuç olarak, kullanmadığınız yüzlerce satır kod kullanıcının cihazına indirilir.

Valibot Nedir? Modüler Tasarım Felsefesi

Valibot, şema doğrulama süreçlerine tamamen fonksiyonel ve modüler bir yaklaşım getirir. Valibot'ta zincirleme metotlar yerine, sadece ihtiyacınız olan fonksiyonları içeri aktardığınız (import ettiğiniz) bir yapı kullanılır.

Valibot ile Aynı Kodun Yazımı:

import { object, string, email, pipe } from 'valibot';

const EmailSchema = object({
  userEmail: pipe(string(), email()),
});

Bu modüler yaklaşım sayesinde modern bundler'lar, projenizde import edilmeyen diğer tüm Valibot fonksiyonlarını tespit eder ve derleme aşamasında nihai paketten tamamen çıkarır (Tree-shaking).

Rakamlarla Performans: Zod vs. Valibot

Rakamlar yalan söylemez! Paket boyutlarını karşılaştırdığımızda Valibot'un yarattığı fark net bir şekilde ortaya çıkıyor:

Çoğu form doğrulama senaryosunda Valibot, uygulamanıza yalnızca 1 KB civarında bir yük getirir. Bu da Zod'a kıyasla %90 ila %95 arasında bir boyut tasarrufu anlamına gelir!

Valibot'un Öne Çıkan Avantajları

1. Mükemmel Tree-Shaking ve Modülerlik

Sadece kullandığınız doğrulayıcılar (validators), dönüştürücüler (transformations) ve tipler paket boyutunuza eklenir. Kullanmadığınız hiçbir şey için performans bedeli ödemezsiniz.

2. %100 TypeScript Uyumluluğu

Valibot, tıpkı Zod gibi TypeScript-first olarak tasarlanmıştır. Şemalarınızdan otomatik olarak tip çıkarımı (v.InferOutput<typeof Schema>) yapabilirsiniz.

import { object, string, number, InferOutput } from 'valibot';

const UserSchema = object({
  name: string(),
  age: number(),
});

// TypeScript Tip Çıkarımı
type User = InferOutput<typeof UserSchema>; 
// { name: string; age: number; }

3. Zengin Ekosistem Entegrasyonu

Valibot, popüler frontend araçlarıyla tam uyumlu çalışır: * React Hook Form (@hookform/resolvers/valibot) * TanStack Form * Formik * Nuxt / Vue / Svelte ekosistemleri

4. Kolaylıkla Özelleştirilebilir (Custom Validation)

Kendi özel doğrulama kurallarınızı yazmak Valibot ile son derece basittir. Sadece saf bir JavaScript fonksiyonu tanımlamanız yeterlidir.

Gerçek Hayat Senaryosu: React Hook Form ile Kullanım

Valibot'u projenize dahil etmek son derece kolaydır. İşte bir kayıt formu senaryosu:

import { useForm } from 'react-hook-form';
import { valibotResolver } from '@hookform/resolvers/valibot';
import { object, string, email, minLength, pipe } from 'valibot';

// Şema Tanımlama
const RegisterSchema = object({
  username: pipe(string(), minLength(3, 'Kullanıcı adı en az 3 karakter olmalıdır.')),
  email: pipe(string(), email('Geçersiz e-posta adresi.')),
});

export function RegisterForm() {
  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: valibotResolver(RegisterSchema),
  });

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('username')} placeholder="Kullanıcı Adı" />
      {errors.username && <span>{errors.username.message}</span>}

      <input {...register('email')} placeholder="E-posta" />
      {errors.email && <span>{errors.email.message}</span>}

      <button type="submit">Kayıt Ol</button>
    </form>
  );
}

Hangi Durumda Hangisini Seçmelisiniz?

• Valibot'u Seçin:
• Frontend performansının (Lighthouse, Core Web Vitals) kritik olduğu projelerde.
• Mobil kullanıcı hedef kitlesinin yüksek olduğu yavaş bağlantılı senaryolarda.

• Mikrofrontend mimarilerinde ve Edge fonksiyonlarında (Cloudflare Workers, Vercel Edge).

• Zod'u Seçin:

• Node.js / Backend projelerinde (Paket boyutunun frontend kadar kritik olmadığı durumlar).
• Halihazırda devasa bir Zod kod tabanına sahip ve geçiş maliyeti yüksek projelerde.

Sonuç: Web Performansında Yeni Standart

Valibot, geliştirici deneyiminden (DX) ve tip güvenliğinden ödün vermeden frontend performansını optimize etmenin mükemmel bir yolunu sunuyor. Modüler mimarisi ve Tree-shaking gücü sayesinde JavaScript bundle'larınızı hafifletmek hiç bu kadar kolay olmamıştı.

Eğer siz de yeni bir projeye başlıyorsanız veya mevcut projenizdeki yükleri hafifletmek istiyorsanız, Valibot'a kesinlikle bir şans vermelisiniz.

Siz projenizde hangi doğrulama kütüphanesini kullanıyorsunuz? Valibot hakkındaki düşüncelerinizi yorumlarda paylaşmayı unutmayın!