React Gerçekten Hızlı mı? En Hızlı Web Sitesi İçin Hangi JavaScript Kütüphanesini Kullanmalısınız?

Son zamanlarda SPA (Single Page Application) framework’lerinin yükselişine şahit oluyoruz ve eğer bir front-end geliştiriciyseniz, React.js’i bilmeden iş bulmanız biraz zor olabilir. Ama kim demiş en popüler olan her zaman en iyisidir diye? Bu durum, “Kral Çıplak!” hikayesine benziyor. En hızlı JavaScript’i yazmak isteyenler için bir uyanış zamanı geldi! Peki JavaScript neden popüler? Dünyada en çok kullanılan kütüphane hangisi? Merak ettiğiniz tüm soruların yanıtlarını bu listede derledik.

JavaScript neden popüler?

JavaScript, web dünyasının süper yıldızı! 🌟 Peki, neden bu kadar popüler? İşte cevabı:

Uçtan uca kullanılabiliyor (FullStack): JavaScript, hem ön yüz (front-end) hem de arka yüz (back-end) geliştirmede kullanılabiliyor. Yani, web sitenizin görsel kısmını (front-end) ve sunucu tarafını (back-end) tek bir kodlama dili ile geliştirebilirsiniz. Bu, geliştiriciler için büyük bir kolaylık sağlıyor, çünkü JavaScript bilgisi ile tam bir uygulama geliştirebiliyorsunuz. 🎨🔧

Kolay öğrenim: JavaScript, öğrenmesi oldukça kolay bir dil. Basit sözdizimi ve geniş kaynak dokümantasyonu sayesinde, yeni başlayanlar bile hızla temel bilgileri kavrayabilir. Bu da JavaScript’i yeni başlayanlar için cazip bir seçenek haline getiriyor. 📚✨

Çalıştırma kolaylığı: JavaScript, doğrudan web tarayıcısında çalışabilen bir dil. Yani, herhangi bir ek yazılım veya derleyici gerektirmeden, sadece bir tarayıcı ile hemen kod yazıp çalıştırabilirsiniz. 🚀💻

Popüler JavaScript kütüphaneleri hangileri?

JavaScript ekosisteminde o kadar çok kütüphane ve framework var ki, seçim yapmak bazen zor olabilir. İşte en popüler olanlardan bazıları:

jQuery: jQuery, JavaScript’in eski ama altın çağını yaşatan kütüphanelerden biri. Özellikle DOM manipülasyonu ve animasyonlar konusunda oldukça etkili. Kısacası, jQuery, JavaScript kodunu daha basit ve anlaşılır hale getiren bir “şeker” gibi! 🍭

React.js: Facebook tarafından geliştirilen React, kullanıcı arayüzleri oluşturmak için kullanılan bir kütüphane. Bileşen tabanlı mimarisi sayesinde, büyük ve karmaşık uygulamaları daha yönetilebilir hale getiriyor. “Bileşen”lere takılmayın; React, performans ve esneklik konusunda oldukça başarılı! 🚀

Vue.js: Vue.js, öğrenmesi ve kullanması oldukça kolay bir başka popüler kütüphane. Basit bir şekilde başlayıp, gerektiğinde karmaşıklığı artırabilirsiniz. Vue, “kapsayıcı” yapısıyla tam bir kullanıcı dostu paket! 🎁

Angular: Google tarafından geliştirilen Angular, güçlü ve kapsamlı bir framework. Veriyi bağlama (data binding) ve bağımlılık enjeksiyonu (dependency injection) gibi özelliklerle, büyük ölçekli uygulamalar için ideal bir seçim. Ancak dikkat, Angular biraz “ağır” olabilir! ⚖️

Peki jQuery nedir ve nasıl popüler oldu?

jQuery piyasaya sürüldüğünde, JavaScript bugünkü kadar popüler değildi çünkü yazdığınız kod bir tarayıcıda çalışırken, diğerinde çalışmayabiliyordu. Bu soruna cross-browser compatibility (tarayıcılar arası uyumluluk) deniyordu.

jQuery, bu problemi kodun içine yerleştirdiği birçok ‘if’ durumu ile çözdü. Örneğin, bir tarayıcı özellik X’i destekliyorsa kullan, desteklemiyorsa aynı şeyi yapan Y metoduna başvur; o da olmazsa özel bir kodla X özelliğini sağla. Ancak bu tür yapı kütüphane boyutunu artırdığı için front-end geliştirme için ideal değildi. jQuery’nin rakipleri de vardı, bazıları animasyonlarda jQuery’den daha iyiydi (mootools gibi), ama bu rakiplerin dosya boyutu jQuery’den çok daha büyüktü. Sonunda jQuery, küçük dosya boyutuyla rakiplerini yendi.

