Kendi React Validation Kitaplığınızı Oluşturma: Geliştirici Deneyimi (Bölüm 3)

Bu küçük makale dizisini takip ettiyseniz, artık kendi doğrulama kitaplığınızı nasıl oluşturacağınızı öğrendiniz. Üzerine atabileceğiniz hemen hemen her zorluğun üstesinden gelebilir ve erişilebilirlik endişelerinde bile yardımcı olur! Tek dezavantajı, birlikte çalışmanın berbat olmasıdır.

Evet, doğru. Geliştirici bakış açısından kullanıcı deneyimi ciddi şekilde eksik. Kelimeleri yanlış yazdığımızda, API'leri yanlış kullandığımızda veya herhangi bir şey, gerçekten!

Bu makale, doğrulama kitaplığınızın veya bunun için herhangi bir kitaplığın geliştirici deneyimini nasıl iyileştirebileceğiniz konusunda size rehberlik edecektir.

• Bölüm 1: Temel Bilgiler
• Bölüm 2: Özellikler
• Bölüm 3: Deneyim

Başlayan

Bu makalenin son bölümünden bu yana, tüm kitaplık kodunu kendi dosyalarına çıkardık. Neyle başladığımızı görmek için CodeSandbox demosuna bir göz atın.

Kolaylık Fonksiyonları

Kütüphanemizin en yaygın durumlar için mümkün olduğunca basit olmasını istiyoruz. Bu hedefe doğru ilerlemenin bir yolu, belirli işlevler için uygun yardımcı işlevler eklemektir.

Böyle bir özellik, formumuzun geçerli olup olmadığını, yani tüm hata mesajlarının null olup olmadığını kontrol etmek olabilir. Bu, genellikle onSubmit işleyicinizde kontrol ettiğiniz bir şeydir, ancak oluşturma yönteminizde de yararlı olabilir. Hadi uygulayalım!

 const isFormValid = useMemo( () => Object.values(errors).every(error => error === null), [errors] );

Bu bayrağı onSubmit form işleyicimizde ve ayrıca oluşturma yöntemimizde sağlayacağız.

• CodeSandbox demosuna bakın

Yazılabilecek daha pek çok şey var, ama bunun okuyucu için bir alıştırma olmasına izin vereceğim.

Geliştirme Uyarıları ve Değişmezler

React'in en büyük özelliklerinden biri, geliştirme sırasında birçok yardımcı konsol uyarısıdır. Aynı kaliteyi kullanıcılarımıza da sunmalıyız.

Başlamak için, iki işlev oluşturacağız - warning konsola kaydetme uyarısı ve bir hata atma invariant - her ikisi de belirli bir koşul karşılanmadığında.

 function warning(condition, message) { if (process.env.NODE_ENV === 'production' || condition) { return; } console.warn('useValidation: ' + message); } function invariant(condition, message) { if (process.env.NODE_ENV === 'production' || condition) { return; } throw new Error('useValidation: ' + message); }

Hata kitaplığınızı çökertecek (veya onu işe yaramaz hale getirecek) ve kötü uygulamalar veya diğer tavsiyeler için warning invariant kullanmak istiyorsunuz.

Ne Zaman Uyarılmalı

Ne zaman uyarılacağına karar vermek oldukça önemlidir. Çok fazla ve sadece sinir bozucusun. Çok az ve kritik hataların üretime gönderilmesine izin veriyorsunuz. Bu nedenle uyarılarımızda akıllı olmamız gerekir.

Kütüphanemiz oldukça büyük bir konfigürasyon nesnesini kabul ettiğinden, bunu bir şekilde doğrulamak mantıklıdır - en azından geliştirme sırasında. Bunu TypeScript veya Flow gibi bir tür sistemi kullanarak çözebiliriz, ancak bu, tüm normal eski JavaScript kullanıcılarını hariç tutar.

