Temel Özellikleriyle VueJS ve ReactJS

By Yaşar Tahir KÖSE, Yavuzhan AYMAK, Zafer ATLI, Ömer AKYOL, Fatih AKBAYRAK, Serkan DOĞANBAŞ

Genel Bakış

VueJS ve ReactJS, modern web uygulaması geliştirmek için kullanılan, JavaScript ile açık kaynak olarak geliştirilmiş yapılardır. VueJS Evan You isimli eski bir Google çalışanı tarafından çıkarılmış ve topluluk tarafından geliştirilmesine devam edilmektedir. Vue.js, komponent tabanlı bir yaklaşım sunar, karmaşık kullanıcı arayüzlerini daha küçük ve yeniden kullanılabilir parçalara böler, böylece geliştirme sürecini kolaylaştırır. ReactJS ise Facebook tarafından çıkarılmış ve topluluk ile geliştirilme süreci devam etmektedir. Hızlı, verimli ve modüler bir şekilde web uygulamaları oluşturmayı sağlayan ReactJS’de esnek ve boyutlandırılabilir geliştirme yaklaşımını baz alır.

React ve Vue, benzer temel işlevsellikleri sunsa da bazı farklılıklar vardır. React, daha özel ve odaklanmış bir kütüphane olarak tanımlanabilir. Komponent tabanlı bir yaklaşım benimser ve temel olarak view katmanını ele alır. Komponentlerin oluşturulması ve yönetimi için birçok güçlü araç sunar. Bununla birlikte, bazı işlevler ve özellikler, üçüncü taraf kütüphaneler veya ek araçlar gerektirebilir. Örneğin, gelişmiş state yönetimi için Redux, yönlendirme için React Router ve UI komponentleri için Material-UI gibi üçüncü taraf kütüphaneler React ile sıkça kullanılır. Bu, projenizin gereksinimlerine bağlı olarak ek kütüphane entegrasyonu gerektirebileceği anlamına gelir. Vue, daha bütünleşik yapıya sahip bir frameworktür ve daha geniş bir işlevsellik sunar. Vue, komponent tabanlı bir yaklaşım benimser. Template, state, fonksiyonlar ve diğer özellikler gibi komponent özelliklerini içerir. Vue, yönlendirme, animasyonlar, form işleme, state yönetimi ve daha birçok özelliği doğrudan framework’ün içinde sunar. Bu, ek araçlara veya kütüphanelere olan ihtiyacı azaltır ve projelerinizde daha hızlı bir başlangıç yapmanızı sağlar.

Vue Temel Özellikleri

Vue Instance: Vue.js uygulamasının temelini oluşturan Vue Instance’ı anlamak önemlidir. Vue Instance, Vue.js ile bir uygulama oluşturmak için kullanılan ana nesnedir. Özellikle, Vue Instance’ın `data`, `methods`, `computed`, `watch`, `lifecycle hooks` gibi önemli özellikleri bulunur.

Template: Vue.js ile bir komponentin kullanıcı arayüzünü tanımlamak için template kullanılır. Template, HTML benzeri bir sözdizimini kullanarak kullanıcı arayüzünün nasıl görüneceğini belirtir. Şablon içinde Vue direktifleri, data binding ve döngüler gibi Vue.js özelliklerini kullanabilirsiniz.

Data Binding: Vue.js’in en güçlü özelliklerinden biri data bindingdir. Data binding, Vue Instance’ın verilerini HTML template ile senkronize etmenizi sağlar. Bu, veri değiştiğinde otomatik olarak kullanıcı arayüzünün güncellenmesini sağlar. Vue.js, one-way ve two-way data binding seçeneklerini destekler.

Component Tabanlı Geliştirme: Vue.js, komponent tabanlı bir yapıya sahiptir. Komponentler, kendi verileri, template ve direktivelerle birlikte bir bütün oluşturan reusable parçalardır. Bu, uygulamanızı küçük ve yönetilebilir parçalara böler ve kodun tekrar kullanılabilirliğini artırır.

