Merhaba Vue.js

Bu yazıda reactive web frameworkleri arasında önemli bir yeri olan Vue Framework’le ilgili temel bilgi edinebilirsiniz.


Merhaba Vue.js

2017 yılında React’mi öğrensem Vue’mu sorusu ile her iki framework’üde incelemiş ve sonuç olarak Vue.js’de karar kılmıştım. Bu yazıyı o günden bugüne büyük bir keyifle kullandığım Vue framework’e “Merhaba” demek isteyenlere fikir vermek için yazıyorum.

Vue.Js Nedir?

Vue.js, eski bir Google çalışanı olan Evan You tarafından geliştirilen açık kaynak kodlu bir Javascript frameworküdür. (Framework yerine çatı, iskelet vb. Türkçe kavramlar kullanmaya bir türlü alışamıyorum)

Ağırlıklı olarak tarayıcı tabanlı tek-sayfa uygulamalar için kullanıcı arayüzü geliştirmeye yarayan Vue.js’i mobil veya masaüstü uygulamalar içinde kullanmak mümkün.

Modüler yapısı sayesinde ana Vue bileşenini ihtiyacınız olan modül ve eklentilerle genişleterek çok basit bir tek sayfa uygulamayı da, kompleks çok sayfalı bir uygulamayı da Vue ile kotarabilirsiniz.

Vue.js güçlü yönleri?

Boyut

Gzip’li haliyle oldukça küçük boyutlu (Version 2.6 yalnıca 33kb) Vue, modüler yapısı sayesinde gereksiz bileşenleri projenize dahil etmenizi de önlemiş oluyor.

Öğrenme Kolaylığı

Framework kullanma aşamasına geldiğinize göre javascript’e aşina olduğunuzu düşünüyorum. Template sistemi olarak da sadece HTML kullanıldığı için HTML ve Javascript bilen biri Vue ve bileşenleri çok kısa sürede öğrenebilir.

Güçlü dökümantasyon

Her ne kadar Türkçe olmasa da, gerek ana Vue bileşeni, gerekse destekleyici bileşenlerin doküman kalitesi üst seviyede. Eğer İngilizce biliyorsanız başka hiç bir kaynağa gerek kalmadan dokümantasyonu takip ederek Vue öğrenebilirsiniz.

Tepkisellik (Reaktivite)

Her ne kadar Vue.js’e has bir özellik olmasa da Vue.js’in tepkisellik özellikleri javascript tarafındaki veriler (json objeleri, değişkenler vs.) ile HTML5 şablonunu bağlamayı çok kolay hale getiriyor. Tek sayfa uygulamalar veya veri gösterme ağırlıklı sayfalar için kolaylık, hız ve verimlilik sağlıyor.

Vue bileşenleri

Vue ana iskeletini kullanarak daha sonra tekrar kullanabileceğiniz bileşenler yaratmak oldukça kolay, hatta Vue kullanıyorsanız bolca kullanacağınız bir özellik. Örn. özene bezene özelleştirdiğiniz seçim kutusunu kullanacağınız her sayfada kopyala-yapıştır yapmıyor, bunu bir bileşen haline getirerek istediğiniz sayfada kullanabiliyor ve tüm bileşenlerin birbiri ile etkileşimde olmasını sağlayabiliyorsunuz. Uygulamanız büyüdükçe bunların yönetimi zorlaşmaya başladığı için hazır “durum yöneticisi” bileşeni Vuex, veya adres yönlendirmeleri için hazır router bileşeni vue-router imdadınıza yetişiyor.

Tasarım

React ve Vue.js arasında seçim yaparken bende Vue.js’in ağır basma sebeplerinden birisi de React’deki JSX şeklindeki şablonlar yerine HTML5 şablonlar kullanabilmek oldu. Bu hem öğrenme aşamasını hızlandırıyor, hem de daha hızlı ve kolay geliştirme yapmayı sağlıyor.

Vue 2.x vs Vue 3.x