jQuery hız için tasarlanmamıştı; cross-browser uyumluluğu için tasarlanmıştı ve bunu da çok iyi yaptı. O zamanlar, JavaScript kullanırken kullanıcıların güvenlik sebepleriyle tarayıcılarında JavaScript’i devre dışı bırakabileceğini de hesaba katmak zorundaydınız. jQuery’nin ikinci büyük avantajı ise ‘daha az yaz, daha çok iş yap’ felsefesiydi. JavaScript kodlamasını basitleştirip daha verimli hale getirdi.

AngularJS’nin sahneye çıkışı

Google tarafından geliştirilen Angular, birçok kurumsal özelliği ve entegre MVC yapısıyla birlikte geldi. Bu yapı, back-end geliştirme dillerinde popülerdi ama JavaScript dünyasında yeniydi. İlk bakışta kurumsal dünya için ideal gibi görünüyordu, ancak çok önemli bir problemi göz ardı etti: Bir front-end aracı olarak kullanılmadan önce indirilmesi gerekiyordu ve dosya boyutu jQuery’ye kıyasla devasa büyüklükteydi. Buna rağmen, Angular oldukça popülerdi ve bundan 5-7 yıl önce bilmemek, bir front-end geliştirici olarak iş bulmanızı zorlaştırabilirdi.

Güncel en havalı, en popüler kütüphane: React.js

React, Angular’a göre daha küçük bir dosya boyutuna sahipti ve her şeyi JavaScript ile front-end’de halletmenizi teşvik ediyordu. HTML yazmak yerine React ile yazıyordunuz. Ancak web standartlarını geliştirenlerin deneyimi, React’ı geliştirenlerden genellikle daha fazladır. React, Angular’a göre hızlı olsa da, hızın önemli olduğu e-ticaret ve kurumsal siteler için uygun değildir. React oyun geliştirme için iyi olabilir ama bu yazıdaki önceliğimiz hızlı yüklenme ve çalıştırılma.

Peki dünyada en çok kullanılan kütüphane hangisi?

Tüm pazarlama çabalarına rağmen, React.js dünyanın en çok kullanılan framework’ü değil — Angular ya da Vue da öyle değil. Kral hâlâ jQuery! Dünya’da kullanılan tüm JavaScript frameworklerin kullanım oranları hakkında güncel bilgiye W3Tech’in raporlarından ulaşabilirsiniz. Tabi bu oranlara WordPress’in ve çeşitli açık kaynak kodlu içerik yönetim sistemlerinin jQuery kullanması da etkilidir. Fakat WordPress’ı (~%43) çıkartsak bile jQuery hala diğerlerinden çok daha yüksek bir orana sahip.

JavaScript popülerlik partisine TypeScript’i davet edelim

TypeScript, JavaScript’in süper güçlerle donatılmış hali! 🌟 Bu muazzam dil, JavaScript’in kod yazarken yaşadığınız o “aaah, bu hata neyin nesi?” anlarını ortadan kaldırıyor. Nasıl mı? TypeScript, JavaScript’in üzerine sıkı tip denetimi ekleyerek, kodunuzun daha güvenli ve hatasız olmasını sağlıyor. Yani, yazdığınız kodun değişken türlerini önceden belirleyerek, olası hataları daha kodunuzu yazarken yakalayabilirsiniz. 🛡️

Bir başka deyişle, JavaScript’in esnekliğini korurken, C, C++, C# ve Java gibi dillerdeki sıkı tip denetimini TypeScript ile de elde ediyorsunuz. Bu, kodunuzu daha tutarlı ve öngörülebilir hale getiriyor. Hataları daha kodu çalıştırmadan önce yakalamak mı? TypeScript ile bu iş hiç de zor değil!

Tay: “TypeScript ve jQuery’in aşk çocuğu!”

Evet, yanlış duymadınız. Tay, TypeScript’in zekâsını ve jQuery’nin felsefesini birleştiriyor. Bu minik dev, jQuery’nin en sevdiğiniz özelliklerini alıp, onları TypeScript’in güvenli ellerine bırakıyor. Hem de sadece 1KB sıkıştırılmış boyutta! Yani, eski sevgili jQuery’den ayrılma vakti gelmiş olabilir.