Computed Properties: Computed Properties, verilerden türetilen değerlerdir. Vue.js’de computed properties tanımlayarak, verilerinize dayalı hesaplamalar yapabilirsiniz. Computed properties, veri değiştiğinde otomatik olarak yeniden hesaplanır ve kullanıcı arayüzünü günceller.

Watchers: Watchers, belirli bir veriyi izleyen ve onun değişikliklerini takip eden fonksiyonlardır. Vue.js ile watchers tanımlayarak, veri değişikliklerini yakalayarak belirli işlemleri gerçekleştirebilirsiniz. Watchers, verinin eski ve yeni değerlerine erişme yeteneği sağlar.

Conditional Rendering: Vue.js ile conditional rendering yapabilirsiniz. Bu, belirli bir şarta bağlı olarak belirli bir elementin görünüp görünmeyeceğini veya belirli bir template içeriğinin gösterilip gösterilmeyeceğini kontrol etmenizi sağlar. `v-if`, `v-else` ve `v-show` gibi direktifler, conditional rendering için kullanılır.

List Rendering: Vue.js ile bir dizi üzerinde döngü oluşturarak liste veya tablo gibi yapıları oluşturabilirsiniz. `v-for` direktifi, bir dizi veya nesne üzerinde döngü oluşturmanıza ve her öğe için dinamik olarak elementi oluşturmanıza olanak tanır.

Events: Vue.js ile kullanıcı etkileşimlerini ele almak için events kullanabilirsiniz. Vue.js, event listener ve olaylara tepki vermek için directiveler sağlar. Örneğin, `v-on` direktifi ile bir olayı dinleyebilir ve bir fonksiyonu tetikleyebilirsiniz.,

Routing: Vue.js ile tek sayfalık uygulamalarda (SPA) yönlendirme işlemlerini kolayca yönetebilirsiniz. Vue Router, farklı sayfalar arasında gezinme, URL parametreleri, dinamik route ve diğer yönlendirme işlemlerini sağlar.

React’ın Temel Özellikleri

React’ın temel felsefesi, UI’yi bir fonksiyon gibi düşünmek ve bu fonksiyonun girişine göre çıktıyı oluşturmaktır. Her komponent, belirli bir state i temsil eder ve state değiştikçe komponentler rerender olur. Böylece, sadece değişen kısımlar güncellenir ve performans artar.

React, JSX adı verilen bir sözdizimini kullanır. JSX, JavaScript ve HTML benzeri bir dilin birleşimidir. Bu, React komponentlerini tanımlarken HTML benzeri yapıları kullanabilmenizi sağlar. JSX, React komponentlerini oluşturmak için bir araçtır ve bu yapıları daha sonra JavaScript koduna dönüştürülür.

React’ın bir diğer önemli özelliği, Virtual DOM kullanmasıdır. Gerçek DOM, HTML belgesinin bir temsilidir ve web tarayıcısı tarafından doğrudan işlenir. Ancak, DOM manipülasyonları yavaş olabilir ve performans sorunlarına neden olabilir. Bu nedenle, React, virtual DOM adı verilen bir ara katman kullanır. virtual DOM, real DOM’a benzer bir ağaç yapısıdır ve React komponentlerindeki değişiklikleri takip eder. React, komponentlerdeki değişiklikleri algıladığında, virtual DOM üzerinde bu değişiklikleri uygular ve ardından real DOM ile karşılaştırarak sadece farkları günceller. Bu şekilde, yalnızca değişen komponentlerin rerender edilmesi ve güncellenmesi gerektiğinden performans iyileşir.

Props: Props, bir komponente dışarıdan geçirilen verilerdir. Bir komponente property ataması yapmak için kullanılırlar ve genellikle parent komponentten child komponente data taşımak için kullanılır.

