Connectivity (bağlanabilirlik) çağımızın belki de en büyük sorunlarından biri. Evet 4G ve fiber gibi teknolojiler ile hızımız arttı fakat hala kullanıcılar mobil ölçekte bağlantı problemleriyle karşılaşabilmekte. İnternetteki herhangi bir web sayfasının içerdiği JS dosyalarının boyutunun ortalama 420 KB olması, kullanıcıların “Loading…” ekranında ömür tüketmelerine yol açıyor. Bu büyüklükteki JS dosyalarının mobil platformlarda parse edilmesi için geçen süre de işin tuzu bibieri olabiliyor. Hal böyleyken her zaman kullandığınız 45KB’lık React yerine neredeyse aynı işlevlere sahip ve 13 kat daha küçük 3.3KB’lık Preact kullanmayasınız? Şimdi gelin birlikte Preact’in güzelliklerine değinelim.

İnternetteki bir web sayfası ortalama 420 KB’lık JS kodu içermekte – Kaynak: medium.com

Preact’in ortaya çıkışı

Preact, 2015’in sonlarına doğru Kanadalı yazılımcı Jason Miller‘in kendine React muadili lightweight 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 ünlenen Github projesi, birçok yazılımcı tarafından da star’landı.

Kimler tarafından kullanıyor?

Uber, Lyft ve Housing.com gibi öne çıkan firmalar tarafından kullanılıyor. Hatta Uber’in mühendislik ekibinin yazdığı blog‘ta da m.uber.com‘un Preact ile geliştirilmesi sayesinde oldukça düşük boyutunun getirdiği performans arttırımına da değinilmiş.

Lyft & Uber are using @preactjs, code-splitting with webpack and Service Workers for their mobile web experiences.https://t.co/yU5XGNtSiR pic.twitter.com/JbfOZUHTNF

— Addy Osmani (@addyosmani) June 28, 2017

Preact’in amaçları

Preact’in boyutunun küçük olması sayesinde indirme ve parse edilme sürelerine büyük etki ettiğine bahsetmiştik. Bunun yanında Preact’i React’ten ayıran en önemli özelliklerden birisi de durum/özellik değişimleri sırasında React’teki diffing mekanizmasının ele aldığı 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.

Preact’in amaçlarını sıralarsak:
1. Performans: DOM elementlerini hızlı ve verimli bir şekilde render etmesi,
2. Boyut: Küçük boyutlu olması,
3. Verimlilik: Belleği (RAM) etkin olarak kullanması,
4. Anlaşılabilirlik: Birkaç saat içerisinde tüm kod mimarisinin anlaşılabilmesi,
5. Uyumluluk: Preact, React’in API’si ile oldukça uyumluluk gösterir. preact-compact ile de tam uyumluluğun yakalanması sağlanabilir.

Preact’i React’ten ayıran nedir?

Bu belki de Preact’e geçmek isteyen geliştiricilerin sorduğu en temel sorulardan biridir. Bunun birkaç nedeni bulunmaktadır:

Dosya boyutu küçüktür

Herhangi bir web projesine başlarken 45KB’lık React yerine, 3KB’lık Preact kullanmak gerçekten çok büyük bir avantaj sağlar. Preact’in bu kadar küçük olmasının altında, React’te 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’te tanımlı bulunan className özelliğini aşağıdaki şekilde kullanmak gerekir:

<!-- React -->
<div className="classAdi"></div>

Preact’te ise aynı HTML’de olduğu gibi class özelliğini kullanmak yeterlidir.

<!-- Preact -->
<div class="classAdi"></div>

render() yerine render(props, state) kullanılır

İlk bakışta render fonksiyonunu bu parametrelerle kullanmak bir yük gibi gelebilir fakat render fonksiyonu içerisinde bileşen özelliklerini basarken this‘ten kurtulmuş ve böylelikle DRY ilkesi yerine getirilmiş olur.

// Preact
class Hosgeldin extends Component {
    constructor () {
        super();
        this.state = {
            isim: ''
        };
    }
    render(props, state) {
      return <h1>Hosgeldin, {state.isim}</h1>;
    }
}

// React
class Hosgeldin extends Component {
    constructor () {
        super();
        this.state = {
            isim: ''
        };
    }
    render() {
      return <h1>Hosgeldin, {this.state.isim}</h1>;
    }
}

Üstte de görüldüğü gibi this‘in çıkarılması ile oluşan kodun daha temiz bir hale kavuşması sağlanır. Hatta daha da ileri gidip ES6’nın Destructring özelliğinden faydalanılırsa state'ten de kurtulunmuş olur:

// Preact
class Hosgeldin extends Component {
    constructor () {
        super();
        this.state = {
            isim: ''
        };
    }
    render(props, {isim}) {
      return <h1>Hosgeldin, {isim}</h1>;
    }
}

PropTypes’lar artık yok

Aynı 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. Dileyen geliştiriciler preact-compat ile bu özelliği projelerine dahil edebilirler.

preact-compat kullanarak React ile birebir uyumluluk sağlama

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. Bu sayede eğer halihazırda bir React projeniz varsa sadece 2 adımda kolaylıkla Preact’e geçebilirsiniz:

1. Kurulum

npm üzerinden kurulumun gerçekleştirilebilmesi oldukça basit. Sadece aşağıdaki kodu çalıştırmanız yeterli olacaktır:

npm i --save preact-compat

2. Webpack yapılandırması

Eğer projenizi Webpack kullanarak gerçekleştiriyorsanız webpack.config.js üzerinde sadece aşağıdaki satırları eklemeniz yeterli olacaktır.

{
    // ... 
    resolve: {
        alias: {
            'react': 'preact-compat',
            'react-dom': 'preact-compat',
        }
    }
    // ... 
}

Bu sayede ilgili import ifadelerinde react ve react-dom olarak görülen yerler otomatik olarak preact-compat üzerinden çalıştırılacaktır.

import React, { Component } from 'react';
import { render } from 'react-dom';

class Foo extends Component {
    propTypes = {
        a: React.PropTypes.string.isRequired
    };
    render() {
        let { a, b, children } = this.props;
        return <div {...{a,b}}>{ children }</div>;
    }
}

render((
    <Foo a="a">test</Foo>
), document.body);

Bu yazımızda sizlere Preact kullanımının avantajlarından ve React ile ilgili farklılıklarından bahsettik. Preact hakkındaki düşüncelerinizi aşağıdaki yorum kısmında bizimle paylaşabilirsiniz. Bir başka yazıda görüşmek üzere.