framework suz sadece html css javascript ile yapılan siteler arasında ne fark oluşur ?
Bir web sitesini framework (Next.js, React, Vue vb.) kullanmadan, sadece yalın HTML, CSS ve Vanilla JavaScript ile yapmaya yazılım dünyasında "Pure Web" veya "Vanilla Development" denir.
İki yöntemle de günün sonunda kullanıcının karşısına çıkan ekran aynı olabilir. Ancak arka planda; projenin performansı, geliştirme süreci ve kodun yönetilebilirliği açısından çok ciddi farklar oluşur.
İşte sadece HTML, CSS ve JS ile yapılan siteler ile framework kullanan siteler arasındaki temel farklar:
1. Sayfa Yükleme ve Gezinme Hızı (SPA vs. MPA)
- Sadece HTML/CSS/JS (Geleneksel Yapı): Sitenizdeki "Hakkımızda" sayfasına tıklandığında, tarayıcı sunucuya gider ve
hakkimizda.htmldosyasını tamamen sıfırdan indirir. Bu esnada sayfa beyazlar, yukarıda döner bir yükleme simgesi belirir ve tüm sayfa (menü ve footer dahil) baştan yüklenir. - Framework (Modern Yapı - SPA): Framework'ler sitenizi Single Page Application (Tek Sayfa Uygulaması) olarak inşa eder. Sitede sayfalar arası geçiş yaparken sayfa asla yenilenmez. Sadece değişen içerik (örneğin orta kısımdaki yazı) anında güncellenir. Bu, kullanıcıya bir web sitesi değil de bir mobil uygulama kullanıyormuş hissi verir.
2. İlk Açılış Performansı (Hız Avantajı)
Burada şaşırtıcı bir durum vardır: Sadece HTML, CSS ve JS ile yapılan basit siteler, ilk açılışta framework kullanan sitelerden çok daha hızlı açılır.
- Sadece HTML/CSS/JS: Tarayıcı sadece ihtiyacı olan düz metni ve birkaç küçük dosyayı okur. Arada hiçbir "tercüman" (framework motoru) olmadığı için site mikrosaniyeler içinde ekrana gelir.
- Framework: Tarayıcının siteyi açabilmesi için önce framework'ün kendi büyük JavaScript kütüphane dosyalarını indirmesi ve çalıştırması gerekir. Bu da özellikle düşük donanımlı telefonlarda ilk açılış hızını (üzerinde özel optimizasyon yapılmadıysa) biraz yavaşlatabilir.
3. Kodun Tekrarı ve Bileşen (Component) Yapısı
- Sadece HTML/CSS/JS: Sitenizde 50 sayfa olduğunu düşünün. Her sayfanın üst menüsü (Navbar) ve alt kısmı (Footer) aynıdır. Menüde bir linki değiştirmek istediğinizde, 50 farklı HTML dosyasını tek tek açıp o linki değiştirmek zorunda kalırsınız. Bu tam bir işkencedir.
- Framework: Bileşen (Component) mantığı vardır. Menüyü
Navbar.jsadında bir kez yazarsınız ve 50 sayfaya tek satırla (<Navbar/>) çağırırsınız. Menüde bir değişiklik yapacağınızda sadece o dosyayı değiştirirsiniz, tüm sitede anında güncellenir.
4. Durum Yönetimi (State Management) ve Dinamiklik
- Sadece HTML/CSS/JS: Bir e-ticaret sitesi yapıyorsunuz diyelim. Kullanıcı "Sepete Ekle" butonuna bastığında; sepetteki ürün sayısının artması, sepet sayfasındaki fiyatın güncellenmesi ve kullanıcıya uyarı penceresi açılması için JavaScript ile DOM'u (HTML elementlerini) tek tek elle bulup (
document.getElementById) içeriklerini manuel değiştirmelisiniz. Proje büyüdükçe bu kodlar birbirine girer ("Spagetti Kod" oluşur). - Framework: Veriyi (State) takip eder. Siz sadece sepet sayısını
1arttırırsınız; framework, ekranda o sayıya bağlı olan ne kadar element (buton, sepet ikonu, fatura tutarı) varsa hepsini otomatik olarak saniyede günceller.
Karşılaştırma Özeti
| Özellik | Sadece HTML / CSS / JS (Vanilla) | Modern Framework'ler (Next.js, React vb.) |
|---|---|---|
| Küçük Projelerde Hız | 🚀 İnanılmaz hızlı açılır ve hafiftir. | Devasa kütüphane yükü nedeniyle daha ağırdır. |
| Büyük Projelerde Yönetim | ❌ Proje büyüdükçe kodlar kontrolden çıkar. | Modüler ve bileşen tabanlı olduğu için çok düzenlidir. |
| Sayfa Geçişleri | Sayfa her seferinde beyazlar ve sıfırdan yüklenir. | ⚡ Sayfa yenilenmeden, uygulama gibi akıcı geçer. |
| Geliştirme Süresi | Temel işler için bile çok fazla kod yazmanız gerekir. | Hazır paketler ve yapılar sayesinde çok daha hızlı geliştirilir. |
| SEO (Arama Motorları) | HTML doğrudan hazır geldiği için Google botları çok rahat okur. | SSR (Server Side Rendering) destekleyen frameworkler (Next.js gibi) kullanılmazsa SEO optimizasyonu zordur. |
Hangisi, Ne Zaman Seçilmeli?
- Sadece HTML, CSS ve JS kullanılmalı: Kurumsal bir firmanın tanıtım sitesi, kişisel portfolyo siteleri, tek sayfalık (landing page) reklam sayfaları veya veri trafiği olmayan, tamamen bilgi amaçlı statik siteler için framework gereksiz bir yüktür. Yalın kod her zaman daha performanslıdır.
- Framework kullanılmalı: E-ticaret siteleri, sosyal medya platformları, yönetim panelleri (dashboard), kullanıcı giriş-çıkışının ve dinamik veri akışının yoğun olduğu "Web Uygulamaları" (Web Apps) için framework kullanmak bir lüks değil, zorunluluktur.