Single Page Application Nedir?
Angular, React ve Vue Framework’leri Single Page Application (SPA) Web Framework’leridir yani tek sayfa uygulamalar diye isimlendirebiliriz.
SPA’lar web tarayıcısı üzerinde çalışır. SPA uygulamaları çalışırken normal web sayfalarında olduğu gibi sayfalar arası geçişte yeni bir sayfa yüklenmez, yani sayfalar arası geçiş yaparken uygulama yenilenmez. Bu tür web uygulamaları günümüzde oldukça yaygın olarak kullanılmaktadır. Örnek olarak Gmail, Google Maps, Facebook birer SPA uygulamalarıdır.
SPA’ların asıl amacı son kullanıcının sayfa yenilemeleri, sayfaların yüklenmesi sırasında bekleme zorunda olma gibi durumlarını ortadan kaldırarak kullanıcılarda daha natürel bir web uygulamasında dolaşma hissiyatı oluşturmaktır. SPA uygulamalar bu etkiyi JavaScript teknolojisi sayesinde yapabiliyorlar.
SPA uygulamaları biçimlendirmeyi ve verileri bağımsız olarak sayfa arka planında işler ve sayfaları doğrudan web tarayıcıda gösterir. Bunu Angular, React ve Vue gibi gelişmiş JavaScript Framework’leri sayesinde yapabiliriz.
SPA’lar yani tek sayfalı siteler, kullanıcıyı içeriğin basit, kolay ve uygulanabilir bir şekilde sunulduğu tek ve rahat bir web alanında tutmaya yardımcı olur.
Popüler Single Page Application Web Framework’leri
Dil Yapısı
Angular, TypeScript yazılım dili ile HTML ve TypeScript mantığını bileşenlere ayırır. React ise JavaScript ve JSX teknolojisini kullanır. JSX teknolojisini bir nevi HTML ile JavaScript’in birleşimidir diyebiliriz. Vue ise yalın JavaScript dilini kullanır, React’ın tam tersine Vue, HTML ve JavaScript mantığını birbirinden ayırır.
Oluşum Felseleleri
Angular, kesinlikle bu üçünün arasındaki en kapsamlı Framework’tür. Hatta bazen bir Framework yerine platform olarak da adlandırılmaktadır.
Neden?
Çünkü Angular birçok şey için destek içerir. Kullanıcı arabirimini kontrol etme, kullanıcı girdisine tepki verme, formlarda kullanıcı girişini doğrulama, yönlendirme, Ajax Http istekleri gönderen durum yönetimi, çevrimdışı destek ve PWA yetenekleri sağlama, test etme, uygulamanızı oluşturma, birden çok uygulamayı yönetme ve onları birbirine bağlamak gibi birçok imkanı sağlamaktadır.
Tüm Framework’lerin amacı, bir geliştirici olarak sizin için reaktif, karmaşık kullanıcı arayüzleri oluşturmanızı kolaylaştırmaktır. Angular bunun için size tüm araçları sağlamaktadır. Üzerinde çalıştığınız uygulamalarda ihtiyaç duyabileceğiniz herhangi bir açıdan size yardımcı olabilmek için Angular birçok özelliği bünyesinde barındırır.
Ek olarak, Angular’ın projeleri oluşturmanıza ve yönetmenize, bunları güncel tutmanıza, yardımcı olan resmi bir CLI’ı vardır.
Angular’ın temelinde tamamen yeniden kullanılabilir kullanıcı arabirimi bileşenleri oluşturmak vardır. Daha sonra Angular ile bu bileşenleri kontrol edersiniz ve bu bileşenleri diğer bileşenlerle birleştirerek bu Angular kontrollü bileşenlerden tam bir kullanıcı arabirimi oluşturabilirsiniz
Angular, UI yetenekleri, durum yönetimi, yönlendirme, form işleme, bir HTTP rotalama gibi birçok faydalı araçları bünyesinde barındırır.
React, Angular’dan tamamen farklıdır.
Angular’ın size her şeyi verdiği yerde, React, size yalnızca içeriği DOM’a işlemek ve daha sonra içeriğinizi verimli bir şekilde kontrol etmek için bir kütüphane sunmaktadır. React aynı zamanda tamamen bileşenlerle ve bileşenlerden kullanıcı arayüzleri oluşturmakla ilgilidir. Ayrıca, neyin hangi koşullarda hangi şekilde ekranda gösterilmesi gerektiğini tanımlamanız için ihtiyacınız olan tüm araçları da barındırmaktadır.
Ancak React, yerleşik form doğrulama desteği içermez, rotalama mekanizması barındırmaz ve kendi Http istemcisini sunucuya göndermez. React, olası tüm durumlar için olmasa da yerleşik bazı durum yönetimi desteğine sahiptir. Ayrıca başka herhangi ekstra bir özellikle birlikte gelmez ve bu bakımdan Angular’ın karşısında kesinlikle daha zayıf kalmaktadır.
Vue, React ve Angular arasında yer alan bir kütüphanedir. Çünkü Vue, Angular kadar büyük bir kütüphane değildir ama kesinlikle React’e göre Vue daha fazla özellik barındırmakta. Vue size yerleşik durum yönetimi de sağlar ve ayrıca yerleşik bir yönlendiriciyle birlikte çalışır. Bununla birlikte Vue, form doğrulamasını veya Http istemci işlevlerini içermez.
Tıpkı Angular ve React gibi, Vue’nun temelinde de yeniden kullanılabilir bileşenleri birleştirerek kullanıcı arayüzleri oluşturma fikri vardır.
Angular, React ve Vue Framework’lerin Evriminin Karşılaştırılması
Her üç Framework de aktif geliştirme aşamasındadır. Bu aynı zamanda zamanla değiştikleri anlamına gelir yani bu Framework’lere yeni özellikler eklenir, bazı özellikler kullanımdan kaldırılır ve sonunda kaldırılır ve Framework’lerin yeni modelleri ortaya çıkar.
Angular için her altı ayda bir yeni bir ana sürüm yayınlanır. Bu, Angular’ın her altı ayda bir değiştiği anlamına gelmemektedir. Bu sadece altı ayda bir yeni özellikler ve kullanımdan kaldırılmış bazı özellikler olabileceği anlamına gelir. Örneğin Angular 9’da Angular’ın dahili çalışma zamanını tamamen değiştirilmiştir ama yine de önceki sürümlerde yazılmış kod üzerinde hiçbir etkisi yoktu. Bu tip güncellemelerle Angular çok daha küçük ve daha hızlı paketlere sahiplik kazanmıştır.
React.js katı bir geliştirme programı izlemiyor ancak yeni sürümlerin de yayınlandığını görülebilmektedir. React 16 uzun zamandır son sürüm olarak yayında ama yayınlanan ara sürümlerle de yani 16.1, 16.2 gibi sürümler ile birlikte React, bazı ciddi yeni özellikler kazanmıştır. Örneğin, React 16.8 ile birlikte durum bilgisi olan React bileşenlerini yazma şeklinizi değiştirmenize olanak tanıyan “React Hooks” bileşeni eklenmiştir.
Vue da aktif geliştirme aşamasındadır. Vue 2’nin ilk sürümünden bu yana tanıtılan bazı yeni özellikler oldu ve hatta şu anda Vue 3 yayınlanmıştır. Vue 3 kısmen geriye dönük uyum sağlayabilecek ve genellikle Vue 2 ile aynı felsefeyi benimsemiş halde çalışmaktadır. Aynı zamanda Vue 3 ile Vue’ya bazı yeni özellikler de eklenmiştir.
Öğrenme Kolaylığı
Performans
Performans son derece önemli bir kavramdır. Ancak performans kavramına çok fazla vurgu yapmak ya da yanlış ölçütleri çalıştırmak ve dolayısıyla yanlış sonuçlar çıkarmak da olasıdır. Yani A Framework’ü 10.000 satırlık <div> satırını B Framework’ünden daha hızlı işlediği için, A Framework’ünün her zaman B’den daha iyi olduğu anlamına gelmemektedir.
Ayrıca kıyaslamalar için kullanılabilecek farklı performans türleri de vardır:
Başlangıç Performansı
Genel paket boyutu, yani oluşturulan ve dağıtım sunucunuza yüklenen kod, bu noktada en önemli olan şeydir.
Genellikle üç ana Framework’ün paket boyutlarını karşılaştırmak için temel bir “Merhaba Dünya” uygulaması ele alınır.
Ama gerçek kullanımda sadece “Merhaba Dünya” uygulaması oluşturulmadığı için bu yaklaşım aslında gerçeğe yakın değildir. “Merhaba Dünya” kıyaslaması, Framework’ün boyutu hakkında temel bir fikir verirken, uygulamaların ne kadar büyüklükte olacağını belirtemez.
“Merhaba Dünya” karşılaştırmalarında Angular, Vue ve React uygulamalarından biraz daha büyük olma eğilimindedir. Vue ise React’ten biraz daha küçüktür. Yalnız Angular’ın burada çok ilerleme kaydettiğini ve Angular ekibinin kod paketlerinin boyutunu büyük ölçüde küçültme üzerine oldukça yoğun çalışmalar yapmaktalar.
Daha büyük uygulamalar için üç Framework de kabaca eşit büyüklükte kod paketleri üretmelidir, üç Framework’ün de desteklediği “Geç Yükleme” gibi optimizasyon tekniklerini kullandığınızı varsayarsak.
Çalışma Zamanı Performansı
Aslında burada önemli olan kullanıcı deneyimidir. Bir sayfa son kullanıcıya hızlı çalışıyor hissi veriyorsa teknik olarak bir Framework’ün daha yavaş olması bu konuda pek de önemli değildir.
Benimsenme ve Popülerlik Karşılaştırması
Bir Framework’ ün popülaritesi genelde önemlidir diyebiliriz. Yaşantımızda da sıklıkla diğer insanların sevdiği şeyleri seçme eğilimindeyiz.
Programlama Framework’leri ve kütüphaneler söz konusu olduğunda yazılım geliştiricileri arasında popüler olan teknolojiyi tercih etmek için iyi nedenler vardır. Bunu açıklamak gerekirse:
Bu durum geriye sadece bir soru bırakıyor: Bir Framework’ün popülerliğini nasıl ölçülebilir?
Bu sorunun cevabı için şu iki ana kriteri inceleyebiliriz:
Google trendleri bize React, Angular ve Vue Framework’lerinin popülerlik durumu hakkında net bir resim ortaya çıkartmakta.
Vue ve React neredeyse eşit derecede popülerdir diyebiliriz, ayrıca ikisi de Angular’a kıyasla biraz daha popülerdir.
Alttaki grafik incelendiğinde Vue’nin özellikle Çin’de popüler olduğu görülebilmektedir.
Arama ABD ile sınırlandığında ise şu şekilde bir grafik görülmektedir:
Görüldüğü gibi önceki görsele kıyasla oldukça farklı bir sonuç görülmekte. Bu grafikte Vue ve Angular’ın birbirlerine eşit derecede popüler olması ve React bunların hemen üstünde olması sebebiyle React’ın ABD’de daha popüler olduğu söylenebilir.
Ancak buradaki olay şudur. Bu grafikler, Framework’lerin yalnızca Google arama motoru üzerinden aratılma sıklığını göstermektedir. Gerçek kullanım hakkında bu grafikleri inceleyerek çok fazla şey söylenemez, özellikle de büyük, kurumsal boyuttaki uygulamaları düşündüğümüzde.
Yine de her üç Framework’e de oldukça yoğun ilgi olduğunu söyleyebiliriz. Her üç Framework de oldukça güçlüdür ve ayrıca bu Framework’lere destek sunan büyük topluluklar bulunmaktadır.
Üstte görülen grafik, Google Trends grafiğini, en azından ABD’deki grafiği doğrular gibi bir sonuç vermektedir. React’ın npm indirme grafiğine baktığımızda birbirleriyle aynı seviyede bulunan Angular ve Vue’dan kesinlikle biraz daha ileride olduğu görülmektedir.
Bunun için bir şeyi bilmeniz gerekir: Angular ayrıca önbelleğe alınmış paketleri kurumsal müşterilere dağıtmaktadır, yani Angular’ın kurumsal müşteriler npm indirmelerine dahil edilmemektedir. Ve Angular’ın halihazırda birçok sayıda kurumsal müşterisi var. Bu nedenle Angular’ın asıl indirilme sayısı muhtemelen bu grafikte görüldüğünden biraz daha yüksektir. Yine de React’in diğer iki Framework’ten daha fazla indirildiğini söylemek de doğrudur. Aslında, öyle görünüyor ki sadece küçük bir farkla da olsa, React şu anda en popüler Framework gibi görünmektedir.
PWA Nedir?
Progressive Web Application (PWA) yani dilimize çevirirsek İlerici Web Uygulamaları ürünleri, kullanım sırasında kullanıcıya yazılımın sanki native dille yazılmış gibi sorunsuz ve akıcı çalışan uygulama hissiyatı vermeyi amaçlamış ve bu yönde bazı gelişmiş özelliklere sahip olan web uygulamaları PWA olarak tanımlanmaktadır.
PWA’lar web sitelerini, tıpkı uygulama marketlerden indirilebilen uygulamalar gibi mobil cihazlara yüklenebilmesine olanak sağlamaktadır. PWA ayrıca uygulama çalıştırıldığında hızlıca yüklenebilmesine; çevrimdışı çalışabilmesine, mobil cihaza push bildirimler gönderilebilmesine, arkaplanda uygulamanın güncellenebilmesine, kamera, mikrofon, cihaz dosyaları cihaz donanımına ve özelliklerine erişim sağlayabilme imkanı sunmaktadır.
PWA’lar ağ bağlantısı yavaş olduğunda ve hatta cihaz çevrimdışı iken çalışabilecek halde tasarlanmış web uygulamalarıdır. Böylece PWA’lar, kullanıcının internete bağlı olmasını gerektirmeden uygulamanın çevrimdışı halde de çalışabilmesine olanak sağlar. PWA, uygulamaların görsel içerikleri için verileri önbelleğe alır, bu şekilde PWA olarak geliştirilmiş bir uygulama, bir sunucu ile bağlantı olmadan, yani cihaz çevrimdışı iken de çalışabilmesi fikrinin ürünüdür.
Angular, React ve Vue’da PWA Uygulamaları
İlk başlarda Angular, karmaşık yapılı dinamik uygulamalara devamlılığı sağlayamamaktaydı, ancak bu hata son sürümlerde düzeltilmiştir. Bugün itibariyle, Angular ile oluşturulan uygulamalar, diğer önde gelen Framework’ler ile oluşturulan uygulamalardan performans açısından daha düşük değildir.
React’in mükemmel bir desteği, dokümantasyonu, geniş bir çevrimiçi topluluğu ve ayrıca Facebook, Instagram, WhatsApp ve Twitter Light dahil birçok önemli projesi vardır. React Native ile de yakından ilişkili olan React; web, PWA veya native hissiyatı veren uygulamalar oluşturmak, çoklu cihaz ve platformlar arası kullanıcı deneyimi sağlamak için kullanılan Framework’lerden biridir.
Yazının orijinaline aşağıdaki linkten ulaşabilirsiniz.
Yazar : BilgiYazan Eğitim Kurumları