Single Page Application (Tek Sayfa Uygulamaları) Nedir?

Son yıllarda web dünyasında hızla önem kazanmaya ve popülaritesini arttırmaya devam eden Single Page Application (Tek sayfa Uygulamaları) nedir ? bu konuyu sizlere açıklamaya çalışacağız.

Single Page Application (SPA), routing (yönlendirme) işleminin backend tarafından değil de Java script tarafından client-side (istemci) yapıldığı bir web uygulamasıdır. İşin özeti web sayfasında bir tene index sayfası bulunuyor ve istemci tarafından sayfaların router ile değiştirilip kullanıcılara gösterilmesi şeklinde çalışıyor. Router , sizin seçtiğiniz componentleri ilgili path için kullanıcılara gösteriyor. Yani tüm componentlerin değişimini tarayıcınıza yansıyor. Bu tür web uygulamaları günümüzde sık olarak kaşımıza çıkmaktadır. Örnek olarak, Gmail, Google Maps, Facebook gibi uygulamalar birer SPA tabanlı uygulamalardır. Peki SPA’dan önce bu işler nasıl yürütülüyordu.

SPA öncesinde web uygulamaları kullanıcı sunucudan bir statik sayfa istiyor sonrasında kullanıcı tarafından istenen istemci tarafına döndürülüyordu. İstemciyi sizin internet sayfanız olarak ele alabilirsiniz. Zamanla gelişerek sunucular sizin gönderdiğiniz isteğe göre sayfalar üretmeye başladılar. Fakat en önemli kısmı, halen sunucudan tüm sayfanın tamamı geliyordu. Yani sitede olan kullanıcı sayfanın sürekli yeniden yüklenmesinden dolayı yavaşlık yaşıyordu. Ancak AJAX teknolojisinin çıkmasından sonra bu durum değişti ve sayfanın yalnızca belli kısımları değişip  sunucuya gönderilmeye başlandı.

 

SPA ile Hayatımızda Ne gibi Yenilik oldu?

Tek sayfalık bir uygulama ile sunucu yükü daha da azaltılmış ve istemci tarafına daha fazla yük binmiştir. Sunucu tarafında karar verilen yönlendirme, JavaScript kullanılarak istemci tarafında yapılmaya başlandı. Ancak önemli olan, bilgisayarlarınızın geliştikçe, İnternet deneyimini büyük ölçüde değiştiren tek bir sunucuda yapmak yerine, her sunucunun kendi tarayıcısı ile yapıyordu.. Başka bir deyişle, kullanıcılar sitede daha hızlı gezinebiliyor.. Her gün yeni bir framework doğmasının sebeplerinden biri de budur. Hepsi daha hızlı gezinme sözü veriyor. Tabii ki, bunun hem avantajları hem de dezavantajları var. SPA uygulamaları verileri ve biçimlendirmeyi bağımsız olarak arka planda işler ve doğrudan web tarayıcısın da gösterir. Bunu Angular, React ve Vue.js gibi gelişmiş Framework’ler sayesinde yapabiliriz. Sizle bu üç önemli Frameworkleri birlikte inceleyelim. Öncesinde SPA’ların avantaj ve dezavantajlarına kısaca bir göz atalım.

 

Single Page Application Avantajları Nelerdir?

• Hız
• Kullanıcı Deneyimi
• Caching (Ön bellek)
• Debugging

 

Single Page Application Dezvantajları Nelerdir?

• Seo
• Tarayıcı Geçmişi
• Güvenlik
• Memory leaks (bellek sızıntısı)

 

 

Angular Nedir?

Angular, Google ve dünyadaki geliştiriciler tarafından sağlanan açık kaynaklı Javascript tabanlı bir MVC kitaplığıdır. Özetle; Dinamik web uygulamaları için mimari bir çerçevedir. HTML’yi bir şablonlama dili olarak kullanmanıza ve uygulamanızın bileşenlerini net bir şekilde görüntülemek için HTML etiketlerini genişletmenize olanak tanır. Temel amacı, tek bir sitede dinamik olarak gelişme fırsatı sağlamaktır. Benzer kütüphanelere kıyasla temel fark, çift yönlü olmalarıdır. Başka bir deyişle, verileri değiştirmek görünümü değiştirir ve görünümü değiştirmek verileri değiştirir.

 