State: State, bir komponentin iç state ini tutan ve yöneten bir özelliktir. State, komponentin başlangıç state ini ve zaman içindeki değişikliklerini temsil eder. State güncellendikçe, React otomatik olarak komponenti yeniden render eder.

Lifecycle Methods: React komponentleri, yaşam döngüsü hookları aracılığıyla belli aşamalarda belirli kodları çalıştırabilir. Örneğin, bir komponent oluşturulduğunda (componentDidMount) veya güncellendiğinde (componentDidUpdate) belirli işlemler gerçekleştirilebilir.

Event Handling: React, kullanıcı etkileşimlerini ele almak için event handling yeteneklerine sahiptir. Örneğin, bir düğmeye tıklandığında belirli bir işlevi çalıştırmak için event handlers kullanılır.

Conditional Rendering: Komponentlerin belirli koşullara bağlı olarak farklı çıktılar üretebilmesi için conditional rendering kullanılır. Örneğin, bir ifade doğru ise bir içeriği göstermek veya gizlemek için kullanılır.

Lists and Keys: React, dinamik olarak listeler oluşturmanızı ve yönetmenizi sağlar. Liste elemanlarına benzersiz anahtarlar atamak, verimli bir yeniden düzenleme işlemi için önemlidir.
-Forms: React, kullanıcı girişi ve form işlemlerini yönetmek için form komponentleri sunar. Bu komponentler, kullanıcıdan giriş almayı, doğrulamayı ve göndermeyi kolaylaştırır.

Hooks: Hooks, React 16.8 sürümüyle tanıtılan fonksiyonel komponentlere ek özellikler ekleyen API’lerdir. useState, useEffect, useContext gibi önceden tanımlanmış kancaları (hooks) kullanarak komponentlerde state yönetimi, yan etkiler ve diğer özellikler sağlanabilir.

Context API: Context API, komponentler arasında verileri paylaşmak için kullanılan bir React özelliğidir. Bir üst komponentte tanımlanan bir bağlam (context), içerisindeki alt komponentler tarafından erişilebilir ve güncellenebilir.

Redux: Redux, React uygulamalarında state yönetimini kolaylaştıran bir state yönetim kütüphanesidir. Redux, tek bir state tree kullanır ve komponentlerin bu state i okuması ve güncellemesi için actions ve reducers kullanır.

React Router: React Router, tek sayfalık uygulamalarda gezinme ve yönlendirme işlemlerini yönetmek için kullanılan bir kütüphanedir. Farklı URL routeları arasında geçiş yapmayı sağlar ve komponentlerin belirli routelara göre görüntülenmesini sağlar.

Styling: React uygulamalarında komponentlerin stilini tanımlamak için farklı yaklaşımlar vardır. CSS dosyalarını doğrudan kullanmak, CSS modülleri, CSS-in-JS kütüphaneleri (örneğin, styled-components) ve UI kitleri (örneğin, Material-UI) gibi farklı stil fonksiyonları kullanılabilir.

React Native: React Native, mobil uygulamaların geliştirilmesi için kullanılan bir frameworktür. React Native, React’e dayanır ve JavaScript kullanarak iOS ve Android için doğal mobil uygulamalar oluşturmayı sağlar.

Error Handling: React uygulamalarında error handling önemlidir. Hataları yakalamak ve kullanıcıya uygun geri bildirimler sağlamak için error boundaries ve error handlers gibi mekanizmalar kullanılır.

React ve Vue Arasındaki Temel Farklar

