Ana içeriğe atla

Açık kaynak

Rott-UI

npm'de yayınlanan bir React Native tasarım sistemi — kendi ürünlerimizin arayüz temeli, herkesin kurabileceği şekilde açık.

Rol
Tasarım sistemi mimarisi, API tasarımı, sürüm yönetimi
Ekip
2 kişi
Tüm vaka çalışmaları

Zorluk

İki mobil ürün geliştirmek, aynı otuz bileşeni iki kez yazmak ve her ikisinde de birbirinden ince farklarla elde etmek demek. Alışılmış çözüm bir components klasörü açmaktır; işe yarar, ta ki yaramayana kadar: dokümantasyonsuz, testsiz, sürümlenemez ve sessizce çürüyen bir yığın.

Diğer seçenek olan hazır bir kütüphaneyi benimsemek ise genellikle başkasının tasarım dilini devralmak ve marka özel bir şey istediğinde onun stil modeliyle boğuşmak anlamına geliyor.

Yaklaşım

Serbest stil değil, property tabanlı bir API

Bileşenler gelişigüzel stil geçersiz kılmalarıyla değil, açık prop'larla yapılandırılıyor. Tutarlılık varsayılan hâline geliyor, sapma ise görünür oluyor — ki bir tasarım sisteminin bütün amacı bu.

Fork'lamadan yapılandırılabilir

Bir yapılandırma giriş noktası, kütüphaneyi kullanan uygulamanın kendi ikon setini, temasını ve yol takma adlarını tanımlamasına izin veriyor. Ürün sisteme uymak zorunda kalmıyor; sistem ürünün markasına uyum sağlıyor.

Yan proje gibi değil, ürün gibi test edilmiş

Yaklaşık 97 test dosyası. Kendisini kullananları sessizce bozan bir tasarım sistemi, hiç tasarım sistemi olmamasından kötüdür.

Production'da kendi ürünümüzde kullanılıyor

VetAsist'in mobil uygulaması bu sistem üzerinde çalışıyor. Her pürüz, başkasına ulaşmadan önce kendi ürünümüzde ortaya çıkıyor.

Kütüphane ile onu kullanan ürün arasında resmî bir geri bildirim döngüsü

VetAsist entegrasyonu sırasında çıkan runtime hataları ve DX eksikleri gelişigüzel yamanmadı; her biri etkilenen dosya, yeniden üretim adımları ve önerilen çözümle birlikte P1–P3 önceliklendirilmiş bir handoff dokümanına yazıldı. Bu disiplin hızlı bir sürüm temposu getirdi: birkaç hafta içinde 0.2.0'dan 0.6.0'a.

Güncel React Native yığını üzerine kurulu

Reanimated 4, FlashList, keyboard-controller, edge-to-edge, SVG transformer — eski bir sürümde donup kalmak yerine ekosistemi takip ediyor.

Sonuçlar

  • npm'de @tansuk/rott-ui adıyla MIT lisansıyla yayında — 15 sürüm, güncel sürüm v0.8.0.
  • 29 bileşen ailesi; ayrıca tema, hook'lar, provider'lar ve bir yapılandırma API'si.
  • Yaklaşık 97 test dosyası.
  • Temmuz 2025'ten bu yana 164 commit, aktif olarak geliştiriliyor.
  • VetAsist'in mobil uygulamasını production'da besliyor.

Kullanılan Teknolojiler

React NativeTypeScriptReanimated 4FlashListreact-native-svgJest

Kendiniz doğrulayın

Sözümüze güvenmeniz yerine kontrol etmenizi tercih ederiz. Aşağıdakilerin tamamı herkese açık ve canlı.

Benzer bir projeniz mi var?

Ne inşa ettiğinizi anlatın. 24 saat içinde bizzat yanıt veriyoruz.

Görüşmeye başlayın