Vue.js Nedir?
Makale resmi

Merhaba Arkadaşlar,

Bugüne kadar Javascript dünyasından pek çok framework geldi geçti. Piyasa o kadar hızlı bir dönüşümde ki piyasa hızına yetişmek gerçekten oldukça yorucu bir süreç halini alabiliyor. Ancak bütün bu framework'ler belirli dünya ihtiyaçlarına göre belirleniyor. Biz de bugün son dönemlerin popüler framework'ü olan Vue.js hakkında konuşacağız.

Vue.js Şubat 2014 tarihinde, eski bir Google çalışanı olan Evan You tarafından geliştirildi. Kendisi aynı zamanda Angular.js 1 geliştirici ekibindendi. Kendisinin Angular.js'de eksik gördüğü yönleri de kapatarak, böyle bir framework ortaya çıkardı. Daha önce Angular.js ile çalışan kişiler, aralarındaki bazı benzerlikleri (v-if gibi) farkedeceklerdir.

3 yılda ciddi bir gelişim gösteren framework, Github'da 80bin civarı yıldıza sahip, bu da onun popülerliğini gösteriyor. Şu an arkasında büyük bir firma olmasa da proje çok düzgün bir şekilde ilerliyor.

 

AVANTAJLARI

  • Saf javascript kullanılması. Bu elbette kişilerin tercihine bağlı bir durum. Ancak frontend developer'ların hepsi Typescript, Coffescript bilemezken, Javascript biliyor olacaklardır. Bu da aradaki uyumu arttıracaktır.
  • Hafif bir script olması. İster büyük mimarilerde kullanın, isterseniz tek bir sayfada kullanın. Tek bir dosyayı sayfaya ekleyerek hemen kullanmaya başlayabilirsiniz. (Örn. Angular'da belirli yapılandırmalar gerekmektedir.)
  • Virtual dom kullanması. Virtual dom, react tarafından kullanılmış bir özelliktir. Avantajı ise değişikller yapıldıkça, doğrudan dom'un değil, memory'deki dom'un clone'nin güncellenmesi ve aradaki farkların uygun zamanda gerçek dom'a yansıtılmasıdır. (Angular'da Virtual dom yoktur.)
  • Performasının çok iyi olması. (Aşağıda detaylı bir performans testi mevcuttur.)
  • Öğrenim eğrisinin kesinlikle az olması. Diğer framework'lerle kıyaslandığında gerçekten kullanması oldukça kolay.
  • Basit Javascript objeleriyle çalışması. Bunun avantajı dışarıdan yapılacak müdahelelerin sistemde çalışması. Yani diğer framework'lerdeki gibi wrapper'lara ya da trigger'lara ihtiyaç duymaması. 
  • Geniş framework ve library desteği. Mobil hybrid geliştirmesi için Quasar Framework'ü, mobil native için Weex'i kullanabilirsiniz. Bunun gibi daha pek çok içeriğe sahiptir.

 

PERFORMANS FARKLARI

Performans anlamında diğer framework'lerle kıyaslama yapıldığında, en üst performansa sahip framework olarak görünüyor.

 

COMPONENT MİMARİ

logo

Son dönem Javascript frameworklerinde component mimarı oldukça popüler bir hale geldi. 

Component mimari, aslında html'de halihazırda bulunan tag'ların genişletilmesidir. Örneğin paragraf için <p> kullarız ya da başlık için <h> kullanırız. Ama mesela kendi isteğimize göre <custom> gibi bir tag yazarsak, browser bunu düz bir metin olarak basacaktır. Çünkü biz, ne olduğunu bilsek de browser <custom> 'ı tanımıyor olacaktır. İşte bu şekilde özel tag'lar yazabilmemiz, yeni nesil framework'ler sayesinde mümkün olmaktadır. 

Bir diğer dikkat çekici detay da bu mimaride yazılmış framework'lerde her kod parçasının ya da html parçasının kendi işini yapmasıdır.

Örneğin, bir alışveriş sitesinde sepetimiz olduğunu varsayalım, sepeti, komple bir component olarak da tasarlayabiliriz, içindeki her bir item'i ayrı bir component, toplam tutarı ayrı bir component olarak da tasarlayabiliriz. Böyle yapmamızın avantajı ve bu framework'lerin en önemli özelliği, yeniden kullanılabilirlik (reusable)'dir. Yani biz sepeti, herhangi bir kod değişikliği yapmadan farklı yerlerde aynı şekilde kullanabiliriz. Bunun bizlere sağladığı esneklik ve aynı kodu tekrar yazmama özelliği muazzamdır.

 

MVVM

Mvvm

Bahsettiğimiz framework'lerin bir diğer güzelliği ise bizlere Mvvm pattern'ini sunmasıdır.

Mvvm; kısaca model'deki veri güncellendiğinde, view'daki verinin de otomatik olarak güncellenmesi, aynı şekilde tam tersine bir güncelleme işleminin de olmasıdır. Bunun avantajları çok daha az kod ile hızlıca işlemlerin çıkarılması, veri değişimlerinin hızlıca yapılmasıdır. Bunu yaygınlaştıran ise Silverlight, Knockout.js gibi popüler yapılar olmuştur.

 

JQUERY'DEN YAZIM FARKI

Kesinlikle en büyük farkları, az kod satırı ve yüksek performansa sahip olmasıdır. Buradaki sihir, Vue.js'nin declaretive bir yapıya sahip olmasıdır. Bu yapıyla bütün veri değişiklikleri otomatik olarak gerekli yerlere yansıtılıyor. Bizlerin bunun için hiç bir şey yapmamıza gerek kalmıyor.

Kod farkını anlamak için şu örneğe bakalım;

JQuery ile şöyle yaparken,

 6 <div id="app">
 7     <h1>Merhaba Vue</h1>
 8     <input id="message">
 9 </div>
11 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
12 <script type="text/javascript">
13     $('#message').on('keyup', function(){
14         var message = $('#message').val();
15         $('h1').text(message);
16     })
17 </script>

Vue.js ile şöyle yaparız,

<div id="app">
2     <h1>{{ message }}</h1>
3     <input v-model="message">
4 </div>
1 new Vue({
2     el: '#app',
3     data: {
4         message: ''
5     }
6 })

Aradaki fark, Jquery'de, bir input'a id ver, onun keyup event'ini yakala, değerini al ve istediğin bir yere yaz şeklindeyken, Vue.js'de data objesine field'ı bağla, basılacak yerde {{...}} şeklinde yaz. 

Bu fark, özellikle büyük projelerde çok çok ciddi zaman ve kod uzunluğu oluşturuyor.

 

Sonuç olarak Vue.js çok iyi bir framework. Kullanmanızı kesinlikle tavsiye ediyorum. 

İnşallah makalelerime devam ederek, Vue.js serisi oluşturmayı düşünüyorum.