Gea.js Kapsamlı Rehberi: Virtual DOM'u Tarihe Gömüp 'Sadece JavaScript' Yazan Yeni Nesil Framework

Modern web geliştirme dünyasında, her yıl yeni bir “devrimsel” framework duyuruluyor. React, Vue, Svelte, Solid derken frontend geliştiricileri olarak sürekli yeni sözdizimleri (syntax), yeni bağımlılık döngüleri (hooks, dependency arrays) ve derleyici kuralları öğrenmek zorunda kalıyoruz.

Peki ya size, bildiğiniz düz JavaScript yazarak, üstelik hiçbir Virtual DOM (VDOM) ve diffing maliyeti ödemeden reaktif ve state barındıran kompleks arayüzler inşa edebileceğiniz bir yol var desem?

Karşınızda, Armağan Amcalar (@dashersw) tarafından geliştirilen ve “Build-time” JSX dönüşümleri ile Proxy mimarisinin eşsiz bir sentezini sunan, dahili router ve state yönetimiyle (batteries-included) yalnızca ~13 KB boyutundaki yepyeni framework: Gea.js!

Bu uzun ve detaylı rehberimizde Gea.js’i sadece yüzeysel olarak tanıtmakla kalmayacak; kaputun altına girerek Vite derleme eklentisinin nasıl çalıştığına, Proxy ağaçlarının arka planda nasıl organize edildiğine ve projelerinizde VDOM mantığını nasıl tamamen oyun dışı bıraktığına satır satır şahitlik edeceğiz.

1. Gea.js Nedir ve Neden Varlığına İhtiyacımız Var? 🤔

Uzun yıllardır React ekosistemi, Virtual DOM’un (sanal DOM) yavaşlığını memoization (useMemo, useCallback) gibi geliştirici eforu isteyen kaçış yollarıyla gizlemeye çalışıyor. Svelte ve Solid gibi yapılar ise direkt DOM güncellemelerine yönelseler de kendi derleyici “büyüleriyle” veya özel Signal sentakslarıyla kodumuzu saf JavaScript’ten uzaklaştırıyorlar.

Gea.js’in savunduğu temel felsefe şudur: “Framework size yeni bir programlama modeli dayatmamalıdır.” Yani Gea’da:

• Sinyaller (signals) yok.
• Bağımlılık (dependency) array’leri, useEffect, useState yok.
• Şablonlar (Vue v-if, v-for gibi template dili yönlendirmeleri) yok.
• Karmaşık Redux-benzeri state/reducer mimarileri yok.

Yalnızca düz Sınıflar (Classes), Nesneler (Objects), Fonksiyonlar (Functions) ve Getter’lar var. Gea, siz sıradan Vanilla JS kodunuzu yazarken, derleme zamanındaki (compile-time) analizleri ve ES6 Proxy nesnelerini kullanarak yazılanları reaktif hale dönüştürür.

2. Kaputun Altı: Gea’nın Kalbi “Store” ve Proxy Mimarisi 🫀

Gea’nın benzersiz özelliklerinden biri dahili bir State Management çözümünün bizzat core mimarisinde olmasıdır. @geajs/core paketindeki Store sınıfının kaputun altında neler yaptığına beraber bakalım:

Gea mimarisinde Store, tüm state’i tutan bildiğimiz düz bir TS/JS Class’ıdır. Ancak Store objesi örneklendiğinde (instantiate), Gea bu objeyi iç içe geçmiş (recursive) derin bir Proxy ağıyla sarar.

// Basit bir örnek store tanımlaması
import { Store } from '@geajs/core'

class TodoStore extends Store {
  todos = []
  loading = false

  // State'i değiştiren düz bir metot
  addTodo(text) {
    this.todos.push({ text, done: false })
  }

  // Sadece get kullanarak oluşturulan Computed Property!
  get completedTodos() {
    return this.todos.filter(t => t.done).length
  }
}

export default new TodoStore()

Koda bakıldığında hiçbir reaktivite yokmuş gibi duruyor, peki arkada ne oluyor?

Proxy Trap ve Mikrogörevler (Microtasks)

Kaynak kodlarında, Store sınıfı diziler (arrays) için inanılmaz optimizasyonlara sahiptir. Örneğin this.todos.push(...) çağırdığınızda:

1. Normalde Vanilla JS’de Array metotları objeyi mutasyona uğratır ancak izlemesi zordur. Gea.js kaynak kodunda (Store sınıfı _interceptArrayMethod metodu ile), push, splice gibi Array prototiplerinin “intercept” edildiğini görürüz.
2. Değişiklik yaptığınız an Gea bir StoreChange sinyali (type: 'append', type: 'add') yayınlar. Fakat hemen DOM güncellemesine gitmez!
3. Olayları toplu işlemek için bir queueMicrotask başlatılır. Siz aynı senkron kod bloğunda diziyi veya objeyi 50 kere güncelleseniz dahi, Gea bu değişiklikleri toplar (batching) ve call-stack boşaldığı an yalnızca tek bir noktadan DOM güncellemesini tetikler.

Computed Mimarisi Sadece “Getters”

get completedTodos() bloğunu gördünüz mü? Gea.js Vite eklentisi build adımında (store-getter-analysis.ts) bu getter’ın hangi this.todos değişkenine bağımlı olduğunu otomatik AST (Abstract Syntax Tree) taramasıyla bulur. Dolayısıyla listeye ekleme yapıldığında completedTodos un otomatik güncelleneceğini derleme anında anlar.

Çapraz Store (Cross-Store) Okumalar ve Sessiz (Silent) Mutasyonlar

Gea devasa Redux “Selector” yapılarına ihtiyaç duymaz. Store’lar birer Singleton (tekil nesne) olduğu için, bir mağazadaki (Store) getter, özgürce başka bir mağazadan veri okuyabilir: Örn: get totalPrice() { return optionsStore.seatPrice + paymentStore.tax }

Aynı zamanda çok yoğun arayüz (drag-and-drop, canvas çizimleri vb.) işlerinde DOM’u gereksiz meşgul etmemek için store.silent(() => { ... }) bloğu hayat kurtarır. Bu fonksiyonun içindeki hiçbir veri değişimi reaktif olarak yayınlanmaz; arka planda sessizce veriyi manipüle ederken DOM’a dokundurulmaz.

3. Derleme Zamanı (Build-Time) Büyüsü: Virtual DOM Cidden Yok mu? 🪄

Gea’nın iddialı olduğu yer VDOM eksikliğidir. Peki JSX kullanıp nasıl VDOM’dan kaçıyor? Sırrı: vite-plugin-gea eklentisinde!

Projenizde yazdığınız JSX kodu tarayıcıya hiçbir zaman React tarzı React.createElement(...) yuva yapısı olarak gönderilmez. Gea’nın Vite / Babel entegrasyonu derleme (build) sırasında JSX’inizi inceleyerek, tamamen optimize native DOM çağrılarına (document.createElement, .addEventListener) dönüştürür.

Adım Adım Çalışma Mantığı:

1. Yazdığınız JSX bloğu Babel Traverse ile taranır. Eklenti statik HTML yapıları ile değişken değerleri ({store.count}) birbirinden ayırır.
2. Derlenen kod, tarayıcıda doğrudan statik bir DOM bloğu oluşturur ve değişken parçaları önceden işaretler.
3. State değiştiğinde, Gea Virtual DOM ağaçlarını birbiriyle (diffing) kıyaslamaz. Hangi değişkenin DOM’un tam olarak neresine (surgical patch) temas ettiğini bilir ve anında sadece oradaki textNode.textContent değerini değiştirir.

Akıllı Liste Güncellemeleri (applyListChanges)

Listenizi .map() ile dönerken key prop’u verdiğinizde Gea, listeye ekleme (Append), silme (Delete) veya sıralamayı değiştirme (Reorder/Swap) durumlarında meşhur applyListChanges algoritmasını çalıştırır. Bütün HTML listesini yeniden basmak yerine sadece değişen spesifik DOM düğümünü yerinden oynatır. Değişmeyen elemanlar milisaniyelik bir gecikme bile yaşamaz.

Direkt DOM Referansları (Goodbye useRef)

React’te meşhur olan useRef ve .current atamaları da yok. Doğrudan ref={this.canvasEl} yazıp, komponentin onAfterRender() (veya onAfterRenderAsync()) lifecycle anında direkt native HTML elemanını manipüle edebilirsiniz. Kök elemente ise doğrudan this.el ile erişmek kod karmaşasını sıfıra indirir.

Gizli “Web Components” Dönüşümü (Custom Elements)

