☕ Vue.js ile Gelişiminizi Hızlandırın: Neden Ben Vue'yu Y?

Selamlar sevgili arkadaşlar! Umarım kahveleriniz (ya da çaylarınız!) hazır, çünkü bugün sizi benim Vue.js ile tanışma hikayeme götüreceğim. Bu bir framework fanatikliği değil, tamamen bir geliştiricinin acı tatlı deneyimlerinin ve doğru aracı bulmanın hikayesi.

💡 Not: Bu yazının devamı niteliğinde, özellikle SEO ve büyük projeler için neden Nuxt.js'e yöneldiğimi anlatan bir blog yazısı da yolda. Onu da mutlaka okumanızı tavsiye ederim!

🚀 Başlangıç: Vanilla JavaScript ve Yaşanan Hayal Kırıklığı

Üniversite stajımda, mezun öğrenciler için basit bir sosyal medya platformu geliştirmem istendi. Projeyi bir Backend Framework'ü olan Django ile kurdum. Django'nun template rendering özelliği sayesinde, HTML/CSS ile güzel bir arayüz tasarlayabiliyor ve backend sunucusunu kolayca Python ile yazabiliyordum. Harika bir başlangıçtı!

Ancak, kullanıcı deneyimi (UX) konusunda büyük bir sorunla karşılaştım:

• Her Aksiyonda Sayfa Yenilenmesi: Kullanıcı bir postu beğendiğinde, yorum yaptığında veya çıkış yaptığında, bütün sayfa yeniden yükleniyordu ve kullanıcıyı sayfanın en başına atıyordu.

Sosyal medya kullanıcısı olarak alıştığımız "anında beğeni" ve "kaldığım yerden devam etme" deneyimi yoktu ve bu beni delirtiyordu! Bu durumu düzeltmek için Vanilla JavaScript'e yöneldim. O zamanlar ChatGPT-3 yeni çıkmış olsa da, Cross-Header, API istekleri (AJAX) gibi konularla saatlerce boğuştum. Güzel bir deneyimdi ama çok yorucuydu.

💪 O anlarda, o anlık beğeni özelliğini çalıştırdığımda, basit de olsa o büyük sosyal medya devlerinin bir kopyasını yapabilecek yetkinliğe ulaştığımı hissetmiştim.

🤯 Karmaşıklık Başlıyor: Kütüphane Çatışmaları ve React Zorluğu

Projeyi büyütme isteğim arttıkça, JavaScript kod yığını şişmeye ve işler inanılmaz derecede karmaşık hale gelmeye başladı. Kod okunamaz, yönetilemez bir hal aldı.

ChatGPT-3 bana o dönemde popüler olan jQuery'yi öğrenmemi önerdi. Ancak backend geliştiricisi olarak, zaten yavaş yavaş terk edilmeye başlanan bir kütüphaneye girmek istemedim. Bir seçim yapmalıydım ve doğal olarak sektörde en çok tercih edilen React'e yöneldim.

Fakat Front-end'in sürekli değişen dünyası beni yordu. React'te her şey yeniydi; bir yıl önceki video güncel değildi, kütüphaneler çatışıyordu. Dökümantasyonlar, karmaşık fonksiyonlar... Her şey kafamı karıştırıyordu. React benim için aşırı zordu ve neredeyse pes etme noktasına gelmiştim.

💚 Vue.js ile Tanışma: O Mükemmel Özgüven Anı

Tam bu zorlanma anında, bir yazılımcı podcast'i dinliyordum. Birisi aynı benim gibi "Çok komplike geliyor, ne yapmalıyım?" diye sormuştu. Podcast'teki adam kameraya bakıp, o kadar rahat ve özgüvenle "O zaman Vue öğreneceksin!" dedi ki...

O an, kendi kendime "Ben de kendi kütüphanemin arkasında böyle durmalıyım" dedim ve Vue.js'e bir şans vermeye karar verdim.

✨ Vue'nun Büyüsü: Hafiflik, Esneklik ve Bileşen (Component) Yapısı

Vue.js'e geçtiğimde, beni en çok etkileyen ve gelişimimi hızlandıran şeyler şunlar oldu:

1. Bileşen (Component) Yapısının Gücü

Vue'nun component yapısı, tekrar eden işleri ortadan kaldırdı. Sadece bir kez yazdığınız bir bileşeni (örneğin bir "Giriş Yap" butonu) yüzlerce yerde kullanabilirsiniz.

