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.