Yazdığınız JSX kodunda <TodoItem /> gibi “PascalCase” isimlendirilmiş bir bileşen kullandığınızda, Gea arka planda bunu standart tarayıcı uyumlu “kebab-case” native web bileşenlerine (örn: <todo-item data-prop-...>) dönüştürür. Hatta HTML standart etiketleriyle çakışma olursa otomatik <gea-link> şeklinde önek takar. Framework aslında Web Components standardının tüm native DOM nimetlerini siz ruhunuz bile duymadan sömürerek performansı katlar!

CSS Objelerinde Sıfır “Runtime” Yükü

React’te style= yazarsanız bu obje her render anında yeniden hesaplanıp tarayıcıya basılır. Gea’nın build-time derleyicisi ise bu tarz statik stil objelerini gördüğü an devasa bir zeka göstererek derleme anında doğrudan statik CSS metnine (style="background-color: red;") çevirir. Stil bağlamada bile “Sıfır Çalışma Zamanı Maliyeti” (Zero Runtime Cost) hedeflenmiştir.

Fonksiyon Bileşenlerinden (Function Components) Sınıflara Zaman Yolculuğu

Düz fonksiyon olarak yazdığınız, içinde hiçbir lifecycle hook barındırmayan saf component’ler, Gea tarafından build adımında alınıp class Component extends Store yapısına (convertFunctionalToClass metodu içinde) otomatik modifiye edilir!

Yani siz temiz bir şekilde fonksiyonel stil yazarsınız, ancak browser’da çalışan kod OOP class tabanlı ve super-optimize yaşam döngülerine (lifecycle) sahip bir nesnedir.

4. Modern Component Mimarisinin Çöken Tabuları 🏗️

React ve Vue yazarken en dikkat ettiğiniz şey nedir? Ebeveyn (parent) komponentten, çocuğa (child) prop atarken; alt component prop objesinin içindeki veriyi asla değiştiremezdi (One-way data flow yasası). Değiştirmek isterseniz event (emit) ya da callback yollamanız gerekliydi.

Gea’da ise olay mükemmel bir ahenge sahiptir: Props (Objeler ve Diziler) İki Yönlüdür (Two-Way)!

Gea bir Store Objesi parent’dan child proptan aktarıldığında, objenin referans değerini kopyalamak yerine bizzat ebeveynin reaktif izleyicisini (Deep Proxy’sini) gönderir. Eğer Child Component bu objenin içindeki bir değeri (this.props.user.name = 'Ahmet') şeklinde normal JS mutasyonuyla değiştirirse, Gea anında user.namei dinleyen parent komponenti de günceller. Özel bir bildirim, callback vs. göndermenize hiç gerek kalmaz!

Her Komponent Aslında Bir “Store”dur!

Gea.js kök kütüphanesini incelediğimizde class Component extends Store tanımlamasını görüyoruz. Bu mimari harikası sayesinde, oluşturduğunuz her bir komponent zaten kendi içinde reaktif bir Store’dur. Lokal state yönetmek için useState ya da ekstra bir yapı kurmanıza gerek kalmaz; class içinde sadece this.acikMi = true yazdığınız an komponentin lokal state’i doğrudan reaktif olarak güncellenir.

jQuery’nin Özlenen Pratikliği: this.$() ve this.$$()

Komponent içindeki spesifik bir DOM nesnesine direkt manipülasyon yapmak isterseniz (örneğin bir input nesnesine focus verdirtmek için), React’teki gibi can sıkıcı useRef atamalarıyla uğraşmanıza gerek yok. Geliştirici deneyimini en üstte tutan Gea sınıfı, size this.$('input') ve this.$$('.item') yerleşik metotlarını sunar. Üstelik bu seçiciler global DOM’da değil, tamamen sadece o komponentin kendi DOM sınırları (root scope) içinde nokta atışı arama yapar!

Sade Yaşam Döngüsü (Lifecycle) Metotları

Bir framework öğrenirken genelde en can sıkıcı şey karmaşık lifecycle sistemidir. Gea bu dertten de sıyrılarak akıla direkt hitap eden üç-dört metot sunar:

• created(props): Komponent bellekte ilk kez var edildiğinde çalışır.
• onAfterRender(): Komponent fiziksel olarak DOM’a basıldığı saniye asenkron tetiklenir.
• onAfterRenderAsync(): DOM ölçümleri (getBoundingClientRect) veya ağır canvas çizimleri yapacaksanız ana ipliği (main thread) kitlememeniz için, tarayıcının bir sonraki kareyi çizmesini (requestAnimationFrame) bekleyen performans ve akıcılık odaklı bu özel yaşam döngüsü kullanılır.
• dispose(): Komponent hayatını tamamlayıp DOM’dan silindiğinde temizlik amaçlı çalışır.