React ve Vue, farklı sözdizimler ve yaklaşımlar kullanır. React, JSX adı verilen bir sözdizimini kullanır. JSX, JavaScript ve HTML’i birleştirerek komponentleri oluşturmayı sağlar. React, komponent tabanlı bir yaklaşım benimser ve her bir komponent, props ve state gibi veri kaynaklarıyla çalışır. Vue ise HTML benzeri bir template sözdizimine sahiptir. Template, HTML görünümünü tanımlamak için kullanılır. Vue da komponent tabanlı bir yaklaşıma sahiptir ve her bir komponent, template’i, state’i, fonksiyonları ve diğer özellikleri içerir. 2 way data binding gücü sayesinde Vue form yönetimi bakımından oldukça elini güçlendirmesine karşın React bu eksikliğini çeşitli eklentilerle kapatmaya çalışmaktadır.

React ve Vue, farklı öğrenme eğrilerine sahiptir. React, daha fazla JavaScript bilgisi gerektirebilir ve JSX kullanımı, komponent life cycle hookları gibi bazı özel kavramları içerir. Bu, başlangıçta daha dik bir öğrenme eğrisi anlamına gelebilir, ancak bir kez anlaşıldığında güçlü bir esneklik sağlar. Vue, daha basit bir API ve template söz dizimiyle giriş seviyesi kullanıcılar için daha hızlı öğrenilebilir olabilir. Vue’nun dökümantasyon ve topluluk desteği de genellikle başlangıç aşamasında daha kullanıcı dostudur.

React ve Vue, her ikisi de büyük ve aktif topluluklara sahiptir. Ancak, React, uzun bir süredir kullanıldığı için daha büyük bir topluluğa sahiptir. Bu, daha fazla kaynak, eğitim ve sorun giderme yardımı sağlar. Ayrıca, birçok üçüncü taraf kütüphane ve araç ile React, daha geniş bir ekosisteme sahiptir. Vue de aktif bir topluluğa sahiptir ve büyümeye devam etmektedir, ancak React kadar büyük bir topluluğa sahip değildir. Vue’nun ekosistemi, birçok kullanışlı eklenti ve kütüphaneyle desteklenir, ancak React kadar geniş değildir.

Nuxt.js nedir?

Nuxt.js, geliştiricilerin evrensel Vue.js uygulamaları oluşturmasını kolaylaştırmak için oluşturulmuş bir çerçevedir. Geliştiriciler, Nuxt.js ile JavaScript , HTML ve CSS’yi istemci tarafında bir araya getirerek zamandan tasarruf sağlar ve birden çok dosya ihtiyacını ortadan kaldırır. Ayrıca Nuxt.js, uygulama durumunu yönetmek için Vuex’i ve sunucudaki sayfaları önceden işlemek için özel SSR kancalarını kullanır. Bu, geliştiricilerin karmaşık kod tabanı yönetimi konusunda endişelenmeden yüksek kaliteli, etkileşimli uygulamalar oluşturmasını kolaylaştırır.

Nuxt.js’in Artı ve Eksi Yönleri

Nuxt.js’nin Avantajları

- Öğrenmesi kolay — Nuxt.js’yi öğrenmesi (nispeten) kolaydır. Vue ve buna bağlı olarak Nuxt, geliştirme topluluğu arasında öğrenmesi “en kolay” JavaScript çerçevesi olarak bilinir — özellikle React veya Angular ile karşılaştırıldığında.

- Sunucu tarafı işleme yetenekleri sayesinde uygulama performansını artırır

- Nuxt.js, geliştiricilerin hızlı derleme yapmasına olanak tanıyarak onu MVP oluşturmak için ideal bir çerçeve haline getirir

Nuxtjs’in Dezavantajları

- Google Haritalar, takvim vb. gibi bazı yararlı eklentilerden yoksundur.

- Yüksek uygulama trafiği sunucuyu zorlayabilir

- Yetersiz Dökümantasyon

- Vue topluluğu, React ve Next’ten önemli ölçüde daha küçüktür, bu nedenle çerçeveyle ilgili sorunların ve hataların çözülmesi daha yavaştır

Next.js Nedir?