• Tek Değişiklikle Her Yerde Güncelleme: Butonun rengini mi beğenmediniz? Sadece tek bir dosyada değiştirirsiniz, projenin her yerinde güncellenir.
• Küçük ve Yönetilebilir Modüller: Django'nun modüler yapısından hoşlanan bir backend'ci olarak, Vue'nun her şeyi küçük, izole edilmiş ve tekrar kullanılabilir bileşenlere ayırma yeteneği beni mest etti.

2. Composition API / Options API Esnekliği

Vue 2'den 3'e geçiş döneminde bile, Vue'nun her iki API'yi (Options ve Composition) aynı projede destekleyebilmesi muazzamdı! Bu, öğrenme eğrisini yumuşattı ve eski bilgileri de tamamen çöpe atmadan yeniye adapte olmayı sağladı.

3. Kaynak Kullanımı ve Performans

Öğrenciyken sınırlı ve ücretsiz bir barındırma (hosting) hizmeti kullanıyordum ve RAM kullanımı benim için hayatiydi (Çünkü RAM kullanımı fiyat demekti!).

• Django'da Durum: Django, sunucuda çalışır, HTML sayfasını işler ve kullanıcıya gönderir. Bu, sunucu RAM'ini kullanır (Denemelerimde 500 MB'a yakındı).
• Vue.js'te Durum: Vue, bir paket halinde gelir, kullanıcının tarayıcısında açılır ve işlenir. Bu, sunucuya yük bindirmez.

Bu, benim için büyük bir fark yarattı. Artık Django sadece bir API servisi haline gelmişti ve web sayfamız daha hızlı yükleniyordu! Üstelik bu yapıyı statik bir sunucuda barındırabiliyor ve Django sunucusuna yük bindirmiyordum.

🚧 Sırada Ne Var? SEO Problemi ve Nuxt.js Çözümü

Vue.js ile güçlendiğimi hissederken, kişisel web sitemin SEO'sunun (Arama Motoru Optimizasyonu) bozulduğunu fark ettim. E-ticaret gibi önemli projelerde SEO hayati önem taşıyordu.

Bunun sebebi, Google ve diğer SEO araçlarının genellikle sayfanızdaki JavaScript'i çalıştırmamasıydı. Onlar sadece sunucudan gelen ilk HTML dosyasındaki meta etiketlere bakıyorlardı. Single Page Application (SPA) olan Vue.js'te ise meta etiketleri daha sonra, JavaScript çalıştıktan sonra yükleniyordu.

Bu problemi çözmenin en mantıklı yolunun Nuxt.js olduğunu keşfettim.

⏭️ Bir Sonraki Durağınız: Nuxt.js ve SEO Çözümü!

Vue.js, Front-end yolculuğumda bana hız, modülerlik ve hafiflik kazandırdı. Ama büyük projelerde beni bir sonraki seviyeye taşıyan Nuxt.js oldu.

Bir sonraki blog yazımda şunları detaylıca anlatacağım:

• Nuxt.js nedir ve SEO sorununu nasıl çözer?
• Vue.js ile Nuxt.js arasındaki farklar.
• Nuxt.js'i ne zaman öğrenmelisiniz? (Vue.js bildikten sonra geçiş ne kadar kolay?)

Vee, kod örnekleri! İsteğiniz üzerine, Counter (Sayaç) örneğini Vanilla JS ve Vue.js ile nasıl yapacağınızı gösteren İngilizce ve Türkçe kod örneklerini de blog yazımda paylaşacağım.

• Vanilla JS Counter (Sayaç) Örneği:

  // Vanilla JSlet count = 0;document.getElementById('increment-button').addEventListener('click', () => {    count++;    document.getElementById('counter-display').innerText = count;});
  

• Vue.js Counter (Sayaç) Örneği:

  // Vue.js Component Example (Options API)export default {    data() {        return {            count: 0        }    },    methods: {        increment() {            this.count++;        }    }}
  

  (Bu kod bloklarını okuyucunun tercihine göre İngilizce/Türkçe versiyonlarını sunacağım.)

Şimdilik bu kadar. Vue.js bana, bir geliştiricinin kendine güveninin en değerli araç olduğunu gösterdi.

Siz de bu yolculuktan hangi dersleri çıkardınız? Vue.js/Nuxt.js ile ilgili öğrenmek istediğiniz veya sonraki blog yazımızdan beklentileriniz neler? Yorumlarda belirtmeyi unutmayın!

Görüşmek üzere ve güzel haftalar dilerim! Faruk Şeker