Yeni neslin küçük devi : Vue.js

Başlığın bu kadar süslü olmasının sebebi beni kendisine hayran bırakan hız, boyut ve esneklik kavramlarına sahip olan mükemmel bir progressive javascript framework'ü olan Vue.js. Bu yazıda edindiğim tecrübelere dayanarak Vue.js yetenekleri ve nedir ne değildir sorularının yanıtını hazırlamaya çalışacağım.

Vue.js Hakkında (Kahramanlıkları, Faydaları)

Vue.js ile küçük orta ve büyük ölçekli projelerinizi hazırlamanız mümkün. Çok basit yapılardan çok karmaşık yapılara kadar tamamı için hem kullanım kolaylığı hem de esneklik sağladığından kendileri sizin için oldukça verimli ve artan popülerliğine istinaden gelişmiş komünitesi ve peşi sıra geliştirilen çokça eklenti ve hazır paketler ile işinizi bir çırpıda çok da emek harcamadan halledebileceğiniz kavramları yetenekleri arasına dahil edebiliriz. Şayet Angular ve React 'e aşinalığınız varsa Vue.js de oldukça benzeşik özelliklere sahip demeniz yanlış olmaz.

Vue.js 'i mevcutta ayakta olan bir projeye kolaylıkla entegre edebileceğiniz gibi, komple bir front-end projesi olarak da kullanabilirsiniz. Core yapısındaki kaynak kod oldukça minimal olması kompleks olan karmaşıklıkları da ortadan kaldırıyor diyebiliriz. Vue core, tamamen view'a odaklı çalıştığından, http request'leri, rooting süreçleri, state management kavramları deneyimlemek istediğiniz de ise, neredeyse "Core içinde yok ? ", "Neden yok yahu keşke bunu da ekleselerdi !" yaklaşımlarına gerek kalmadan core kodlardan sonra, bu pluginleri, de projenize dahil etmeniz gerekecek. Bu eksi mi artı mı o kısım tartışılır ama bence artı, öyle ki; view'a odaklı bir yapıdan bu kavramları ayrı tutmanızı gerektiren şey nesne tabanlı programlama değil mi ?

Tabi burada akla ortaya çıkabilecek handikaplar gelebilir ancak, nasıl ki Apple eko sistemindeki uygulamalar için Apple Store varsa, Vue için de resmi olarak onaylanan bir eklenti dizini var. Vue.js eklenti dizinine github üzerinden şu linkten ulaşabilirsiniz.

Çok daha fazla Vue.js detayı almak isterseniz şurada arkasındaki arkadaşları inceleyebilir, resmi sitede zaman geçirdikten sonra sizde Vue'ye aşık olabilirsiniz.

Neden Vue.js ?

Çünkü Vue, kolay yazılabilir, kolay okunabilir, kolay anlaşılabilir ve reactive bir yapısı var.

• Vue ücretsizdir, ve açık kaynaktır.
• Reaktive bir yapısı vardır, oldukça hafif bir core source koduna sahiptir.
• Development süreci için muazzam bir debug extension'u bulunur. (Henüz safari desteği olmasa da farklı yöntemler ile Safari için de kullanılabilir. Yaktın bizi Safari, ne çektik senden (:)
• En önemlisi ekosistemi inanılmaz geniş, muhteşem bir komünitesi var ve her geçen gün hızla büyüyor, artıyor.

Vue.js Çalışma Mantığı

Aslında, Vue.js içerisinde Virtual Dom barındırır. Virtual Dom'un çalışma mantığını hattırlarsak, kabaca ;

• Sizin modelinizde bir değişiklik olduğunda, gerçek dom'da bu değişiklik yapılmaz.
• Tam da bu durumda, değişiklikler sanal dom üzerindeki yapıda gerçekleşir. Bu durum React.js için de aynı :)
• Asıl aşamada yani bu aşamadan sonraki süreçte sanal dom ile dom üzerindeki değişikliklere bakılır, ve tespit edilen değişiklikler alınarak gerçek dom üzerine eklenirler.

Hal bu şekilde olduğunda değişmeyen kısımlar yok yere güncellenmediğinden bu da bizim performansımıza olumlu yöne getiri sağlar ve bu her zaman kazançtır. Üstte de bahsettiğim reaktivite ve virtual dom kavramları ile alakalı muhteşem bir sunum var, izlemenizi tavsiye ederim.

Chrome için Vue.js DevTools Eklentisi

Beni benden alan en güzel şey... Vue.js geliştiricileri için üretilen bu debug tool inanılmaz iş görüyor. Klasik front-end işlerinde dataları view etmek veya loglamak için alert vb gibi ihtiyaçlıklarınızı artık tamamen alışkanlık olarak sayabilirsiniz. Çünkü bu tool tamamen bunun için var. İşin içine dahil olduğunuzda ne demek istediğimi çok daha iyi anlayacaksınız.

İleriki günlerde sevgili Fatih 'in harika Türkçe Vue.js eğitim serisinden sizin de faydalanarak bir şeyler yaptığınızı göreceğimi dünüyorum.

Şahsen bende Vue ile alakalı örnek uygulamalar paylaşmayı planlarım arasına alıyorum. Görüşmek üzere, şimdiden kolay gelsin.

Kaynaklar : 

• https://fatihacet.com/react-ve-virtual-dom-mimarisi-uzerine/
• https://vuejs.org/v2/guide/