Projeler

Cross-Platform Mobil Uygulama

Vite 7 + Capacitor 8 + Firebase ile TypeScript tabanlı cross-platform mobil uygulama. Native özellikler, ESLint+Prettier standartları.

TypeScriptVite 7Capacitor 8FirebaseVitestESLint

Stacko, Vite 7, Capacitor 8 ve Firebase’i bir araya getiren TypeScript tabanlı bir cross-platform mobil uygulama projesidir. Web teknolojileriyle native mobil uygulama üretmenin üretim kalitesinde nasıl çalıştığını araştırmak ve gelecekteki benzer projeler için tekrar kullanılabilir bir başlangıç şablonu oluşturmak amacıyla geliştirildi.

Problem

Web teknolojileriyle cross-platform mobil uygulama geliştirme ekosistemi hızla olgunlaşmakla birlikte, bu araçların birlikte güvenilir biçimde çalıştığını gösteren kapsamlı ve production-ready referans mimarileri kısıtlıydı. Vite’ın modern build araçlığı, Capacitor’ın native köprüsü ve Firebase’in backend hizmetlerini aynı TypeScript kod tabanında bir araya getirirken karşılaşılabilecek yapılandırma ve entegrasyon sorunlarını önceden anlamak hem zaman hem de risk yönetimi açısından kritikti. Ayrıca bu mimaride test edilebilirliği ve kod kalite standartlarını nasıl uygulayacağı net değildi.

Çözüm

Üç ana bileşen tek bir TypeScript kod tabanında birleştirildi. Vite 7 build araçlığının merkezine yerleştirildi: modül sıcak yeniden yükleme ile geliştirme döngüsü hızlandırıldı, üretim build’i tree-shaking ve kod bölümlemeyle optimize edildi. Capacitor 8, web uygulamasını native kapsayıcıya taşıyarak haptics, Share API ve native bildirim gibi platform özelliklerine erişim sağladı. Firebase Authentication, Firestore ve Cloud Functions tek arka uç ekosistemi olarak entegre edildi. Vitest test katmanı, ESLint ve Prettier kod standartlarını otomatize etti; CI/CD pipeline’da lint ve format kontrolleri zorunlu kılındı.

Öne Çıkan Özellikler

  • Vite 7 Build Araçlığı: Anlık HMR, optimize edilmiş üretim bundle’ı ve Capacitor ile uyumlu yapılandırma; geliştirme döngüsü native araç zinciriyle rekabet edebilir hızda
  • Capacitor 8 Native Köprüsü: Haptics (titreşim geri bildirimi), Share API, Splash Screen ve push bildirim desteği; Swift veya Kotlin yazmaya gerek kalmaz
  • Firebase Entegrasyonu: Authentication, Firestore gerçek zamanlı veritabanı ve Cloud Functions; tip güvenli Firestore doküman şemaları
  • TypeScript Genelinde: İstemci, servis katmanı ve Firebase şemaları tip güvenli; istemci-sunucu arası veri tutarsızlığı derleme aşamasında yakalanır
  • Vitest Test Altyapısı: Vite konfigürasyonunu paylaşan hızlı birim ve entegrasyon testleri; Jest’e kıyasla daha hızlı çalışma süresi
  • ESLint + Prettier: Otomatik kod formatlaması ve lint kuralları; CI pipeline’da zorunlu; takım genelinde tutarlı kod stili

Teknik Altyapı

Vite’ın plugin ekosistemi, Capacitor entegrasyonunu ek yapılandırma karmaşıklığı olmadan sağladı; bu iki araç arasındaki sinerji seçimin temel gerekçesiydi. Capacitor’ın yaklaşımı, React Native’in tam native köprüsü ile Flutter’ın kendi render motoru arasında bir orta yol sunar: web kodu çalışır, platform özelliklerine erişim eklenti kataloğu üzerinden sağlanır. Firebase’in TypeScript SDK’sı Firestore şema tanımlarını tip güvenli biçimde yazmayı mümkün kıldı; bu özellik çalışma zamanı hatalarının büyük bölümünü derleme aşamasına taşıdı. Vitest, Vite’ın aynı modül çözümleme mekanizmasını paylaştığı için test ortamı ile üretim ortamı arasındaki yapılandırma farkı minimum düzeyde kaldı.

Sonuçlar

Stacko, web teknolojileriyle production kalitesinde cross-platform mobil uygulama geliştirmenin hem mümkün hem de pratik olduğunu doğruladı. Vite’ın hızlı build döngüsü geliştirme deneyimini native araç zincirleriyle kıyaslanabilir kılarken Capacitor’ın native köprüsü ihtiyaç duyulan platform özelliklerine erişimde beklenen güvenilirliği sağladı. Proje, bu mimaride benzer uygulamalar geliştirmek için hazır bir başlangıç şablonu olarak işlev görüyor; yapılandırma kararları ve entegrasyon detayları belgelenerek tekrar kullanılabilir bir çerçeve oluşturuldu.