Vue JS Nedir? Progressive Web PWA Nedir?

Vue JS açık kaynak ve progressive olan kullanıcı ara yüzleri geliştirmeye ve tek sayfa uygulaması yaratmaya yarayan bir Javascript framework’üdür. 2014 yılında ismini duyduğumuz ve de öncesinde Google’da Angular geliştiren Evan You tarafından yaratılmıştır. Evan You’nun yaklaşımı; “Angular’dan (bir başka framework) sevdiğim parçaları alsam ve daha hafif bir hale getirsem, nasıl olurdu ki?” sorusuyla başlamış ve ardından Vue JS ortaya çıkmıştır.

Framework Nedir?

Framework ya da çatılar geliştiricilere destek amaçlı olan yapılardır. Bahsettiğimiz framework web tabanlı olduğundan, web geliştirmek üzerine alt yapı sunmaktadır. Bunun ne tür bir faydası vardır? Kısaca; tekerleği yeniden icat etmeye gerek yok. Bununla birlikte sistematik bir yapı, güvenlik gibi konularla da sizin yerinize ilgilenir. Böylece geliştirici sadece tek bir odak noktasına odaklanabilir; daha hızlı bir şekilde geliştirilebilir.

Progressive Web Nedir?

Web sitelerinin bir mobil uygulama gibi çalıştığını düşünün, işte progressive web mantığı bunu temel alır. Tüm platformlarda çalıştırılabilir (mobil, web, tablet vb). Bir başka deyişle, bir web sitesini mobil üzerinden ziyaret ettiğinizde bir mobil uygulama izlenimi verir. Başlıca özelliklerini ele alacak olursak; çevrimdışı olduğu zamanlar da çalışabilir. Bu da önceki bilgilerin o platformda kaydedildiğini göstermektedir (kısaca cache). Bunu yarıda bıraktığınız ve çevrimdışı oynadığınız bir mobil oyuna devam ediyormuş gibi düşünebilirsiniz .

Ara yüz tasarımı bildiğimiz web sayfalarına göre daha göz doldurucu ve akıllı bir şekilde kullanılır.

Sadece HTML, CSS ve Javascript kullanarak mobil görünümlü bir web uygulaması yapabilirsiniz.

Daha hızlı bir kullanım sunmaktadır.

Bazı örnekleri:

• Instagram
• Evernote
• UBER
• Gmail
• Twitter

Tek Sayfa Uygulaması (Single Page Application) Nedir?

Tek sayfa uygulamalarından önce geleneksel çoklu sayfa uygulamalarından söz etmemiz konuyu daha anlaşılır kılacaktır.

Çoklu sayfa uygulamaları tamamıyla bir sayfayı yükler ve de kullanıcı sayfa ile etkileşime geçtiğinde yeni bir sayfa getirir. Ne zaman veri üzerinde bir değişiklik olsa, sunucuya yeni bir sayfa isteği gider. Sunucuya giden istek doğrultusunda yeni bir sayfa oluşturur ve bu da zaman alır. Bunu veri üzerinde yaşanan her değişiklikte tekrarlandığını düşünün.

AJAX teknolojisiyle sadece sayfanın belli bir kısmında olan değişikliği işleyen uygulamalar geliştirilmeye başlandı. Fakat bu teknoloji karmaşık ve zor işlemleri de beraberinde getirdi. Her ne kadar karmaşık olsa da karşılaştırıldığında hız farkı gözle görülür bir şekilde iyi bir performansı doğuruyor.

İşte, tek sayfa uygulamaları AJAX teknolojisi ile teknoloji dünyasına girmiş oldu. AJAX ile birlikte Javascript dili de kullanılmaktadır. Sunucuya giden istek işlemlerini, işlemci taraflı yaparak daha iyi bir hız ve performans sunmaktadır. Görünürde tek sayfa olsa da, bazı parçaların değişimi ile yeni bir sayfaya geçmiş etkisi yaratılıyor.

Bu yapıya sahip Javascript framework’leri: Vue, Angular ve React.

Bazı örnekleri:

• Facebook
• Google Maps
• Gmail
• Twitter
• Google Drive
• GitHub

Vue JS Kullanan Büyük Şirketler:

Vue JS Hakkında

Reactive yapısı:

Bir web sayfasını ele alalım. Gördüğümüz kısım view (görüntü) tabakasıdır. Bu görüntü tabakasında birçok içerik görmekteyiz. Bu içeriklerin tutulduğu yer ise veri adlı tabakadır. Bir alışveriş sitesinde ürün fiyatını ya da içeriğini birçok sayfada görmekteyiz. Kategori, ana sayfa gibi benzer sayfalarda aynı içerikler yer almakta. Bu içeriklerden birinde olan değişikliğin tüm sayfalara yansımasını isteriz, değil mi? Tek bir parçayı birçok sayfada kullanırsak, o parça üzerindeki değişiklik anlık olarak tüm sayfalara yansımış olur.

Virtual Dom:

HTML/CSS üzerinde veri ile ilgili bir değişiklik olduğunda direkt olarak veri tabanına yansımaz. Arada hayali bir tutucu yaratır ve de değişiklikler ilk başta buradan geçer. Tüm sayfada mı yoksa belli bir yerde mi değişiklik içermekte anlık tespit edilir. Bu da değişikliklerin daha hızlı olmasını sağlar.

Öğrenmesi Kolay ve Hızlı

Diğer framework’lere göre en çok öne çıkan yapısı hızlı olması.

Bununla birlikte öğrenmeyi kolaylaştıran bir yapıya sahip olması.

Bir kod örneği:

<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<body>

<div id="app">
  <h1>{{ message }}</h1>
</div>

<script>
var myObject = new Vue({
  el: '#app',
  data: {message: 'Merhaba Vue!'}
})
</script>

</body>
</html>

Sonuç: Merhaba Vue!

Kodu incelersek,

Vue’yu uygulamaya dahil etmek için

<script> </script> tagları arasında “https://cdn.jsdelivr.net/npm/vue” kütüphanesini dahil etmek yeterlidir. HTML içinde direkt olarak uyarlanabilir.

Örneğimizde bir div tagi oluşturduk ve de id olarak “app” verdik.

Bu div’in içinde h1 tagleri arasında {{ message }} görmekteyiz. Burası veriyi yansıtacağımız yer. Veriyi çektiğimiz yer ise script tagleri arasında yazılı. Bu sayede veriyi yansıtabilmekteyiz.

Vue JS öğrenebileceğiniz Türkçe Kaynak Tavsiyesi:

Gökhan Kandemir – 1 Videoda VUE – Yazılım Bilimi