Giriş

Modern web dünyasında framework seçimi, projenin geleceğini belirleyen en kritik kararlardan biri. Her projeye React eklemek refleks haline geldi ama gerçekten her zaman doğru seçim mi?

Vanilla JS Ne Zaman Parlıyor?

Bazı senaryolarda saf JavaScript, framework'lerden çok daha iyi performans gösterir:

• Statik portfolyo siteleri — Bu site gibi! DOM manipülasyonu az, animasyonlar CSS + Canvas ile yapılıyor.
• Landing page'ler — Tek sayfalık tanıtım siteleri için 45KB'lık React bundle gereksiz.
• Küçük widget'lar — Embed edilecek hafif bileşenler.
• Performans kritik uygulamalar — Her milisaniyenin önemli olduğu yerler.

// Vanilla JS ile basit bir toggle
document.querySelector('.btn').addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
});

React Ne Zaman Şart?

React'in gücü karmaşık state yönetimi ve bileşen tekrarı gerektiren projelerde ortaya çıkar:

• Dashboard'lar — Gerçek zamanlı veri, tablolar, grafikler.
• E-ticaret — Sepet, filtreleme, ödeme akışı gibi iç içe state'ler.
• SaaS uygulamaları — Çok sayfalı, rol bazlı, API yoğun projeler.
• Takım projeleri — Component-based mimari, ekip içi tutarlılığı artırır.

Karar Matrisi

Projenize karar verirken şu sorulara cevap arayın:

• Sayfada kaç bağımsız state var? → 3'ten azsa: Vanilla yeterli.
• Bileşen tekrarı var mı? → Evet: React mantıklı.
• SEO kritik mi? → Evet: Next.js veya SSG düşünün.
• Bundle boyutu önemli mi? → Evet: Vanilla veya Preact.

Sonuç

Doğru araç, projeye göre değişir. Bu portfolyo sitesi saf JavaScript ile yazıldı — particle engine, X-ray efekti, 3D kartlar, tüm animasyonlar framework'süz. Sonuç: 0 dependency, anında yükleme, tam kontrol.

Introduction

In the modern web world, choosing a framework is one of the most critical decisions that shapes a project's future. Adding React to every project has become a reflex, but is it always the right choice?

When Does Vanilla JS Shine?

In certain scenarios, pure JavaScript outperforms frameworks significantly:

• Static portfolio sites — Like this one! Minimal DOM manipulation, animations via CSS + Canvas.
• Landing pages — A 45KB React bundle is overkill for single-page promos.
• Small widgets — Lightweight embeddable components.
• Performance-critical apps — Where every millisecond counts.

// Simple toggle with Vanilla JS
document.querySelector('.btn').addEventListener('click', () => {
    document.body.classList.toggle('dark-mode');
});

When Is React Essential?

React's power emerges in projects requiring complex state management and component reuse:

• Dashboards — Real-time data, tables, charts.
• E-commerce — Cart, filtering, payment flows with nested states.
• SaaS applications — Multi-page, role-based, API-heavy projects.
• Team projects — Component-based architecture ensures team consistency.

Decision Matrix

Ask these questions when deciding:

• How many independent states on the page? → Less than 3: Vanilla is enough.
• Component reuse needed? → Yes: React makes sense.
• Is SEO critical? → Yes: Consider Next.js or SSG.
• Does bundle size matter? → Yes: Vanilla or Preact.

Conclusion

The right tool depends on the project. This portfolio was built with pure JavaScript — particle engine, X-ray effect, 3D cards, all animations without any framework. Result: 0 dependencies, instant loading, full control.