JavaScript’e olan sevginizi bir kenara bırakın ve TypeScript ile tanışın. JavaScript, yıllardır web geliştirme dünyasının temel taşı olsa da, bazı sorunları ve eksiklikleri de beraberinde getiriyor. Bu noktada TypeScript devreye giriyor; Microsoft tarafından geliştirilen TypeScript, JavaScript’in eksiklerini tamamlayan ve büyük ölçekli projelerde daha güvenli ve hatasız kod yazmayı mümkün kılan bir üst set olarak tanımlanabilir. TypeScript, statik tip tanımlamaları ve güçlü araç desteği sayesinde, geliştirme sürecinde hataları daha kodlama aşamasında yakalamanıza olanak tanır.

Tay ise, TypeScript’in bu gücünü ve güvenliğini, jQuery’nin tanıdık kolaylığıyla birleştiriyor. JavaScript’in eski sorunlarıyla boğuşmak yerine, Tay ile hem hızlı hem de modern bir deneyime adım atıyorsunuz. Bu sayede, daha güvenli ve bakımı daha kolay kodlar yazabilir, projelerinizi bir sonraki seviyeye taşıyabilirsiniz.

Az yaz, çok iş yap!

Az yaz, çok iş yap! Tay, bu sloganı TypeScript’e uyarlayarak, jQuery’nin sağladığı kod yazım hızı ve kolaylığını modern bir formda sunuyor. Daha az kod yazarak, daha fazlasını başarın. Örneğin, sadece JavaScript ile bir butona tıklayınca bir CSS class eklemek istediğinizi düşünün. JavaScript kullanarak bunu yapmak için şu kodu yazmanız gerekebilir👇

document.getElementById("myButton").addEventListener("click", function() {
    document.getElementById("myElement").classList.add("example");
});

Ancak, aynı işlemi Tay ile yaparken işler çok daha basit hale gelir:

t("#myButton").click(function() {
    t("#myElement").addClass("example");
});

Tay, jQuery’nin sevdiğiniz tüm fonksiyonlarını TypeScript’in güvenliğiyle birleştiriyor

jQuery ile yaşadığınız tatlı ama yavaş anılarınızı geride bırakmanın zamanı geldi. Tay, hem hızlı hem de hafif—tam da yeni bir başlangıç için ihtiyacınız olan şey! OOP tarzıyla Tay’ın nasıl kullanıldığını aşağıda anlatacağız, fakat şimdilik jQuery’de $ yerini t alıyor ve yeni bir dil öğrenmenize gerek kalmıyor.

            $('#change-text').click(function() {
                $('#text').text('The text has been changed!');
                $('#text').addClass('highlight');
            });
        

Tay ile aynı kod yazılırsa:

            t('#change-text').click(function() {
                t('#text').text('The text has been changed!');
                t('#text').addClass('highlight');
            });
        

Hız tutkunlarına müjde: Tay %250 daha hızlı!

jQuery’yi seviyorsunuz ama daha hızlı bir çözüm mü arıyorsunuz? Tay, %250 daha hızlı çalışan bir kod sunuyor. Hız tutkunları için mükemmel bir seçenek!

E-Ticaret siteleri için 1KB’lık küçük dev Tay: Müşterileriniz sizi sevecek, satışlar artacak!

Hızlı yüklenen bir site, e-ticarette altın değerindedir. Tay, e-ticaret sitelerinde hız ve performansı artırarak daha fazla satış yapmanıza yardımcı olur. Sunucularınız hafifler, müşterileriniz ise keyifle alışveriş yapar. Tay’ın sadece 1KB’lık sıkıştırılmış boyutu, minimalizmi yeni bir seviyeye taşıyor. Daha az yer kaplayarak, sayfanızın hızlı yüklenmesini sağlar. Bu da daha iyi kullanıcı deneyimi ve daha mutlu ziyaretçiler demek. Popüler JavaScript kütüphaneleri veya frameworklerinin sıkıştırılmış yaklaşık boyutları şöyledir:

• jQuery: ~30 KB
• ReactJS 16 + React DOM : ~97 KB
• AngularJS 1.x: ~144 KB
• AngularJS 2.x: ~566 KB
• Vue.js 2.4.x: ~58 KB

Kullanıma hazır olma süresi ~= indirme süresi

Peki bu kütüphaneleri indirmek için geçen süre ne kadar? Bunun için Google’ın mobil site testinde kullandığı ortalama hız olan 1628 Kbps / saniye değerini baz alacağız. Bunun sebebi de Google siteleri bu değeri baz alarak değerlendiriyor ve bu günümüzde oldukça mantıklı bir yöntemdir. Artık website ziyaretçilerinin çoğu masaüstü bilgisayar kullanıcıları değil, mobil kullanıcılar ve bu kullanıcılar hala çok hızlı bağlantıya sahip değiller. Yani bilgisayarınızda hızlı gibi görünen bir site, mobilde o kadar da hızlı olmayabilir.

