Menu ---

Oğuzhan Aslan.

Vue.js ile Uygulama Geliştirme

Tags ,

Son zamanlarda ekosistemin hızlıca geliştiğini, hergün karşımıza çıkan yeni kütüphaneler ile görüyoruz. Özellikle frontend tarafında bu gelişme süreci çok hızlı ilerliyor. Hepsi işlerimizi kolaylaştırmak, sorunlarımıza çözüm üretmek için geliştiriliyor.
React, Backbone, Ember, Angular gibi benzer işler yapan popüler birçok kütüphane var. Vue.js bu kervana yeni yeni katılıyor diyebiliriz. Adım adım Vue.js’in yaptığı işlerden bahsedeceğim ve basit bir uygulama geliştireceğiz.

Vue.js web arayüzleri oluşturmak için geliştirilen bir JavaScript kütüphanesidir. Anlatımı yaparken diğer frameworkler ile sık sık karşılaştırma yapacağım.

SPA geliştirmek için, kullanacağınız kütüphanenin çok fazla işe karışmamasını, sizi esnek bırakmasını ve oldukça basit olmasını istiyorsanız Vue.js tam size göre bir kütüphane.

  • Vue.js API ve Tasarım açısından Angular’a göre daha kolaydır. Hızlı bir şekilde öğrenip, uygulama geliştirmeye başlayabiliyorsunuz.
  • Vue.js Angular’a göre daha esnek bir yapıdadır. Angular gibi her şeyi onun istediği gibi yapmanızı isteyen, içerisinde belki kullanmayacağınız onlarca özellik olan bir yapı değil. Vue’da interface katmanı bulunuyor. Örneğin vue çok basit bir şekilde olsa da, Routing ve AJAX işlevleri birlikte gelse de, genellikle bunun için harici modüller kullanarak uygulamayı inşaa ederiz.
  • React ile geliştirme yapanlar bu duruma daha hakimdir. React ile Vue birbirlerine benzer gözükseler de, işin aslı pekte öyle değil. React’in Virtual Dom özelliği bile başlı başına bir farklılık. React tecrübem yeterli olmadığı için Vue ile kıyaslama yapamayacağım. Bu konuda karşılaştırma yapacak olanlar, yazıya katkıda bulunabilirse sevinirim 🙂
  • Vue.js’de Directive ve Component’lar arasında büyük bir ayrım vardır. Directive’ler sadece DOM manipülasyonları için kullanılırken, Component’lar ise data mimarisini saklamak için kullanılır. Angular’da bu durum biraz daha karışık.
    Basit bir blog sayfasını ele aldığımızda, Header, Navigation, Search, BlogPosts, Footer gibi componentler geliştiririz.
    Tab, Modal gibi işleri ise Directive kullanarak yapmayı tercih ederiz.

Vue.js’in en güzel yanı, bizlere esnek bir yapı sunmasıdır. Karşılaştırmaları sadece Angular üzerinden yaptım.

Peki neden Vue.js daha iyi?

Aslında bu yazıda bu argümanı asla kullanmayacağımı belirtmek istiyorum. Zira herhangi bir işi, diğerinden daha iyi yaptığını iddaa etmiyorum. Vue.js ile çok kötü bir uygulama da geliştirebilirsiniz. Bu daha çok developer’ın bilgi seviyesi ve çalışma özeniyle alakalı bir durum.
Sunumlarda sıklıkla karşılaştığımız; Chart grafikleri, Stackoverflow konu&mesaj sayısı, Linkedin&Kariyer.net iş ilanı sayısıyla ölçüm yapanlara asla güvenmiyorum.
Eğer karşılaştırma yaparsak Vue bu konuda diğer kütüphanelere göre oldukça zayıf kalacak. Örneğin, 27 Mart 2016 tarihinde bu yazıyı yazarken, Twitter’da Türkçe olarak Vue hakkında yazılan tweet sayısı sadece 6.

Teknoloji seçiminde son 2 senedir gördüğüm kadarıyla, ilk tercih genelde popülerlik oluyor. Bugün her yerde Angular.JS ile ilgili iş ilanları görmemizin sebebi bu olsa gerek. Arkasında Google gibi bir firmanın olması, çok fazla kaynağın ve dökümantasyonun ve 3.parti eklentinin olması buna en büyük etken. Şahsen Google ürünlerinin dökümantasyonlarını son derece başarısız olduğunu düşünüyorum. Ama söylediğim gibi bu etkenler, bir teknolojinin “iyi” olduğu anlamına gelmiyor.

Komünite

Vue.js; Evan You tarafından geliştirilmeye başlanan bir proje. Evan eski bir Google çalışanı. Daha önce Meteor projesinde çalışmaları olmuş. Çin’li olmasından dolayı, Vue.js forumlarında ve Github’da bolca Çince içeriğe denk gelebilirsiniz 🙂

