VUE.JS

Vue.js Nedir?

Yayın:
Hobi olarak ilgilendiğim Golang (Go programlama dili) dışında, bu yazıda vakit ayırmaktan oldukça memnun olduğum (dökümanlar ve sunduğu beceriler bağlamında), front-end işlemlerinde kullanılabilecek parlayan bir ...
GÖRSEL
Hobi olarak ilgilendiğim Golang (Go programlama dili) dışında, bu yazıda vakit ayırmaktan oldukça memnun olduğum (dökümanlar ve sunduğu beceriler bağlamında), front-end işlemlerinde kullanılabilecek parlayan bir yıldızdan, bir progressive framework‘ten bahsedeceğim. Son birkaç yıldır hakkıda pek çok yoruma ve yazılmış çeşitli örneklere denk geldiğinizi tahmin ediyorum. Evet, üzerine konuşacağımız framework; Vue.js.VueJS

Vue.js Nedir?

Vue (Vue.js / VueJS), kullanıcı arayüzleri oluştururken / inşaa ederken kullanılabileceğimiz, Evan You tarafından geliştirilen ve duyurulan, açık kaynaklı olarak hayatına devam eden bir progressive javascript framework. Progressive framework ile ilgili daha detaylı bir yazı yayınlayacağım. Ancak, şu aşamada bilmeniz gereken en temel konu, progressive framework dendiğinde basitliğin ve kendine yeterliliğin öne çıktığıdır. Vue’nun yapısı itibariyle odaklandığı konu, Reactjs ve AngularJS gibi rakiplerine kıyasla çok daha kolay adapte olunabilirliktir. Çekirdek yapısı view katmanına odaklanır (MVVM (Model View ViewModel) örüntüsünün (pattern) ViewModel katmanına) ve gereksinimler çerçevesinde kolaylıkla harici kütüphanelerle ilişkilendirilebilir. Bu sayede, Vue çekirdeğine entegre edilecek desteklenen kütüphanelerle birlikte hızlı ve kapsamlı single-page uygulamalar (Single Page Applications / SPA) geliştirilebilmektedir.

Vue ve MVVM yapısı

İşin teknik boyutuna bir geliştirici kadar hakim olamayabilirim. ReactJS ve AngularJS bilgim hiç yok. Bu sebeple teknik karşılaştırma yapmam da pek doğru ve anlamlı olmayacaktır. Buna karşın, öğrenme sürecinde karşılaştığım durumları, “neden?” sorularına bulduğum karşılıkları ve çözümleri aşama aşama ve elbette bir hedefe doğru ilerleyiş üzerinden aktarmaya çalışacağım.

Single-page Application ve Multipage Application karşılaştırması

Kendi deneyimlerim üzerinden aktaracağım ilk durum Vue.js’in reactive yani kullanıcı etkileşimli olması ki bu pek çok framework tarafından da sunulan bir özellik. React ile yapılan karşılaştırmalarda öne çıkan ilk husus Vue.js ile CSS, Script ve HTML etiketlerini mustache syntax ({{…}} / yer tutucu) ile tek bir dosya (reusable components / *.vue) olarak yönetebiliyor olmak. Bir diğer husus ise, Vue.js’in de React gibi Virtual DOM üzerinden işlem yapıyor oluşu. Bu sayede, gerçekleştirilen değişiklikler tüm DOM‘un yeniden yürütülmesi yerine DOM karşılaştırması üzerinden sadece ilgili alanlarla sınırlandırılarak yürütülmekte.

Vue.js nezdinde yinelenen ifadeler;

  • Kolay anlaşılabilir ve öğrenilebilir oluşu,
  • Çok yönlü kullanım imkanı,
  • Çekirdek yapısı ve desteklenen kütüphanelerle birlikte sürdürülebilir sonuçlar sağlaması,
  • Hızlı, performanslı ve pratik bir şekilde test edilebilir oluşu.

