Günümüzün en büyük problemlerinden biri web sayfalarında yüklenme süresi. 4G ve fiber gibi teknolojiler ile bağlantı hızı arttı ama hala kullanıcılar mobilde bağlantı problemleriyle karşılaşabilmekte. İnternetteki herhangi bir web sayfasının içerdiği JS dosyalarının boyutunun büyük olması kullanıcıların bekleme sürelerini büyük ölçüde artırıyor. Durum bu olunca kullanılan teknolojilerin her zaman alternatifleri, daha küçük boyut, daha iyi performans kazanıyor. 45KB’lık React yerine neredeyse aynı işlevlere sahip ve 13 kat daha küçük 3.3KB’lık Preact kullanmayasınız?Ben ki React’ı gayet seven biriyim ama ama Preact’ merak etmedim değil. Hadi Preact’a bakalım.
Preact, 2015’in sonlarına doğru Jason Miller‘in kendine React muadili bir JS kütüphanesi yazmasıyla ortaya çıktı. Amacı, React ile gelen özelliklerin barındırılması ve 3KB gibi çok küçük boyutlara sahip olması ile kısa süre içerisinde insanlara Github üzerinden yayıldı. Projenin linkine buradan ulaşabilirsiniz. Şu an itibariyle Github’da 17.295 kez starlanmış.
Preact’ın Amaçları
Preact’ın boyutunun küçük olması sayesinde indirme ve parse edilme sürelerini kısaltır. Bunun yanında Preact’ı React’ten ayıran en önemli özelliklerden birisi de durum değişimleri sırasında React’taki DOM değişiklikleri yerine VDOM’da oluşan farklılıkları ele alması ve bu sayede değişmeyen bir çok elemanı görmezden gelerek oluşan değişimi daha performanslı bir şekilde işleyebilmesidir.
Peki Preact’ın Avantajı Ne?
- Performans: DOM elementlerini hızlı ve verimli bir şekilde render edebilmesi,
- Boyut: Boyutunun küçük olması,
- Verimlilik: Belleği (RAM) etkin olarak kullanması,
- Anlaşılabilirlik: Kolay şekilde kod mimarisinin anlaşılabilmesi,
- Uyumluluk: Preact, React’ın API’si ile oldukça uyumluluk gösterir. preact-compact ile de tam uyumluluğun yakalanması sağlanabilir.
Neden Kullanmalıyım?
Dosya boyutu daha küçük
Bir web projesine başlarken 45KB’lık React yerine, 3KB’lık Preact kullanmak büyük bir avantaj sağlar. Preact’ın bu kadar küçük olmasının altında, React’ta bulunan her bir özelliği bünyesinde barındırmaması ve temel işlemlere odaklı olması yer almaktadır.
className yerine class kullanılır
React ile kod yazarken bir div elemanına CSS class’ı verilmek istendiğinde, React’ta tanımlı bulunan className özelliğini Preact’ta düz HTML’deki gibi kullanmak gerekir:
|
1 2 3 4 |
<!-- React --> <div className="classAdi"></div> <!-- Preact --> <div class="classAdi"></div> |
PropTypes’lar Preact’ta yok
TypeScript’te olduğu gibi değişken için tür belirlemeye yarayan PropTypes herkes tarafından yaygın olarak kullanılmadığı için bu özellik gereksiz olarak görülmüş ve Preact çekirdeğinden de kaldırılmıştır. İsteyen geliştiriciler preact-compat ile bu özelliği projelerine dahil edebilirler.
preact-compat kullanarak React ile uyumluluk sağlamak çok kolay
preact-compat modülü, Preact ile React arası bir uyumluluk katmanı gibi çalışır. Preact projelerinde React temelli modül kullanımının, modül içerisinde herhangi bir kod değişimi yapılmadan gerçekleştirilebilmesini sağlar.
Ayrıca Preact modern tarayıcıları (Chrome, Firefox, Safari, Edge) ve IE9 +’yı destekler. React’tan bahsettiğim yazıya buradan ulaşabilirsiniz.
