Reaktif Form Geliştirme Sürecini Basitleştirin

Reaktif formları oluştururken, genellikle aynı parçaları tekrar tekrar yazmak zorunda kalırsınız. Material UI ve React Hook Form birlikte kullanıldığında, geliştiriciler sık sık aynı bağlantı kodunu yazarlar: değerleri eşleştirmek, hataları işlemek ve doğrulama kurallarını geçmek. Bu tekrar eden desen, form tasarımı ve geliştirme sürecini yavaşlatır, özellikle form kompleksliği arttıkça.

Gizli Maliyet: Manuel Entegrasyon

React Hook Form, güçlü form durum yönetimi sağlar, Materiel UI ise güzel UI bileşenleri sunar. Ancak bu iki kütüphane doğal olarak iletişim kurmaz, bu nedenle geliştiricilerin manuel olarak köprü kurması gerekir. Her girdi için, aynı entegrasyon adımlarını tekrarlarız:

• değer ve onChange arasında UI bileşeni ve React Hook Form'u eşleştirmek
• Hata mesajlarını doğru formata dönüştürmek
• Doğrulama kurallarını tutarlı bir şekilde uygulamak
• Alanlar arasında tutarlı bir stil uygulamak

Bu işlem kötü bir şekilde ölçeklenir. Beş alanlı bir form लगभग 50 satır bağlantı kodu gerektirebilirken, 20 alanlı bir form yönetilemez hale gelir. Gerçek sorun kütüphaneler değil, zaman içinde biriken tekrar eden bağlantı kodudur.

Daha Akıllı Bir Yaklaşım: Form Anlayışı Olan Bileşenler

Material UI bileşenlerinin zaten React Hook Form'u anladığını düşünün. Controller sarmalayıcıları ve hata eşleştirmeleri yazmak yerine, alanları doğrudan doğrulama kurallarıyla açıklayabilirsiniz. Bu, dashforge-ui kütüphanesinin temel fikridir, bu kütüphane önceden bağlı form-anlayışı olan bileşenler sunar.

Önce: Manuel Bağlantı ile React Hook Form ve MUI

import { useForm, Controller } from 'react-hook-form';
import { TextField, Button, Box } from '@mui/material';

interface LoginForm {
  email: string;
  password: string;
}

export function LoginForm() {
  const { control, handleSubmit, formState: { errors } } = useForm<LoginForm>({
    defaultValues: { email: '', password: '' },
  });

  return (
    <Box component="form" onSubmit={handleSubmit((data) => console.log(data))}>
      <Controller
        name="email"
        control={control}
        rules={{ required: 'Email gerekli' }}
        render={({ field, fieldState: { error } }) => (
          <TextField
            {...field}
            label="Email"
            error={!!error}
            helperText={error?.message}
            margin="normal"
            fullWidth
          />
        )}
      />
      <Controller
        name="password"
        control={control}
        rules={{ required: 'Parola gerekli' }}
        render={({ field, fieldState: { error } }) => (
          <TextField
            {...field}
            label="Parola"
            type="password"
            error={!!error}
            helperText={error?.message}
            margin="normal"
            fullWidth
          />
        )}
      />
      <Button type="submit" variant="contained" fullWidth sx={{ mt: 2 }}>
        Giriş
      </Button>
    </Box>
  );
}

Bu yaklaşım çalışır, ancak çok fazla kod gerektirir. İki alan, 52 satır kod gerektirir ve çoğunda tekrar eden bağlantı mantığı bulunur.

Sonra: Basitleştirilmiş Sözdizimi ile dashforge-ui

import { DashForm, TextField, Button } from '@dashforge/ui';

type LoginForm = {
  email: string;
  password: string;
};

export function LoginForm() {
  return (
    <DashForm<LoginForm>
      defaultValues={{ email: '', password: '' }}
      onSubmit={(values) => console.log(values)}
    >
      <TextField
        name="email"
        label="Email"
        rules={{ required: 'Email gerekli' }}
      />
      <TextField
        name="password"
        label="Parola"
        type="password"
        rules={{ required: 'Parola gerekli' }}
      />
      <Button type="submit">Giriş</Button>
    </DashForm>
  );
}

Aynı işlevsellik şimdi 22 satırda bulunur - %58 daha az kod. Artık Controller sarmalayıcıları, manuel hata eşleştirmesi veya tekrar eden alan tanımları yoktur. Bileşenler, dahili olarak entegrasyonu işler.

Gerçek Dünya Formlarında Ne Değişir

dashforge-ui, React Hook Form'un temelini kullanarak, tüm yeteneklerini korurken bağlantı kodunu azaltır. Hala şunları alırsınız:

• Aynı form durum yönetimi via React Hook Form
• Tam doğrulama desteği ile async kuralları
• Doğru TypeScript çıkarsaması form özelliklerinden
• Otomatik hata işleme manuel alan durum denetimi olmaksızın

Kütüphane, karmaşık senaryoları basitleştiren yeni deklaratif özellikler tanıtır:

• Koşullu görünüm

<TextField
  name="şirket"
  label="Şirket"
  visibleWhen={(engine) => {
    const hesapTürü = engine.getNode('hesapTürü')?.value;
    return hesapTürü === 'iş';
  }}
/>

• Alanlararası doğrulama

<TextField
  name="parolaTekrarı"
  label="Parola Tekrarı"
  rules={{
    validate: (value, values) => 
      value === values.parola || 'Parolalar eşleşmiyor',
  }}
/>

• Async doğrulama

<TextField
  name="email"
  label="Email"
  rules={{
    validate: async (value) => {
      const kullanılabilir = await emailKullanılabilirliğiniKontrolEt(value);
      return kullanılabilir ? true : 'Email zaten kayıtlı';
    },
  }}
/>

Bu desenler, manuel uygulamalarla aynı şekilde çalışır, ancak çok daha az kod gerektirir.

Performans ve Demet Boyutu

Performans, özellikle büyük uygulamalarda önemlidir. İşte kütüphanelerin karşılaştırılması:

• React Hook Form: ~8.5kB (sıkıştırılmış)
• Material UI TextField + Button: ~20kB (sıkıştırılmış)
• dashforge-ui çekirdeği: ~12kB (sıkıştırılmış)

React Hook Form ile dashforge-ui kullanmak, toplam ~40.5kB demet boyutuna sonuçlanır - manuel RHF + MUI'nin birleşik ~65kB'dan daha küçüktür. Kütüphane, bağlantı sarmalayıcılarını ortadan kaldırarak ve ortak desenleri birleştirerek aşırı yükü azaltır, bu da form-ağır uygulamalar için verimli bir seçim haline gelir.

Geliştirici Deneyimi: Önce ve Sonra

| Görev | React Hook Form + MUI | dashforge-ui | |-------------------------------|-----------------------|--------------| | Gerekli metin alanını ekle | | |

Gelecekte, geliştiriciler daha basit ve efektif bir şekilde form oluşturabilir ve daha fazla zamanını uygulama mantığını geliştirmeye odaklayabilir. dashforge-ui gibi kütüphaneler, geliştirme sürecini hızlandırarak ve daha iyi bir kullanıcı deneyimi sunarak, geliştiricilerin uygulama geliştirmeye daha fazla odaklanmasına yardımcı olabilir.