React, Angular ve Vue.js gibi framework’ler, kullanıcı arayüzleri oluşturmak için güçlü araçlar sunar.
Framework Nedir?
- Bir framework, belirli bir problemi çözmek için tasarlanmış bir dizi kütüphane, araç ve standarttır. Web geliştirme bağlamında, framework’ler kullanıcı arayüzleri oluşturmayı, veri yönetimi yapmayı ve uygulama mimarisini organize etmeyi kolaylaştırır.
- Framework vs. Kütüphane: Bir kütüphane, belirli görevleri gerçekleştirmek için kullanabileceğiniz bir araç setidir. Framework ise, uygulamanın genel yapısını kontrol eder ve geliştiricinin kodunu framework’ün içinde çalıştırır (“Inversion of Control”).
Popüler JavaScript Framework’lerine Genel Bakış
React:
- Geliştirici: Facebook
- Temel Felsefe: Bileşen tabanlı, sanal DOM kullanarak performansı optimize eden bir kütüphane (teknik olarak framework değil).
- Öğrenme Eğrisi: Orta seviye. Temel JavaScript bilgisi gereklidir.
- Artıları: Büyük topluluk, geniş ekosistem, yüksek performans, esneklik.
- Eksileri: Öğrenme eğrisi diğerlerine göre biraz daha dik olabilir.
Angular:
- Geliştirici: Google
- Temel Felsefe: Tam teşekküllü bir framework. TypeScript ile yazılmıştır ve MVC (Model-View-Controller) mimarisini kullanır.
- Öğrenme Eğrisi: Yüksek seviye. TypeScript bilgisi gereklidir.
- Artıları: Güçlü, ölçeklenebilir, kapsamlı özellik seti, Google tarafından destekleniyor.
- Eksileri: Öğrenme eğrisi diktir ve karmaşık olabilir.
Vue.js:
- Geliştirici: Evan You
- Temel Felsefe: Progresif bir framework. Küçük projelerden büyük uygulamalara kadar her türlü proje için kullanılabilir.
- Öğrenme Eğrisi: Düşük seviye. HTML, CSS ve JavaScript bilgisi yeterlidir.
- Artıları: Kolay öğrenilebilir, esnek, performanslı, küçük boyutlu.
- Eksileri: Diğerlerine göre daha küçük bir topluluğa sahip olabilir.
Temel Kavramlar
- Bileşenler (Components): Kullanıcı arayüzünün tekrar kullanılabilir parçalarıdır. Her bileşen, kendi HTML yapısına, stil tanımlarına ve JavaScript mantığına sahiptir.
- State: Bir bileşenin verilerini temsil eder. State değiştiğinde, kullanıcı arayüzü otomatik olarak güncellenir.
- Props (Properties): Bileşenlere dışarıdan veri göndermek için kullanılır. Ebeveyn bileşenden çocuk bileşene veri aktarır.
- Data Binding: Veri ve kullanıcı arayüzü arasındaki bağlantıyı yönetme işlemidir. Değişiklikler otomatik olarak güncellenir.
- Virtual DOM (React): Gerçek DOM’un sanal bir kopyasıdır. Performansı artırmak için değişiklikler önce Virtual DOM’da yapılır, ardından gerçek DOM’a yansıtılır.
Uygulama Geliştirme Süreci
- Proje Kurulumu: Framework’ün CLI (Command Line Interface) aracını kullanarak yeni bir proje oluşturun.
- Bileşen Oluşturma: Kullanıcı arayüzünü oluşturan bileşenleri tanımlayın.
- State Yönetimi: Bileşenlerin verilerini yönetin ve değişiklikleri takip edin.
- Data Binding: Veri ve kullanıcı arayüzü arasında bağlantı kurun.
- Olay İşleme: Kullanıcı etkileşimlerine yanıt verin.
- Test Etme: Uygulamanın doğru çalıştığından emin olun.
Örnek: Basit Blog Listesi (React ile)
- Proje Kurulumu: npx create-react-app blog-list
- Bileşenler:
- App: Ana bileşen, blog listesini görüntüler.
- BlogItem: Her bir blog yazısını temsil eden bileşen.
- State Yönetimi: Blog yazılarını içeren bir dizi saklanır.
- Data Binding: Blog yazılarını görüntülemek için state kullanılır.
Kaynak: https://developer.mozilla.org/en-US/docs/Web/JavaScript