Bunun yerine, yapılandırmanın doğru alanları içerdiğini doğruladığımız ve ilgili uyarıları yazdırdığımız bir çalışma zamanı şema denetleyicisi oluşturalım.

 function validateConfigSchema(config) { if (process.env.NODE_ENV === 'production') { return; } if (typeof config === 'function') { config = config({}); } invariant( typeof config === 'object', `useValidation should be called with an object or a function returning an object. You passed a ${typeof config}.`, ); invariant( typeof config.fields === 'object', 'useValidation requires a `field` prop with an object containing the fields and their validators. Please refer to the documentation on usage: https://link.to/docs' ); invariant( Object.values(config.fields).every(field => typeof field === 'object'), 'useValidation requires that the `field` object only contains objects. It looks like yours isn\'t. Please refer to the documentation on usage: https://link.to/docs' ); warning( ['always', 'blur', 'submit', undefined].includes(config.showError), 'useValidation received an unsupported value in the `showError` prop. Valid values are "always", "blur" or "submit".' ) // And so on }

Vakit geçirmek isteseydik, muhtemelen bir süre daha buna devam edebiliriz. Ve yapmalısın! Uygulamanızın geliştirici deneyimini iyileştirmenin harika bir yolu.

Ancak bunları elle yazmak zorunda değilsiniz. Gerçekten güzel bir çalışma zamanı doğrulama denetimi oluşturmaya yardımcı olabilecek, popüler nesne şeması doğrulama kitaplığı joi bir tarayıcı bağlantı noktası vardır. Ayrıca, daha önce belirtildiği gibi, bir tür sistemi, bu tür sistemi kullanan kullanıcılar için derleme zamanında yapılandırma hatalarını yakalamaya yardımcı olacaktır.

Esnekliğe İzin Verin

İyi bir geliştirici deneyimi, büyük ölçüde geliştiricilerin önüne geçmemektir. Bu deneyimi iyileştirebileceğimiz birkaç yola bakalım.

Çakışan Sahne Öğeleri Oluşturun

İlk olarak, eşya alıcılarımız girdilerimize ve formlarımıza, tüketicilerimiz tarafından yanlışlıkla geçersiz kılınabilecek bazı donanımlar uygular. Bunun yerine, prop alıcılarımıza, herhangi bir çakışan props'u birlikte oluşturacak bir prop override nesnesi ekleyelim.

Bunu getFieldProps şu şekilde uygulayabiliriz:

 getFieldProps: (fieldName, overrides = {}) => ({ onChange: e => { const { value } = e.target; if (!config.fields[fieldName]) { return; } dispatch({ type: 'change', payload: { [fieldName]: value }, }); if (overrides.onChange) { overrides.onChange(e); } }, onBlur: e => { dispatch({ type: 'blur', payload: fieldName }); if (overrides.onBlur) { overrides.onBlur(e) } }, name: overrides.name || fieldName, value: state.values[fieldName] || '', }),

Benzer bir yaklaşım getFormProps içinde izlenebilir.

Pervane Delmekten Kaçınmaya Yardımcı Olun

Bazı formlar büyük olabilir ve birkaç bileşene ayrılabilir. Tüketicilerimizin sondaj malzemelerini ağaca dikmek yerine bir bağlam sağlamalıyız. Bu şekilde, aşağıdaki ağacın herhangi bir yerinde özel kancamızdan döndürdüğümüz tüm şeylere erişebilirler.

İlk olarak, createContext yöntemiyle bir ValidationContext oluşturalım:

 export const ValidationContext = React.createContext({});

Ardından, bunun yerine useValidation kancasındaki tüm değerleri bağlam içinde sağlayan bir ValidationProvider bileşeni oluşturalım:

 export const ValidationProvider = props => { const context = useValidation(props.config); return ( {props.children} ); }; export const ValidationProvider = props => { const context = useValidation(props.config); return ( {props.children} ); }; export const ValidationProvider = props => { const context = useValidation(props.config); return ( {props.children} ); };

Şimdi, useValidation doğrudan çağırmak yerine, formumuzu bir ValidationProvider bileşenine sarar ve useContext kancasını kullanarak doğrulama özelliklerine ( getFormProps , errors vb.) erişirdik. Bunu şöyle kullanırsın:

 Import React, { useContext } from 'react'; import { ValidationContext } from './useValidation'; function UsernameForm(props) { const { getFieldProps, errors } = useContext(ValidationContext); return ( <> <input {...getFieldProps('username')} /> {errors.username && {errors.username}></span>} </> ); }

Bu şekilde, her iki dünyanın da en iyisini elde edersiniz! Bu basit senaryolar için basit bir kanca ve bu karmaşık parçalar için ihtiyacınız olan esnekliği elde edersiniz.

Dokümantasyon Anahtardır

Ne zaman bir kütüphane kullansam, kendim yazmadım, harika dokümantasyona bayılırım. Ancak neye odaklanmalısınız ve nerede belgelemelisiniz?

İlk adım, kolayca bulunabilen en temel kullanım örnekleriyle, anlaşılması kolay bir BENİOKUYUN'u bir araya getirmek olmalıdır. Andrew Healey, iyi bir BENİOKU'nun nasıl yazılacağına dair harika bir eser yazdı, okumanızı şiddetle tavsiye ediyorum.

İnsanları harekete geçirmek için iyi bir README oluşturduğunuzda, bir dokümantasyon web sitesi iyi bir fikir olabilir. Buraya daha ayrıntılı bir API dokümantasyonu, tipik kullanım örnekleri için tarifler ve eski bir SSS koyabilirsiniz.

Dokümantasyon web siteleri oluşturmak için harika araçlar var. Benim favorim Facebook'tan docusaurus (mütevazı övünme: create-react-app web sitesini oluştururken kullandık), ancak orada birkaç iyi alternatif var.

Bu makalede iyi dokümantasyonun nasıl yazılacağını anlatmayacağız. Orada birkaç iyi makale var - hatta "Docs Yaz" adlı bir topluluk bile. Harika belgeler yazmaya nasıl başlayabileceğiniz konusunda harika bir kılavuz yazdılar.

Özet

Bu makale dizisi sayesinde oldukça iyi bir doğrulama kitaplığı oluşturduk. Oldukça basit bir API'ye, ihtiyaç duyduğunuzda kullanabileceğiniz esnekliğe, iyi bir geliştirici deneyimine ve pek çok oldukça nemli özelliğe sahiptir.

Her şeyi adım adım nasıl uyguladığımızı inceledik ve umarım kendi kitaplığınızı nasıl oluşturabileceğinizi ve onu insanların kullanmayı seveceği bir şey haline nasıl getirebileceğinizi daha iyi anlamışsınızdır.

Takıldığınız veya anlamakta zorlandığınız kısımlar varsa lütfen yorumlarda belirtin. Geri bildirim damladıkça makaleyi güncellemek için elimden geleni yapacağım.

Bu makaleyi bitirmek için - işte son versiyon:

• CodeSandbox demosuna bakın

Okuduğunuz için teşekkürler!