• jQuery: ~0.15 saniye
• React 16: ~0.48 saniye
• Angular 1: ~0.71 saniye
• Angular 2: ~2.78 saniye
• Vue 2: ~0.29 saniye

Bu süreler ne anlama geliyor? Bu kütüphaneler / frameworklerin uygulamanız tarafından kullanılabilmesi için önce bu dosyaların tarayıcınıza indirilmesi gerekiyor. Bu rakamlar da indirilmesi için geçen süreler. Peki ya Tay?

• Tay : ~ 0.005 saniye 🚀🚀🚀

Kısaca yukarıdaki popüler JavaScript kütüphaneleri içinde en kısa sürede yüklenen jQuery 150 milisaniye’de indirilip, kullanıma hazır olurken, Tay 5 milisaniye içinde kullanıma hazır hale gelir. Diğer bir deyişle, jQuery’den %3000 hızlı yüklenir. Reactjs’den ise yaklaşık %9000 hızlı.

JavaScript kütüphanesinin kullanıma hazır olması için önce indirilmesi, sonra da kullanıcının tarayıcısında derlenmesi gerekiyor. Güncel bilgisayar işlemcileri artık çok hızlı olduğu için, derlenme süreleri karşılaştırmasını eklemedik. Tabi ki Tay derlenme süresinde de daha hızlı sonuç verir, 5KB JavaScript kod mu daha hızlı derlenir yoksa 200KB’lık kod mu? Fakat bu konu günümüzde indirme süresi kadar önemli değildir, çünkü bir sistemin gücünü en küçük halka belirler. Burada en sınırlayacı halka ise mobil internet üzerinden JavaScript dosyalarının indirilmesi için geçen süredir.

MVC mi dediniz?

MVC (Model-View-Controller) yapısını seviyor musunuz? Tay, MVC’yi pek umursamıyor çünkü hıza odaklanıyor. Eğer backend geliştirme yapıyorsanız, MVC harika bir yapıdır; kodunuzu düzenler, daha okunabilir ve sürdürülebilir hale getirir. Ancak front-end geliştirmede, MVC yapısını takip etmek dosya boyutunu büyüterek yavaşlamaya neden olabilir. Bu duruma en güzel örnek, devasa boyutuyla dikkat çeken AngularJS’dir. AngularJS, MVC prensiplerine sıkı sıkıya bağlı kalarak zamanında popüler olsa da, büyük boyutları nedeniyle özellikle hızın öncelikli olduğu projelerde dezavantajlı hale gelmiştir. Eğer Javascript geliştirmede hızı yakalamak istiyorsanız, MVC’yi unutup Tay’a geçmelisiniz!

OOP sevenler için sürpriz: Tay’da OOP da var, ama zorunlu değil!

class TabsComponent {
  el: HTMLElement = document.body;

  constructor(el: HTMLElement | string) {
    this.el = typeof el === "string" ? document.querySelector(el)! : el;
    this.bindEvents();
  }

  private bindEvents() {
    t(".tabs-header .btn").on("click", this.toggleTab.bind(this));
  }

  public toggleTab(e: Event) {
    this.el = e.target as HTMLElement;
    this.toggleTabHeader();
    this.toggleTabContent();
  }

  private toggleTabHeader() {
    this.el
      .parent()
      .find("li")
      ?.forEach((item: HTMLElement) => {
        item.toggleClass("active");
      });
  }

  private toggleTabContent() {
    t(".tabs-item").forEach((item: HTMLElement) => {
       item.toggleClass("active");
    });
  }

}

Nesne yönelimli programlama (OOP) taraftarı mısınız? Tay, modern JavaScript standartlarına uygun sınıflar yazmanıza olanak tanır, ancak sizi buna zorlamaz. İsterseniz OOP kullanın, isterseniz başka bir yol seçin—Tay size esneklik sunar.

Örneğin yukarıdaki örnekte Tay ile yazılmış bir component var. Bu bir OOP Class ve basit bir html tab elementinin Başlık ve İçerik bölümlerini yönetmenize yarıyor.

Tay’ı nasıl edinebiliriz?

Globaliser tarafından ücretsiz yayınlanan Tay, Github‘dan ücretsiz indirilebilir. Globaliser, web siteleri için bulut altyapı ve yazılım teknolojileri geliştiren bir startup. Şirket, hızlandırma teknolojileri konusunda bir patent başvurusu sürecindedir. Globaliser, WordPress, Shopify, WooCommerce, Magento (Adobe Commerce), SAP (Hybris) ve özel e-ticaret yazılımları için hem yerel hem de global hızlandırma ve güvenlik çözümleri sunuyor.