Şimdi efendim, yıllardır bu kodlama işlerinin içindeyim. Öyle aman aman bir uzmanlık seviyesi demeyeyim ama bayağı bir şeylere tanık oldum, gördüm, yaşadım. C#, PHP, JavaScript derken bir sürü teknolojiyle haşır neşir oldum. Bu yolculukta karşıma çıkanlardan biri de Vue.js oldu. İlk duyduğumda neymiş bu diye bir merak sardı beni. Hani böyle yeni çıkan bir oyun var, herkes oynuyor, sen de ‘Dur bakayım neymiş bu?’ diyorsun ya, işte tam öyle bir şeydi. Neyse efendim, oturdum biraz kurcaladım, baktım, ettim. Ve gerçekten de son zamanlarda bu işlerde gördüğüm en temiz, en kullanışlı şeylerden biri olduğunu fark ettim. Hatta öyle ki, kendi projelerimde bile kullanmaya başladım. O kadar sevdim yani.
Peki, bu Vue.js denen şey tam olarak neymiş? Neden bu kadar popüler oldu? Açıkçası bana göre en büyük olayı, karmaşık işleri olabildiğince basitleştirmesi. Hani böyle bir işi yaparken önünde bir yığın engel olur ya, Vue.js o engelleri teker teker ortadan kaldırıyor gibi düşünebilirsin. Özellikle de kullanıcı arayüzü (UI) geliştirmek istediğinde, yani web sitelerinin o renkli, etkileşimli kısımlarını yaparken sana inanılmaz yardımcı oluyor. Eskiden bu işler biraz daha zahmetliydi, kodlar iç içe girerdi, bir yeri değiştirince öteki yer bozulurdu. Aman Allah’ım, kabus gibiydi! Ama Vue.js ile bu dertler büyük ölçüde bitti.
Vue.js, bir JavaScript framework’ü. Bunu duyunca ‘Aa, JavaScript zaten biliyorum ne gereği var?’ diyebilirsin. Tabi bu düşünce normal ama Vue.js, saf JavaScript’in üzerine inşa edilmiş, sana hazır araçlar sunan bir yapı. Düşün ki, bir ev yapacaksın. Saf tuğla, çimento, demir alıp sıfırdan başlamak yerine, hazır duvar panelleri, modüler mutfak dolapları, prefabe banyo üniteleri kullanmak gibi. Vue.js de tam olarak bunu yapıyor. Sana yeniden kullanılabilir bileşenler (components) sunuyor. Bu bileşenler sayesinde web sitenin her bir parçasını ayrı ayrı tasarlayıp, sonra bunları bir araya getiriyorsun. Ne güzel değil mi?
Bu bileşen mantığı sayesinde kodun daha düzenli oluyor, daha anlaşılır hale geliyor. Bir componenti bir kere yazıp, sitede istediğin yerde kullanabiliyorsun. Mesela bir ürün kartı tasarladın diyelim. Bu kartı ana sayfada, kategori sayfasında, hatta sepette bile aynı şekilde gösterebiliyorsun. Sadece bir kere kodunu yazıyorsun, gerisi Vue.js’in marifeti. Hatta şöyle bir düşün; bir gün o ürün kartının tasarımını değiştirmek istedin. Sadece o component’in kodunu güncelliyorsun, hepsi bu! Tüm sitede o ürün kartı otomatik olarak güncelleniyor. İnanılmaz bir kolaylık.
Bir de şu var; Vue.js’in öğrenme eğrisi gerçekten çok yumuşak. Yani, JavaScript’e az çok hakimsen, Vue.js’i öğrenmek çok da vakit almaz. Hani böyle çok derin denizlere dalıp boğulmak yerine, sığ ve berrak sularda yüzmek gibi. Zaten dokümantasyonu da bir o kadar anlaşılır ve detaylı. Bir de YouTube’da harika kaynaklar var. Mesela Türkçe Vue.js eğitimleri arattığında karşına çıkanları görünce ‘İşte bu!’ diyeceksin.
Peki, Vue.js tam olarak ne işe yarıyor? En başta dinamik web uygulamaları geliştirmek için kullanılıyor. Yani, kullanıcı etkileşimine göre sürekli güncellenen, sayfayı yeniden yüklemeden bilgi gösteren uygulamalar. Hani böyle bir e-ticaret sitesinde ürünleri sepete eklediğinde sayfa pat diye yenilenmez de, ürün sayısı üstte güncellenir ya, işte o tür dinamiklikleri Vue.js ile çok rahat yapabiliyorsun. Single Page Applications (SPA) dediğimiz, yani tek bir HTML sayfası üzerinden tüm içeriği yöneten uygulamalar için biçilmiş kaftan. Angular gibi büyük framework’lere göre daha hafif ve daha esnek olması da cabası. Gerçi Angular’ın da kendine göre avantajları var ama bana göre Vue.js, özellikle orta ölçekli projeler ve hızlı prototipleme için daha ideal.
Bir de şu var tabi, Vue.js’in ekosistemi çok geniş. Yani sadece Vue.js değil, onunla birlikte kullanabileceğin birçok kütüphane ve araç var. Mesela Vue Router ile sayfalar arasında geçiş yapabilirsin, Vuex ile de uygulamanın genel durumunu yönetebilirsin. Bunlar da işini daha da kolaylaştırıyor. Hani böyle bir proje yaparken ihtiyacın olan her şeyi bir yerden bulmak gibi. Bu da geliştirme sürecini hızlandırıyor.
Şimdi gelelim işin kod kısmına. Madem bu kadar bahsettik, gelin basit bir örnekle Vue.js’in mantığını görelim. Diyelim ki bir butona tıklayınca bir sayacı arttırmak istiyoruz. Bunu Vue.js ile nasıl yaparız? Gayet basit:
<div id="app"> <h2>{{ sayac }}</h2> <button @click="sayaciArtir">Arttır</button> </div><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { sayac: 0 }, methods: { sayaciArtir() { this.sayac++; } } }); </script>
Bakın burada ne yaptık? Bir tane `div` oluşturduk, `id`’si `app` olsun dedik. İçine bir `h2` etiketi koyduk ve `{{ sayac }}` yazdık. Bu süslü parantezler, Vue.js’in veri bağlama (data binding) olayıdır. Yani, `sayac` değişkeninin değerini burada gösterecek. Altına da bir tane buton ekledik ve `@click` ile bu butona tıklanınca `sayaciArtir` metodunu çalıştır dedik. Altta da `