Vue.js anlatım sürecini framework’ün kendi belgelemesi (https://vuejs.org/) üzerinden, aynı başlıkları takip ederek ilerleteceğim. Aşağıda, ayrıca değerlendirilebilecek okumalar ve videoları listeledim. Ek sorularınız olursa bulduğum çözümleri yazılara dahil etmekten memnuniyet duyarım.

Kullanım Örneği

Şimdilik tek bir index.html dosyası basit bir Vue.js uygulaması oluşturabilmemiz için yeterli. İlerleyen yazılarda cli aracılığıyla (npm üzerinden cli 2 ve cli 3) da nasıl projeler oluşturabileceğimizden bahsedeceğim.Direct <script> Include yöntemiyle geliştirme (development) dosyasını (https://vuejs.org/js/vue.js) index.html dosyamıza ekleyerek işe koyulalım. HTML sayfamızın ilk hali şu şekilde olsun:
<!DOCTYPE html>
<html>
<head>
	<title>Vue Example #1</title>
</head>
<body>
 
</body>
</html>
Hızlıca yayınlanan son sürüm üzerinden Vue.js ekleme işlemini gerçekleştirelim ve uygulama alanımızı tanımlayalım. Vue.js dosyasını ayrıca CDN (Örn. https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js ve https://unpkg.com/vue@2.6.10/dist/vue.js) yayınları veya NPM (tavsiye edilen yöntem) aracılığıyla (npm install vue) da edinebilirsiniz. Biz ilk örneklerde vuejs.org yayını üzerinden ilerleyelim.
<!DOCTYPE html>
<html>
<head>
	<title>Vue Example #1</title>
</head>
<body>
<div id="app">
    <h1>Hello World!</h1>
</div>
 
<script src="https://vuejs.org/js/vue.js"></script>
</body>
</html>
Yukarıdaki index.html dosyasını internet tarayıcınız üzerinden görüntülediğinizde karşınıza h1 etiketleri içerisinde yer alan bir Hello World! mesajı çıkacaktır; binding text. Bu işlemi bir Vue.js uygulaması olarak kurgulayabilmemiz için öncelikle Vue ile etkileşimli alanımızı ilişkilendirmemiz gerekmekte. Aşağıda text binding olarak olarak ifade edilen işleme dair ilk olarak semamtic syntax ve ardından declarative syntax örneklerini görebilirsiniz.
new Vue({
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})

el yani element bizim etkileşimli (reactive) alanımızı Vue’ya ilettiğimiz alanımız. data ise key ve value ile ilgili veri işlemleri için direktifleri barındırmakta. app.$el (document.getElementById('ornek')) ile (The View) element olarak tanımlanan HTML etiketini ve vm.$data ile data (The Model) içeriğini çekebilirsiniz.

Hemen index.html dosyamızın içeriğini güncelleyelim.

<!DOCTYPE html>
<html>
	<head>
		<title>Vue Example #1</title>
	</head>
	<body>
 
		<div id="app">
			<h1>{{ message }}</h1>
			<h1 v-text="message"></h1>
		</div>
 
		<script src="https://vuejs.org/js/vue.js"></script>
 
		<script>
		new Vue({
		  el: '#app',
		  data: {
		    message: 'Hello World!'
		  }
		})
		</script>
 
	</body>
</html>
Fark ettiğiniz değişiklikler neler?
  • app id değerine sahip bir div var.
  • {{ message }} şeklinde, mustache.js gibi template yapılarından aşina olduğumuz bir ifade (interpolation) oluşturulmuş; semantic syntax.
  • new Vue() instance ve içeriğinde #app id değeri element olarak belirtilmiş.
  • Yine bu instance içerisinde data adlı bir property var ve içeriğindeki message key’i Hello World! değerine (value) sahip. Yani, Vue.js ile kontrol altına aldığımız (#pp) alan içerisindeki değişkenleri ({{…}}) temsil ediyor. Unutmadan, data bir object olduğu için içeriğindeki tanımlamalar (key:value) buna uygun olarak gerçekleştirilmeli. Örneğin key isminde newValue tırnak işaretine gerek olmaksızın yazılabilecek iken new-value tırnak içerisinde tanımlanabilir. Örneklerde bu hususu ayrıca hatırlatacağım.
index.html dosyasını tarayıcınız ile açtığınızda h1 etiketi içerisinde bir önceki görüntülemede de olduğu üzere Hello World! yazacaktır. Ancak, sayfanın kaynak kodunu görüntülediğinizde h1 içeriğinde {{ message }} görünür. Vue.js DOM oluşturulurken belirtilen key’i (message) işaretlendiği alanda bulmuş (#app) ve belirtilen değer ile (Hello World!) değiştirmiştir; declarative rendering.new Vue() instance variable üzerinden de oluşturulabilir.
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
Bu sayede app.message ile değerlere müdahale edilebilir. Yukarıdaki örneği şu şekilde güncelleyelim.
<!DOCTYPE html>
<html>
	<head>
		<title>Vue Example #1</title>
	</head>
	<body>
 
		<div id="app">
			<h1>{{ message }}</h1>
		</div>
 
		<script src="https://vuejs.org/js/vue.js"></script>
 
		<script>
		var app = new Vue({
		  el: '#app',
		  data: {
		    message: 'Hello World!'
		  }
		})
		app.message = 'Bye!'
		</script>
 
	</body>
</html>
Gördüğünüz üzere ekrana yansıyan Bye! olacaktır. Bunun nedeni, app.message ile {{ message }} için yeni bir değer atamış olmamız. Bu işlemi internet tarayıcınızın (Örn. Chrome) console’u üzerinden de gerçekleştirebilirsiniz.Örneğimizi biraz daha genişletelim ve bir array içeriğini liste olarak ekrana dökelim. Örneğin, farklı dillerde Selam diyelim; Tungjatjeta, Salam, Вiтаю, Hola, Hallo, Tere. Bu defa standart HTML kod parçalarını açıklamaya dahil etmeyecek ve parça parça konuyu ele alacağım.
		<div id="app">
			<ul>
				<li>{{ message }}</li>
				<li v-text="message"></li>
			</ul>
		</div>
h1 etiketini liste ile değiştirdim. Elbette bu bir zorunluluk değil. Farklı HTML etiketlerini kullanabilirsiniz. Önemli olan v-for olarak ifade edeceğimiz işlem neticesinde ilgili etiketin her array değeri için yineleceği. v-for dışında bir de v-bind:title (direktifler) kullanacağım. İlk olarak Vue tanılamamızı şu şekilde yapalım.
		var app = new Vue({
		  el: '#app',
		  data: {
		    message: ['Selam', 'Hello', 'Tungjatjeta', 'Salam', 'Вiтаю', 'Hola', 'Hallo', 'Tere']
		  }
		})
Bu tanımlamanın çıktısı şu şekilde olacaktır:
[ "Selam", "Hello", "Tungjatjeta", "Salam", "Вiтаю", "Hola", "Hallo", "Tere" ]
Çünkü message ile value ne ise onu gönderdik. Az önce de bahsettiğim üzere v-for ile her tanımı ayrı bir şekilde alabilmekteyiz. O halde li etiketimizi güncelleyelim.
		<div id="app">
			<ul>
				<li v-for="msg in message">{{ msg }}</li>
			</ul>
		</div>
Yaptığımız değişiklik ile message içeriğinde yer alan ifadeleri sırayla msg adında bir yer tutucuya aktarıyor ve tanımlandığı kodu (li) bu ifadelerle birlikte tekrar uyguluyoruz. Yine yukarıda belirttiğim gibi bir de title kullanımımız var. Bir başka yazıda v-bind konusuna detaylıca değineceğim. Şimdilik sadece ilgili li etiketine title eklemekle yetinelim.
		<div id="app">
			<ul>
				<li v-for="msg in message" v-bind:title="msg">{{ msg }}</li>
			</ul>
		</div>
Mouse imlecini ilgili satır üzerine getirdiğinizde msg içeriğinin title attribute içeriğinde de yer aldığını görebilirsiniz.

Vue yazıları boyunca oluşturduğum örnekleri Gitlab > Vue Examples üzerinden edinebilirsiniz edebilirsiniz.

Diğer Yazılar

Bu başlık altından, Vue.js ile ilgili yayınladığım diğer yazılar ve örneklere zaman ve konu sıralamasına göre ulaşabilirsiniz.

Önerdiğim Ücretsiz Kaynaklar

Ceyhun Enki Aksan

Kullanıcı Davranışları Analizi (User Behavior Analysis) ve Kullanıcı Deneyim Tasarımı (UX Design) üzerine çalışmalar yürütmekte, bu süreçte edindiğim teknik ve pratik bilgileri fayda sağlamak motivasyonuyla (afaik / as far as i know) paylaşmaktayım.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.