Arayüz Güncel

Vue Js Nedir ve Neden Kullanmalıyız? Virtual DOM Nedir?

Nisa Bengisu

Vue js, web arayüzleri hazırlamak için tercih edilen javascript kütüphanesidir.Vue ismi view kelimesinden ortaya çıkmıştır çekirdek yapısında görüntü odaklı olmasından da anlıyoruz aslında.  Google çalışanlarından biri olan Evan You tarafından açık kaynak olarak geliştirilmiştir. Büyük çaplı ve karışık projeler için ortaya çıkmıştır da diyebiliriz.

Vue js, son zamanlarda en popüler javascript kütüphanesi haline geldi. Projelere dahil edilmesi konusunda fazlasıyla kolaylık sağlaması da günden güne kullanımını arttırmakta. Hatta Github’ taki son güncellemesinde 147 bin yıldız ile diğer javascript kütüphaneleri olan React ve Angular frameworklerini alt etmeyi başardı. Peki bu başarıyı hangi özellikleriyle sağladı?

Vue js’ in Angular ve React frameworkleri arasındaki farklara bir göz atalım.

Vue, Angular ve React Karşılaştırması

  • Vue js, React ve Angular’ a göre öğrenmesi daha kolay bir framework.
  • Angular ve React kütüphaneleri oldukça geniş fakat bu Vue js’ nin bize sağladığı okunabilirliği sağlamıyor.
  • Vue js, React’ e göre bileşenlerin kullanıcıya sunulma sürecinde çok daha hızlı ve pratik .
  • React ile front-end tasarımını yaparken Angular ve Vue frameworklerindeki HTML ve CSS’in esnekliğini sağlayamıyoruz.
  • React ve Vue frameworklerinde Virtual DOM özelliği olmasına rağmen Angular’ da bu özellik yok.

Aralarındaki farkları ben kısaca anlatmaya çalıştım fakat daha ayrıntılı görmek isterseniz, Vue js’ in sitesine bakabilirsiniz.

Virtual DOM Nedir?

Vue js’in de içinde barındırdığı bu özellik bence en önemli ve yararlı özelliğidir. Peki ya bu Virtual DOM nedir?

Virtual DOM, projenizde bir gerçek DOM bir de sanal DOM olarak yer alır.  Projenizde bir değişiklik yaptığınızda gerçek DOM bu değişiklikten etkilenmez. Değişiklikler sanal bir DOM yapısında gerçekleşir.

Daha sonrasında sanal DOM ile gerçek DOM arasındaki farka bakılarak değişikler saptanır. Gerçek DOM üzerinde değişen kısımlar değiştirilir, güncellenir fakat değişmeyen kısımlara kesinlikle gereksiz bir güncelleme yapılmaz.

Virtual DOM’ un bu yapısı bize hız kazandırır.

Vue js’i karşılaştırma yaparak özelliklerini küçük de olsa ortaya çıkardık bir de özelliklerine bütün bir şekilde bakalım.

Vue Js Neden Kullanılmalı?

  • Öğrenim sürecinin son derece kolay ve eğlenceli olması.
  • Herhangi bir projeye pratik ve hızlı bir şekilde eklenebilmesi.
  • Açık kaynak koduyla bizlere sunulması.
  • Virtual DOM özelliğinin olması.
  • Küçük kütüphanesiyle bize hız kazandırması.
  • Sürdürülebilir olması.
  • Bakımının kolay olması.
  • Tamamen kullanıcı dostu olması.

Vue js, kullanıcıyı bu kadar severken biz neden sevmeyelim ki? 🙂

Tabloda da görüldüğü gibi Vue js hız konusunda kendisini kanıtlamış bir framework olarak karşımıza çıkıyor. Önümüzdeki günlerde daha çok karşılacağımız kesin. Büyük çaplı şirketlerde de Vue js kullanılmakta ki bu durum bize Vue js’in tekrardan ne kadar pratik, hızlı bir o kadar da geniş bir alanının olduğunu gösteriyor.

Vue js kullanan büyük çaplı siteler:

  1. Facebook
  2. Netflix
  3. Adobe
  4. Gitlab

Hemen küçük bir örnekle başlamak isterseniz ilk önce aşağıdaki kurulumu yapıp örneğine geçebilirsiniz.

CDN Kurulumu için:

Html kodunuzun head kısmına aşağıdaki script tagını ekleyerek başlayabilirsiniz.

Npm ile Kurulum için:

Konsol kısmına ‘ $npm install vue ‘ yazmanız yeterli olacaktır .

Vue js ile ilgili bir örnek yapalım. Bütün başlangıçlarda da olduğu gibi “Merhaba” diyelim .

Html dosyanıza cdn kurulumunu yaptıktan sonra aşağıdaki kodları yazmaya başlayın.

Kodunuzu çalıştırdığınızda ekran çıktısı olarak message yazısı yerine ” Hello Vue! ” yazısını göreceksiniz.

Vue js’e merhaba dedikten sonra artık projelerimizde kullanabiliriz. Projelerimizde kullanırken bazı eklentilere de ihtiyaç duyuyoruz Vue js bize bunu açık kaynak şeklinde sağlamakta. Vue js, görüntü odaklı bir framework olduğu için ajax, router, state management gibi işlemleri Github’daki eklentileri sayesinde yapabilmekte. Eklentileri tıklayarak bulabilirsiniz.

 



Yazar hakkında

Nisa Bengisu

Nisa Bengisu

Süleyman Demirel Üniversitesi'nde Bilgisayar Mühendisliği okuyorum. Web tasarımı Front - End kısmıyla ilgileniyorum. Bildiklerimle beraber yeni öğrendiğim konuları mutfakta paylaşıyorum. Siz de yaptığınız çalışmaları, edindiğiniz bilgileri paylaşabilirsiniz.
Yorum alanı ile mutfağa katkıda bulunun.

Yorumlar

4 Yorumlar

Bir yorum yaz

This site uses Akismet to reduce spam. Learn how your comment data is processed.