Anguları Neden Tercih Etmeliyiz?

Angular, kullanıcı arabirimlerini kontrol etme, formlarda kullanıcı girişlerini doğrulama, tepki verme, yönlendirme çevrimdışı destek, Ajac http istekleri gönderme yönetimi ve PWA yetenekleri sağlama, test etme , uygulama oluşturma ve birden çok uygulamayı yönetme ve onları birbiri ile ilişkşlendirme gibi bir çok özellikli imkanını kullanıcılarına sağlayarak destek vermektedir. Bu saydığımız aşamaların tamamını eksiklik olarak kullanıcıya sunan bir frameworkdür.

Bilinen tüm framework’lerin temel amacı geliştirici için reaktif ve karmaşık kullanıcı ara yüzlerini kullanıcılar için kolaylaştırmaktır. Agular bunun için kullanıcılarına tüm araçları sağlıyor .Bünyesinde barındırdığı bir çok özelliği ile çalıştığınız uygulamada ihtiyaç duyabileceğiniz herhangi bir şey için size yardımcı oluyor. Ek olarak projelerinizi oluşturup yönetmenizi ve güncel tutmanızda yardımcı olacak CLI da bünyesinde barındırıyor.

 

Angular Framework Avantajları ve Dezavantajları Nelerdir?

Angular js tercih edecek kullanıcılarımız için avantajları ve dezavantajları nelerdir? Sizler için bunları arajtırdık ve anlaşılır bir şekilde özetlemeye çalıştık.

Avantajlar  ;

• Açık kaynaklı bir Javascript framework olması
• MCV tasarım modelini temel aldığı için anlaşılması kolaydır.
• Verileri HTML’ye bağlama yeteneği sağlayarak duyarlı bir kullanıcı deneyimi sağlar.
• Güncellenen Angular JS sayfası, DOM öğelerini HTML’ye eklemek yerine doğrudan eriştiği için çok daha hızlıdır.
• Özelliklerini (yönergeleri) kullanarak dinamik içerik oluşturur. Geliştiricinin daha az kod yazarak daha fazla özellik elde etmesini sağlar

 

Dezavantajları;

• Dik öğrenme eğrisi
• Sınırlı SEO seçenekleri
• Migrasyon-Taşıma
• Ayrıntılı ve kamaşık

 

 

Vue.js Nedir?

Vue.js kullanıcı arayüzleri ve tek sayfa uygulamalı SPA oluşturmak için geliştiilmiştir.Diğer rakiplerime göre açık kaynaklıdır. Evren yolu tarafından 2014 yılında yayınlanan Vue.js Angular!ın avantaj ve dezantajlarını eleyerek yeni ve hafif bir framework olarak geliştirilmiştir. Vue.s görünüm katmanına odaklanmış bir çekirdek kütüphanesine sahiptir.

Tüm ek işlevler, Vue.js destek kitaplıkları aracılığıyla sağlanmalıdır. Ancak bu kütüphaneler yerleşik değildir. Ancak Vue.js’nin en dikkat çekici özelliği direktifleridir. Yönergeler, geliştiricilerin bir web sayfasının içeriğinin yapısını tanımlayan web tabanlı bir web teknolojisi olan HTML’yi genişletmesine izin veren HTML nitelikleridir.

 

Vue.JS Neden Tercih Etmeliyiz?