Next.js, Vercel (eski adıyla Zeit) tarafından oluşturulan, sunucu tarafından oluşturulan React uygulamaları için minimalist bir çerçevedir . Next.js, Node.js ile paketlenmiş olarak gelir ve React uygulamalarınız için sunucu tarafı işlemeyi hallederek uygulamalarınıza özel bir görünüm ve his eklemeyi kolaylaştırır. Ayrıca, genişletmeyi ve özelleştirmeyi kolaylaştıran son derece modüler bir mimariye sahiptir.

Bu, Next.js’yi uygulamalarınızda kullanılabilecek özel bileşenler veya modüller oluşturmak için mükemmel kılar. Ek olarak, önceden oluşturulmuş HTML dosyalarını sunucuda depolayarak uygulamanızın daha hızlı yüklenmesini sağlar. Buna karşılık, bu, kullanıcı deneyimini iyileştirmenin yanı sıra web sitenizin arama motorlarındaki sıralamasını iyileştirir.

Next.js’nin Artı ve Eksi Yönleri

Next.js’nin Avantajları:

- Kod bölme ve yavaş yükleme sayesinde hızlı performans sunar

- Bir uygulamanın SEO’sunu ve kullanıcı deneyimini iyileştirerek daha fazla trafik ve daha iyi bir dönüşüm oranı sağlar

- Next.js web uygulamalarına her platformdan erişilebilir

- Sorun gidermede yardımcı olabilecek sağlam bir kullanıcı topluluğuna sahiptir

- Kenar oluşturma, A/B testi ve arka uç işlevlerine yerel maruz kalma gibi harika şeyler yapabilen bir ortamla Vercel tarafından desteklenir.

Next.js’nin Dezavantajları

- Next.js’nin dahili bir state management yoktur. Redux ve Mobx gibi state management uygulamanıza dahil etmelisiniz.

- Next.js tarafından sunulan çok yönlülük, sürekli bakıma ihtiyaç duyacağınız anlamına gelir. Bu nedenle, herhangi bir ayarlamayı halletmek için kurum içi veya özel bir geliştiriciye sahip olmanız gerekir.

- Birkaç eklentiye sahiptir

Nuxt ve Next.js Arasındaki Benzerlikler

- Hem Nuxt.js SSR hem de Next.js SSR, sunucu taraflı oluşturma sürecinde HTML içeriği oluşturup tarayıcılara gönderirken SSR desteği sağlarlar.

- Her ikisi de modern web uygulamaları için gelişmiş özellikler ve yapılandırma seçenekleri sunarlar.

- SSR sayesinde SEO dostu ve daha hızlı yükleme sürelerine sahip web siteleri oluşturmak için kullanılabilirler.

Nuxt ve Next.js Arasındaki Farklar

Nuxt.js:

- Vue.js tabanlı, dosya düzeni klasör tabanlı.

- Başlangıçta daha fazla ön yapılandırılmış özellik ve kolay çoklu dil desteği sunar.

- Vue.js ekosistemine odaklanır.

Next.js:

- React tabanlı, dosya düzeni sayfa bazlı.

- Esnek yapı, projelere özelleştirme imkânı sunar.

- React ekosistemine odaklanır.

En Basit Hali İle Syntax Farkları

Aşağıda en basit haliyle Reacj.js ve Vue.js ait bir button componenti ve onu içeren uygulama yapısı mevcuttur.

React.js Syntax

function MyButton ({onPress}){
  return (
   <button onPress= {onPress}>
Arttır
   </button>
);
}

export default function MyApp() {
      const [counter, setCounter]= useState (0);  
      const handleOnPress = () => setCounter (counter +1);
      return(
         <div>
            <h1>Sayı:{counter}</h1>
            <MyButton onPress={handleOnPress} />
         </div>
      );
}

Vue.js Syntax

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>
<template>
<h1>Sayı: {{ count }}</h1>
<button @click="count++">Arttır</button>
</template>

En Basit Hali Folder Structure Yapıları