Vue.js’in arkasında olan en güçlü ekip şuan Laracast komünitesi ve Jeffrey Way. Laracast’te video eğitimi yayınlandıktan sonra Vue.js ile ilgili birçok insan yazı yazmaya, plugin hazırlamaya başladı. Laravel kullanıcıları Vue.js’i Laracast sayesinde tanıyorlar.
Onun dışında diğer yazılım komünitelerinde çok aktif olduğunu söyleyemem. Angular, React zamanında çok agresif ve hızlı bir şekilde tanınmıştı. Vue.js bu atılımı bugüne kadar gerçekleştiremedi fakat özellikle 2016 yılında büyük bir çıkış yakalayacağına inanıyorum. Bunun tamamen Pazarlama ile ilgili bir konu olduğunu düşünüyorum. Vue geliştirici ekibi bugüne kadar bu konuya çok fazla önem vermedi.

Kazuya Kawaguchi ise işin Japon tarafını organize ediyor. vue-validator eklentisini geliştiriyor ve Vue.Js Japonca dökümanının hazırlanmasına liderlik ediyor.

Ayrıyetten, dökümantasyon için İtalyanca çeviri bulunuyor. Toplamda 4 dil çeviriye sahip olması çok güzel. Türkiye’de Vue komünitesi oluşursa Türkçe çeviri için adım atılabilir.

Uygulamaya Giriş

Projemizi çalıştırmak için Webpack kullanacağız. Evan You, bunun için vue-cli ismine sahip bir paket geliştirdi. Bunun gibi temel bir gereklilik olan paket, Aralık 2015’te yayınlandı.
Alternatif development tool’larına şuradan inceleyebilirsiniz.

Eğer daha önce terminal ve paket yöneticisi ile ilgili tecrübeniz olmadıysa, basit terminal komutlarını, npm gibi paket yöneticisinin, nasıl kullanıldığını, ne işe yaradığını öğrenmelisiniz. Bununla ilgili bolca Türkçe kaynak var.

vue-cli Kurulum

İlk olarak vue-cli paketini bilgisayarımıza global olarak kuruyoruz.

Gereklilikler: Node.js ve Git.

$ npm install -g vue-cli

Ardından paketi çalıştırıyoruz.

$ vue init webpack my-project
$ cd my-project
$ npm install
$ npm run dev

İlk komut ile beraber karşımıza gelen seçenekleri doldurarak uygulamanın iskeletini oluşturmuş olacağız.
Uygulamayı src klasörünün içerisinde geliştireceğiz.

vue init webpack komutu

Kurulum yaptıktan sonra aşağıdaki komutu çalıştırıyoruz.

$ npm run dev

Ve projemiz karşımıza geliyor.

Burada örnek olarak Hello World içeriğini basan bir component bulunuyor. O component’i kullanan bir sayfa daha bulunuyor.
Ama bu example projeyi boşverip, basitçe kendi yapımızı oluşturacağız.

Router ihtiyacı için, vue-router kullanacağız. Dökümantasyonu oldukça başarılı.
Aşağıda bulunan komutla yüklüyoruz.

$ npm install vue-router --save

İlk olarak projenin kendi oluşturduğu src içerisinde bulunan tüm dosyaları siliyoruz.
Ardından ana dizinde index.html dosyası hala duruyor.
Vue-Router’ı body etiketleri arasına alıyoruz.

<!DOCTYPE html>ap
<html>
  <head>
    <meta charset="utf-8">
    <title>Vue.js Example App</title>
  </head>
  <body>
    <router-view></router-view>
    <!-- built files will be auto injected -->
  </body>
</html>

/src klasörü içerisinde main.js dosyası yaratarak vue uygulamanın ayarlarını yapacağız.

// Vue bağımlılıklarını import ediyoruz.
// import ES6 ile geliyor.
import Vue from 'vue'
import VueRouter from 'vue-router'

// App.vue dosyasını bir sonraki aşamada oluşturacağız.
// Bu template dosyasını router ile eşleştireceğiz.
// Her tanımladığımız template'i bu dosyada çağıracağız ve router'da url'ini ayarlayacağız.
import homePage from './App'

// Router uygulama ile eşleştiriliyor.
var Application = Vue.extend({})

// Router'ı instance ediyoruz.
Vue.use(VueRouter)

// Router'ın ayarlarını yapıyoruz.
// http://vuejs.github.io/vue-router/en/options.html
var router = new VueRouter({
  history: true,
  saveScrollPosition: true,
  hasbang: false
})

// Router'ı çağırdığımız template'ler ile eşleştiriyoruz.
// http://vuejs.github.io/vue-router/en/api/map.html
router.map({
  '/': {
    component: homePage
  }
})

// Şimdi uygulamayı geliştirmeye başlayabiliriz.
// Router ilgili elemana kendini monte edecek ve çalışmaya başlayacak.
router.start(Application, 'body')