Akla gelen ilk şey, Vue.js’lerin geliştiricinin ihtiyaçlarına uyum sağlayabilmesidir. Diğer çerçevelerin tüm işlevleriyle indirilmesi ve kullanılması gerekirken, VUE basit bir komut dosyası etiketi ile başlar. Ve ihtiyaçlarınıza göre genişler. VUE’yi mevcut bir projeye kolayca entegre edebilir veya onu eksiksiz bir ön uç projesi olarak kullanabilirsiniz. Çekirdek VUE kitaplığı çok kompakttır. Bu kütüphane sadece görünüm kısmına odaklanır.

 

Vue.js Framework Avantajları ve Dezavantajları Nelerdir?

 

Avantajları ;

• Öğrenmesi kolay ve hızlıdır
• Çok yönlü ve sağlam
• Mevcut kütüphane ile entegre olabilme özelliğine sahiptir
•  Açık kaynak ve ücretsizdir
•  Reaktif yapıya sahiptir
• Eklentilerle gerekli fonksiyonları ekleyebilirsiniz
• Sanal DOM sayesinde verimli performans alısınız
• Kendi bileşenlerinizi oluşturabilirsiniz
•  Chrome’u Test Etme imkanına ulaşırsınız

 

Dezavantajları;

• En yaygın dezavantajı esnek olması
• Çok sınırlı olması
• Çok yeni olması ve gelişmeye devam etmesi

 

 

React Nedir?

2011’de XHP’den ilham alan bir fikir, 6 ay sonra React aracını ortaya çıkardı. Gün geçtikçe popülaritesi artırdır ve günümüzde en popüler kütüphanelerden biri haline gelmiştir. SPA’lar oluşturmak için de kullanılan kütüphane, Angular ve Vue JS gibi rakiplerini geride bıraktı. Onlardan farklı olarak, veritabanı ve form doğrulaması sağlayarak web sitelerinin görünmeyen kısımlarıyla da ilgilenir. React uygulamaları JavaScript veya JSX ile yazılabilir, ancak genellikle JSX tercih edilir. Bunun nedeni, JavaScript’te kullanıcı arayüzleri yazmanın daha zor olmasıdır. Bileşen tabanlı bir kullanıcı arabirimi kitaplığı olan ve bir uygulamanın görünüm katmanından sorumlu olan React, geliştiricilere birçok kolaylık sunuyor.

 

React Neden Tercih Etmeliyiz?

Öncelikle React öğrenmesi kolaydır ve öğrencilerin yurtdışındaki iş fırsatlarını arttırır. Yeniden kullanılabilir yapısı sayesinde uygulama içinde oluşturulan diğer uygulamalarla birlikte kullanılabilir. Performans açısından sanal DOM ile hızlıdır ve destekleyici bir topluluğa sahiptir. özelliklerine bakıldığında React, test edilebilirlik, sunucu tarafı oluşturma, tek yönlü veri bağlama, basitlik ve düşük öğrenme eğrisi gibi özelliklere sahiptir. Duyarlılık özelliği olan test edilebilirlik, bir bileşenin nasıl oluşturulacağını ve davranacağını tanımlar. Bu özellik, uygulamaları test etmeyi ve hata ayıklamayı oldukça kolaylaştırır.

 

React Framework Avantajları ve Dezavantajları Nelerdir?

Avantajları ;

• Basit arayüz tasarımı
• Diğer JS frameworkleri Önemli performans kazancı
• Daha hızlı güncellemeler
• JS hataları için mükemmel
• Tamamen bileşen tabanlı bir mimaridir
•  Kod yeniden kullanımı
• Gerçek DOM değişikliklerini tam olarak senkronize etmek yerine minimum güncelleme parçaları listesi oluşturur

 

Dezavantajları;

• Framework değil kütüphanedir
• Steep öğrenme eğrisi
• MVC Frameworküne entegre etmek için bazı konfigürasyonlara ihtiyaç vardır
• Sofitike görünüm katmanı
• Geliştiricilerin alıştıklarından farklı bir paradigmadır

 

Son olarak şunu belirtmek isterim ki her üç Framework de aktif geliştirme aşamasındadır. Buda demek oluyor ki yeni özellikler eklenebilir ya da bazı özellikleri değişebilir.