Tüm bu gücün yanında JSX yazarken de React’teki className saçmalığı tamamen tarihe karışmıştır. Doğrudan Native HTML standardı olan class="..." attribute’unu kallanabilirsiniz ve eventleri onClick yerine tamamen standart HTML küçük harfleriyle (click={this.add}, input={this.change}) verebilirsiniz.

5. Dahili Router: Provider Yok, Hook Yok, “TypeScript Generics” Şovu Var! 🗺️

Tüm bir framework ~13 KB gzipped dedik. Buna tüm yönlendirmeleri çözen SPA Router modülü dahi dahil!

React için react-router-dom, Vue için vue-router kurup devasa Context Provider’lar oluşturmanız gerekirken Gea, felsefik olarak aşırı yalındır: Router sadece standart bir Store nesnesidir! Hiçbir Provider sarmalına veya useRouter benzeri karmaşık hook’lara ihtiyacınız yoktur; state’i okumak için sadece router.path, yönlendirmek için router.push('/rota') çağırmanız yeterlidir.

Sıfır “Codegen”, %100 Tip Güvenliği (Type Safety)

TypeScript ile çalışırken routing tiplerini ve parametreleri senkronize tutmak hep bir baş ağrısıdır. Gea, createRouter tanımınızın sonuna sadece as const eklemenizle bütün Layout ve Parametre tiplerini kusursuz bir şekilde (InferRouteProps ile) çıkarır. Üstelik direkt string içinden özel bir tip çıkarmak isterseniz type Route = ExtractParams<'/users/:userId/posts/:postId'> yazmanız yeterlidir; derleyici size anında { userId: string; postId: string } objesini dönerek güçlü bir TypeScript şovu yapar. Kod üretim aracı (codegen) kurmanıza gerek kalmadan, alt rotalardaki parametreler bileşenlerinizin props ağacına tam destekle yansır.

Tam Otomatik “Lazy-Loading” (Bant Genişliği Tasarrufu) ve Hata Yakalama

Kullanıcı “Ayarlar” sayfasına hiç girmeyecekse neden gereksiz yere Settings.js kodlarını en baştan indirsin? Gea ile route konfigürasyonunuza bileşeni direkt vermek yerine () => import('./views/Settings') yazar geçersiniz. Sistem bu sayfayı otomatik Code-Splitting ile böler ve tıklandığı an indirir. Eğer kullanıcının interneti tam o saniye koparsa veya dosya inemezse uygulama çökmez; Gea anında merkezi router.error durumunu reaktif olarak tetikler ve nazikçe bir uyarı göstermenize ortam hazırlar.

Harika “Query-Mode” Layout Sistemi

SPA’larda genellikle sekme (Tab) bazlı (/settings?view=billing) arayüzler kurmak derttir. Gea Router, standart “Path-Mode” dışında bir de “Query-Mode Layout” sunar. Eğer bir rotayı “Query” modunda bağlarsanız, Layout komponentiniz arka planda otomatik olarak activeKey, keys ve navigate özellikleri ile donatılır. Sayfayı hiç yenilemeden, sadece URL parametresini tetikleyerek mükemmel sekme arayüzlerini anında inşa edersiniz.

Pratik ve Esnek Guard’lar

Sayfa koruma (Guards) mekanizması çok basittir. Yönlendirme (Routes) konfigürasyonunuza vereceğiniz ufak bir “guard” metodu, kullanıcı giriş yapmamışsa anında redirect atabilir; ya da daha havalısı, URL’yi hiç değiştirmeden araya “İki Faktörlü Doğrulama” gibi anlık arayüz UI engelleyicileri sokarak süreci pürüzsüz yönetmenizi sağlar.

“Kırılmayan” ve Akıllı Bileşeni