/src klasörü içerisinde App.vue adında bir yaratıyoruz.
Bu dosya içerisinde html, js ve css yazabiliyoruz. İsterseniz hepsini ayrı ayrı dosyalarda yaratıp, html ve css’ini js dosyasına import ederek kullanabilirsiniz. Bu tamamen sizin seçiminize bağlı.

### Nelere ihtiyacımız var ?

Uifaces servisini kullanarak basit bir örnek geliştireceğiz.

http://uifaces.com/api/v1/random adresine get gönderip karşılığında bu json’ı alacağız. Ve bu json kaynağını sayfamıza ekleyeceğiz. XMLHttpRequest için, vue-resource plugin’i var. Bunu kullanabiliriz.

Fakat bu işi daha iyi yaptığını düşündüğüm, superagent eklentisini kullanacağız. Fetch, Ajax gibi alternatiflerde bulunuyor. İstediğinizi kullanabilirsiniz.

npm install superagent --save

Uygulamaya Başlamadan Önce!

$ curl http://uifaces.com/api/v1/random
---
{
    "username": "calebogden"
    "image_urls": {
        "epic": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg",
        "bigger": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/73.jpg",
        "normal": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/48.jpg",
        "mini": "https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/24.jpg"
    }
}

İlgili adrese Request yaptıktan sonra, bize şöyle bir JSON dönüyor. En basit haliyle neler yapabileceğimizi düşünelim.

  • Bir butona tıkladıktan sonra, datamızı html’e render edeceğiz.
  • Butona tıklanıp, data’nın geldiğinden emin olduktan sonra, o butonu sileceğiz.
  • Data geldikten sonra, tekrardan istek gönderip data’yı değiştireceğiz.
  • Gelen dataları sıfırlayabilip, en başa dönebileceğiz.

Neler Yapacağız?

  1. İlk baktığımızda dataları çekmek ve dataları sıfırlamak için iki tane metod yazacağız.
  2. Butona click event’ini yakalayıp, bu metodları çalıştıracağız. getProfile ve resetProfile adında metodlarımız olacak.
  3. Bu metodların işlevi datayı çekip, objemize göndermek ve silmek olacak.
  4. Data’nın gelip gelmediğini v-if ile kontrol edeceğiz.
  5. @click eventi ile tıklamaları yakalayacağız ve metodları çalıştıracağız.

Uygulamaya Başlıyoruz

/src klasörü içerisinde, daha önce App.vue dosyası oluşturmuştuk. Uygulamayı bu dosya içinde geliştireceğiz.
Bu sayfada daha önce alışık olmadığınız bir olay bulunuyor. Html, Css ve JavaScript kodlarımızı bu dosya üzerinde yazacağız. Api servisine bağlanıp dataları almayı, view katmanı ile ilgili işleri, stillendirmeyi bu dosyada yapacağız.

Peki, neden view katmanı diyebileceğimiz bir dosyada, servise bağlantı yapıyoruz veya başka işler yapıyoruz ? Proje büyüdüğünde işler karışmayacak mı ?

Geldik en önemli noktaya. Yazının girişinde esnek bir yapıya sahip olduğumuzu, kendi mimarinizi oluşturmanız gerektiğinden bahsetmiştim. Siz bu konuda kendi doğrularınıza göre ilerleyebilirsiniz. Sizinle paylaşacağım örneklere göz atarak, Vue geliştiricilerinin nasıl yapılar oluşturduğunu inceleyerek fikir sahibi olabilirsiniz.

vue-router-hackernews uygulamasını incelediğinizde uygulamayı component’lara bölerek geliştirildiğini göreceksiniz.

rss-reader uygulamasında ise bir kaç katman dahil edilmiş uygulamaya. Aynı zamanda bu uygulama Elektron ve Vue kullanılarak geliştirilmiş desktop bir uygulama.

Gokotta yine Elektron ve Vue kullanılarak geliştirilen desktop bir Music Player.
Burada da servis katmanı dahil edilmiş. Uygulama yine component’lar üzerinden yürüyor.

Adım adım ilerlemek yerine tek seferde kodumuzu paylaşıyorum. Comment kısımlarında neler yaptığımızı göreceğiz.

Demo

Yaptığımız çalışmanın örneğine buradan ulaşabilirsiniz.

Kimler Vue.js Kullanıyor?

Bu kaynaklar, awesome-vue sayfasından alıntıdır.

Yararlandığım Kaynaklar

Teşekkürler

Ali Oygur‘a destekleri için teşekkürler.

Post Navigation

Shame on you Instagram..

ES5, ES6, ES2016, ES.Next: JavaScript sürümleri nasıl ilerliyor?

Related Posts:

Shame on you Instagram..

ES5, ES6, ES2016, ES.Next: JavaScript sürümleri nasıl ilerliyor?

4 comments: On Vue.js ile Uygulama Geliştirme

Bir Cevap Yazın

Site Footer