Yakın zaman önce yayınlanan (18 Eylül 2020) Vue 3.0 güncellemesi, Vue 2.x’ya göre büyük değişiklikler içeriyor. Özellikle Vue’yu yeni öğrenme sürecindeyseniz internette bulduğunuz kaynaklarda genelde 2.x’e göre olacağından, Vue 3.0 projenize doğrudan kullanmak istediğinizde hatalarla karşılaşırsınız. Benzer şekilde, doğrudan Vue.js tarafından yayınlanan temel bileşenler dışında, harici olarak geliştirilmiş bir çok bileşende 3.0 sürümünde sorun yaratabilir. Tecrübeli bir vue kullanıcısı hatalı noktaları yeni sürüme göre düzenleyip kullanabilse de, bu yeni kullanıcılar için ekstra dert demek. Eğer amacınız canlıda kullanılacak bir proje gerçekleştirmek değil, sadece Vue öğrenmekse Vue 2.x ile başlamanızı öneririm. Vue 3.x zamanla yaygınlaşıp, geliştiriciler yayınladıkları hazır bileşenleri 3.x’e hazır hale getirdikten sonra Vue 3’e geçiş yapabilirsiniz. Tabii siz bu yazıyı okuduğunuzda aylar geçmiş ve Vue 2 tarih olmuş olabilir.

Vue 3 hakkınızda bilmeniz gerekenler / yenilikler başlıklı yazımda Vue 3 hakkında daha fazla bilgi edinebilirsiniz.

Gelecekte Vue ile ilgili daha fazla yazı yayınlamak, bileşenleri detaylı açıklamak ve örnek kodlar paylaşmak istiyorum. Sizler de sorularnız veya yorumlarınızla beni yönlendirirseniz memnun olurum.

Bu yazıda yapılan düzenlemeler
  • 11.05.2022: Yazı özeti düzenlendi.

Bir soru, öneri ya da yorumunuz mu var?

  • Yorumlar2
ayca dedi ki

merhaba, vue3 aktif kullanılan sürüm oldu. lütfen son durum itibari ile içeriği günceller misiniz? hem vue hem de react ın son halinin kıyaslamasını görmek daha iiyi olur

Evren Bal dedi ki

Merhaba Ayça, Vue 3 ile ilgili ayrıca bir yazı yazmıştım fakat tabi o da çok güncel bir yazı değil. Uyarın için teşekkür ederim, güncel Vue ve React sürümleri hakkında bir yazıyı yapılacaklar listeme ekliyorum. 🙂

Evren Bal

Ben Evren BAL

1996'dan beri ‘Internet canlısıyım!’

Evren Bal Hakkında daha fazla bilgi.

Tanışmak isterseniz hemen sosyal medyadan iletişime geçebilirsiniz.

Bana Ulaşın

Bana Ulaşın

  • Bir sorunuz mu var?
  • Yazıda bir hata mı farkettiniz?
  • Sayfa ile ilgili bir öneriniz mi var?
  • Yazmamı önereceğiniz bir konu mu var?

Lütfen iletişim formunu kullanarak veya sosyal medya hesaplarımdan bana ulaşın.

Digital Ocean Logo

VPS sunucusu denemek ister misiniz?

Digital Ocean'a referans bağlantımdan kayıt olarak yeni oluşturacağınız hesabınızı 60 gün geçerli 100$ kredi ile açabilirsiniz. Bu miktar yüksek performanslı VPS'leri bile denemeniz için yeterlidir.

Yapacağınız onca kurulumun boşa gitmemesi için benim tavsiyem uzun vadede kullanabileceğiniz özellik ve maliyetlerde bir sunucu oluşturmanızdır.

Ücretsiz 100$ kredi bağlantısı

60 günlük denemeniz sonunda eğer devam etmek istemezseniz hiç bir ücret ödemeyeceksiniz. Hizmeti kullanmaya devam etmek isterseniz harcamanız 25$'a ulaştığında benim hesabıma da 25$ kredi yüklenecektir.

Diğer bir deyişle, siz 100$ ücretsiz krediyi her halükarda kazanırken, daha sonra ücretli devam etmeye karar verirseniz ben de 25$ kredi kazanacağım.

Copyright © 2022 - Evren BAL