SPA yazarken en gıcık durumlardan biri kullanıcının bir iç linke Ctrl + Click yapıp yeni sekmede açmak istemesi, ancak Javascript yönlendiricisinin bunu zorla aynı sayfada açmasıdır. Gea’nın yerleşik <Link> bileşeni inanılmaz zekidir; modifier tuşlarını (ctrl, shift, meta), harici linkleri (https://) ve sağ tıklama olaylarını mükemmel algılar ve native HTML standart davranışlarını asla ezmez.

6. Birbiriyle Bağlı Dev Ekosistem: UI ve Mobile 📱

Geliştiricilerin UI bileşenlerini sıfırdan yapma yükü Gea ekibinin gözünden kaçmamış:

• @geajs/ui: Tamamen Zag.js entegre edilerek (arka planda durum makineleri kullanan) Dropdown, Modal, Tooltip vb. tüm Headless (kendi tasarımınızı uygulayabildiğiniz saf) erişilebilir bileşenler sunuluyor. Yani siz sadece CSS sınırlarını çiziyorsunuz, mantığı Gea hallediyor.
• @geajs/mobile (Native Hisli PWA’lar ve Mobil Desteler): Projeniz bir PWA (Progressive Web App) ise saf mobil uygulama hissini vermelidir. Sadece bu paketi projeye dahil ederek devasa bir ViewManager sınıfına kavuşursunuz. Artık sayfalar arası düz URL ile değil; fiziksel bir kart destesi gibi ilerlersiniz (this.vm.pull(YeniGorunum, true)). Geri dönmek istediğinizde this.vm.push() ile o meşhur iOS tarzı geçiş animasyonlarını tetikleyerek üstteki ekranı “swipe” edip kapatırsınız. PWA destenizin içinde Sidebar, TabView, PullToRefresh (Aşağı çekip sayfayı yenileme) ve InfiniteScroll modülleri tamamen native hisle hazır gelir. Ayrıca JSX içine yerleşik jest (gesture) desteklerini doğrudan tap={fn}, swipeRight={fn} HTML özelliği olarak atamak benzersiz bir kolaylıktır!

7. React ve Vue’ya Karşı: “Zihinsel Yük” (Mental Overhead) Savaşı 🧠

Gea’nın proje deposundaki (repository) detaylı React ve Vue kıyaslama dokümanlarını incelediğimizde, ortada felsefi bir başkaldırı olduğunu çok net görebiliriz:

React’in Zihinsel Yükü: React yazarken JavaScript’ten ziyade yeni bir “React Dili” ve kurallar silsilesi öğrenmek zorundasınız. Hook kuralları (if-bloğu içinde çağıramama, zorunlu sıralama), bağımlılık dizileri (dependency arrays), stale closure (kapanışların eski state’i yakalaması) bug’ları ve bitmek bilmeyen useMemo, useCallback ezberleri… Tüm bunlar aslında React’in Virtual DOM yapısındaki render tetiklenmelerini (overhead) kompanse etmek için geliştiricinin sırtına yüklenen icat edilmiş konseptlerdir. Gea’da ise bu kuralların hiçbiri yoktur, çünkü native JS fonksiyonları ve saf sınıflar çalışır.

Vue’nun Zihinsel Yükü: Vue, Proxy kullanarak işleri toparlasa da geliştiriciye devasa bir API yüzeyi (“Surface area”) sunar. Değişken bağlarken Options API mi Composition API mi kullanmalısınız? ref mi yoksa reactive mi seçmelisiniz? Eğer ref kullandıysanız JS tarafında sonuna sürekli .value yazmayı unutursanız kod patlar. HTML dosyasında ise v-if, v-for, v-model gibi tamamen yeni bir Vue dili (DSL) öğrenmelisiniz. Gea’da ise kafa karışıklığı sıfırdır; state doğrudan class property’sidir (this.sayac = 5 dersiniz biter) ve HTML içinde sadece Vanilla JS özellikleri kullanılır (Koşullar için && operatörü, döngüler için .map()).

Özetle Gea, framework’lerin bize zorla ezberlettiği bu “Zihinsel Yüklerden” (Mental overhead) bizi tamamen kurtarıyor!

8. Server-Side Rendering (SSR) ve İnanılmaz “Store Isolation” 🌐

React’te SSR (Sunucu Taraflı Oluşturma) yapmak çoğunlukla devasa Next.js konfigürasyonları, Context’ler ve Provider sarmalları gerektirirken, Gea’nın SSR modülü (@geajs/ssr) sadece 4 ana dosyayla (server.ts, main.ts, vite.config.ts, index.html) kusursuz şekilde çalışır!

Burada esas “Aklınızı alacak” iki büyük özellik yatıyor:

1. Benzersiz Store İzolasyonu (Store Isolation): SSR yaparken en büyük kabus, Global kullanıma açık Store nesnelerinde, “Ahmet” kullanıcısının bilgilerinin “Mehmet” adlı kullanıcıya sızması (Cross-request state pollution) riskidir. Gea, kaputun altında Node.js’in AsyncLocalStorage yeteneğini kullanarak siz sıfır efor harcarken aynı global objede her HTTP isteğine izole (“tombstoned”) bir proxy/data kopyası dağıtır. Sızma riski %0’dır ve Context Provider yazmanıza gerek yoktur.
2. Kusursuz Veri Yükleme (onBeforeRender): React’teki karmaşık getServerSideProps sarmalları yerine, SSR render öncesi tek bir onBeforeRender(context) kancası çalışır. Burada API ve veritabanı isteklerinizi atıp Store’larınızı doldurur ve <head> SEO meta etiketlerinizi ayarlarsınız; HTML render edildiğinde her şey kullanıma hazırdır!
3. Ertelenmiş Akış (Deferred Streaming): Sayfada yüklenmesi 3-4 saniye süren yavaş bir veritabanı isteği mi var? Gea, sayfanın iskelet (shell) HTML’ini anında HTTP üzerinden akıtarak (stream) tarayıcıya yollar. Veritabanı yanıtı çözüldüğünde ise (Tıpkı React Suspense mantığındaki gibi) sayfada önceden ayrılan o küçük HTML boşluğunu minik bir <script> yığını (chunk) ile doldurur. Üstelik bunu öğrenmeniz gereken yeni bir komponent türü dayatmadan, doğrudan SSR konfigürasyonunda çözer.
4. Geliştirici Modu (Dev Mode) Hydration Mismatch Koruması: Sunucuda (SSR) üretilen HTML ile tarayıcınızdaki (Client) HTML bir sebepten eşleşmezse (örn. sunucuda ve tarayıcıda farklı Date.now() veya Math.random() ürettiyseniz), Gea bunu derhal fark edip konsola (Hydration mismatch detected şeklinde) o 200 karakterlik farkı basarak sizi büyük bir uyuşmazlık “bug”ından kurtarır. Orijinal DOM düğümleri baştan aşağı yıkılıp yeniden basılmak yerine, mevcut parçalar “Adopt” edilerek (üzerine oturularak) bağlanır.
5. Kısmi Sayfa Çökmeleri (onRenderError ile Fallback HTML): SSR sırasında çok dipte yer alan ufak bir bileşen veritabanında kendi verisini bulamayıp hata fırlatırsa tüm sunucuyu kapatıp (HTTP 500) bütün kullanıcıları sayfadan atmak yerine, sadece o ufak çöküntüyü onRenderError metodu ile “yedek (fallback) HTML” kullanarak izole eder. Sayfanın geri kalan %95’lik kısmı tamamen sağlıklı yüklenirken (HTTP 200 döner), sorun çıkaran yer kibarca gizlenir veya bir hata mesajıyla doldurulur.

9. Framework Performans (Benchmark) Değerlendirmesi 🚀

Web performansının endüstri standartı olarak kabul edilen js-framework-benchmark testlerinde Gea, 1.03 Weighted Geometric Mean (Vanilla JavaScript’e göre oranlanan ağırlıklı geometrik ortalama) ile muazzam bir skor yakalamıştır. Bu sadece Virtual DOM kütüphanelerinden daha hızlı olduğunu değil, DOM elementlerine cerrah gibi hassas dokunan Svelte gibi rakiplerinin liginde veya onlardan daha üstün olduğunu tesciller.

Gea, derlenmiş bir UI kütüphanesi olarak vanilla JavaScript (el yazısı JS) hızına en çok yaklaşan framework konumundadır. Üstelik Virtual DOM veya devasa bir runtime (çalışma zamanı) ağırlığı yaratmadan reaktif state yönetimi, component yapısı, routing ve JSX mimarisini size tamamen entegre şekilde (batteries-included) sunar.

React, Vue ve Gea Kıyaslama Tablosu

Ayrıca React veya Vue gibi diğer kütüphanelerde state management (Zustand, Pinia) ve router (React Router, Vue Router) gibi devasa yapıları dışarıdan projeye dahil etmek zorundayken, Gea’da her şey paketin en ince çekirdeğindedir:

Özellik	Gea.js	React	Vue
Boyut (min+gz)	~13 KB	~74 KB	~35 KB
Kutu İçeriği	Rendering + State + Routing	+ React Router + Zustand	+ Vue Router + Pinia
Virtual DOM	Hayır	Evet	Evet
Reaktivite	Proxy tabanlı, otomatik	Açık/Manuel (setState, hooks)	Proxy tabanlı (ref/reactive)
JSX Sınıfları	class	className	class (Template’lerde)
Event Yazımı	click={fn}	onClick={fn}	@click="fn" (Template’lerde)
Proplar (Obje/Dizi)	Çift Yönlü (Aynı proxy)	Tek Yönlü (Yukarı callback)	Tek Yönlü (Yukarı emit / v-model)

Frameworkler arası kod seviyesindeki felsefi farkları okumak isterseniz detaylı kıyaslamalara şuradan erişebilirsiniz: React vs Gea | Vue vs Gea | Tüm Benchmark Raporu

10. Dünyada Bir İlk: Yapay Zeka (AI) Asistanları İçin Özel Yetenekler (Skills) 🤖

Yeni bir framework kullanmaya başlarken yaşadığınız en büyük engellerden biri yapay zeka asistanınızın konuya “fransız” kalmasıdır. Gea.js, bunu öngörerek repo içerisinde kendi Agent Skills eklentisiyle birlikte geliyor!

Terminalinizde şu komutu çalıştırdığınızda:

npx skills add dashersw/gea

Projenizin içine yapay zekayı anında eğitecek .cursor/skills/gea-framework yönergeleri eklenir. Bu eklentiler, Cursor (ve uyumlu asistanların) Gea’nın Store yapısını, JSX alışkanlıklarını ve reaktivite modelini tam bağlamıyla (context) anlamasını ve sizin için framework’e sadık komponentleri otomatik kodlamasını sağlar. Hata yapmayan asistanlarla kod yazmak mükemmel bir geliştirici deneyimidir!

Ayrıca framework, Visual Studio Code kullanan geliştiricileri de unutmamıştır. Resmi Gea VS Code Eklentisi (Extension) sayesinde, kendine has class="..." sözdiziminden (syntax), click={fn} attribute’larına kadar JSX içerisinde %100 Gea mantığıyla çalışan “otomatik tamamlama” (autocomplete) ve “Syntax Highlighting” (sözdizimi renklendirme) desteğine sahip olursunuz.

11. Felsefi Kökeni ve Gerçek Dünya Örnekleri 🌍

Gea.js bir gecede oluşan bir fikir değildir. Yaratıcısı Armağan Amcalar’ın yıllar önce geliştirdiği efsanevi sadelikteki erste.js ve state paketleyici regie‘nin felsefi mirasını taşır: Minimal soyutlama ve doğrudan DOM sahipliği. Gea, bu eski güzel ilkeleri son model Vite build-toolchain ve Proxy gücüyle harmanlar.

Ayrıca öğrenmenizi kolaylaştıracak (GitHub Reposunda bulunan) çok sağlam pratik örnekleri mevcuttur:

• flight-checkin: Çoklu Store’ların, E2E (Uçtan uca) testlerin ve aşamalı form navigasyonlarının harika bir şovu.
• kanban: Karmaşık “sürükle-bırak” (drag semantics) tahtası ve yoğun state manipülasyonu yapan bir demo.
• mobile-showcase: @geajs/mobile bileşenlerinin iOS hissi veren pürüzsüz animasyonlarını gösteren mobil vitrin!

Uzun Lafa Kısası: Nasıl Başlıyoruz?

Bütün bu yapıları sıfır konfigürasyon, hazır TypeScript, Vite altyapısı ve Hot Module Replacement (HMR) desteği ile deneyimlemek için terminalinize gidin ve yazın:

npm create gea@latest benim-super-projem
cd benim-super-projem
npm install
npm run dev

Sonuç olarak Gea.js; kod okumayı (ve yazmayı) tekrar doğal, eğlenceli ve yorucu mantıksal karmaşalardan (mental models) uzak kılan “eski dost JavaScript” kafasını, “yeni nesil build-time” performans araçlarıyla harmanlıyor. Virtual DOM overhead’inden kurtulup reaktif mimarinin gücünden maksimum yararlandığımız gerçek frontend aydınlanması tam da buralarda bir yerde başlıyor olabilir.

Daha fazla zaman kaybetmeden projeyi ve kaputun altındaki mimari yapıyı kendiniz incelemek üzere Gea.js Resmi GitHub Repository’sine gidin, dökümanlara göz atın ve yıldızlamayı unutmayın! 🌟