React.js Folder Structure

Vue.js Folder Structure

Performans Karşılaştırması

Performans testleri yapılırken dikkate alınan değerlendirme kriterleri:

• Create Rows: Sayfa yüklendikten sonra 1000 satır veriyi oluşturma süresi.
• Replace All Rows: Tablodaki 1000 veriyi değiştirme süresi.
• Partial Update: 10.000 satırlık bir veri kümesindeki her 10. veriyi güncelleme süresi.
• Select Row: Satıra tıklandıktan sonraki cevap verme süresi.
• Swap Rows: 1.000 satırlık tablodan 2 satırı değiştirme süresi.
• Remove Row: 1.000 satırlık tablodan tek satırı silme süresi.
• Create Many Rows: 10.000 satır oluşturma süresi.
• Append Rows to Large Table: 10.000 satırlık tabloya 1.000 satırlık veri eklenme süresi.
• Clear Rows: 10.000 satırlık tablonun silinme süresi.
• Ready Memory: Sayfa yüklendikten sonraki Bellek kullanımı.
• Run Memory: 1.000 satır eklendikten sonraki Bellek Kullanımı.
• Update Memory: 1.000 satırlık tablonun 5 defa update edilmesi sonrası Bellek Kullanımı.
• Replace Memory: 1.000 satırlık verinin 5 defa oluşturulması sonrası Bellek kullanımı.
• Replace Clear Memory: 1.000 satırlık verinin 5 defa oluşturulması ve sonrasında silinmesi sonucu Bellek kullanımı.
• Startup Time: Javascript kodu ve sayfanın hazırlanıp yüklenme süresi.
• Consistently Interactive: TTI verisini hesaplar. TTI sayfa yüklendikten sonrasında kullanıcının etkileşimine cevap vermeye hazır olana kadar ki süreyi kapsar.
• Script Bootup Time: Sayfa üzerinde bulunan tüm scriptlerin yüklenme süresi.
• Main Thread Work Cost: Sitenin ana işlevlerini yerine getirme süresindeki harcadığı zaman.
• Total Byte Weight: Sayfa yüklenirken ki toplam harcanan ağ trafiği kaynağıdır.

Bu değerlendirmeler sonucu yapılan testin sonuçları aşağıdaki gibidir:

Sonuçlardan görüleceği üzere Vue belirlenen javascript işlemlerinin yapılmasında açık ara öndedir. Fakat bu sonuçlar basit javascript işlemleri için yapılan karşılaştırmalar olduğu için çok fazla paketin bulunduğu ürün (Production) ortamlarında farklı sonuçlar verebilmektedir.

Son Ekler

Stackoverflow 2022 anket sonuçlarına göre React’ın piyasayı domine ettiği ve küresel çapta en yaygın kullanılan framework olduğu açıkça görülmektedir. Bununla beraber Vue de azımsanamayacak düzeyde bir kullanım oranına sahiptir.

( https://survey.stackoverflow.co/2022/#most-popular-technologies-webframe-prof )

Yine HackerRank raporuna göre de React yeteneği arayan firmaların artış eğiliminde olduğu anlaşılmaktadır. Bu açıdan Vue henüz yolun başında görünmektedir.

( https://info.hackerrank.com/rs/487-WAY-049/images/Developer%20Skills%20Report%202023.pdf )

React, büyük ölçekli ve karmaşık uygulamaları yönetmek için daha fazla esneklik ve özelleştirme seçenekleri sunar. Redux gibi state yönetimi kütüphaneleri ve bir dizi üçüncü taraf araç ile React, büyük projelerde daha iyi ölçeklenebilirlik sağlayabilir. Vue ise daha küçük ve orta ölçekli projelerde kolayca uygulanabilir ve daha hızlı başlangıç imkanı sunabilir.

Bu yazı Rise Technology Reactive Team tarafından hazırlamıştır.