Astro ile Minimalizm Denemeleri: SolidJS

Bu blogu, denediğim ve keşfettiğim şeyleri kendime not olarak yazmak için ve aynı zamanda bir oyun alanı olarak kullanıyorum. Bundan dolayı farklı bir şey keşfettiğimde hemen denemek istiyorum. Tabi mevcut kullandığımdan daha iyi olabileceğini düşünüyorsam. Bu sefer gözüme SolidJS’i kestirdim.

Jekyll, Hugo, 11ty derken Next.js’yi bulmak benim için çağ atlatan bir gelişme olmuştu. React ile bir anda yapabildiklerimin sınırları genişledi. Next.js’den Astro’ya geçişim de bir takım farklı teknolojilerin kapılarını aralama fırsatı verdi. Astro, framework agnostik olduğu için sadece Astro’nun kendisini kullanmak dışında SolidJS, Svelte, Vue, Preact, React, Alpine.js vs. de kullanabiliyoruz. Birkaç yerde Astro ile en iyi SolidJS gidiyor diye okuduğum için ilgimi çekiyordu. Daha minimal bir yapı oluşturmak için React’tan Preact’a geçmeyi düşünüyordum fakat neden bambaşka bir kütüphane olmasın dedim.

Öncelikle sitede dinamik alanlar yoksa Astro kendi başına oldukça güzel işliyor, fakat iş gösterişli birkaç dinamik alan oluşturmaya geldiğinde Astro fazla statik kalıyor. Bundan dolayı farklı bir kütüphane ihtiyacı doğuyor. Tabi tamamen vanilla javascript de kullanılabilir.

React’tan Solid’e geçiş, beklediğim kadar kolay olmadı. Importları değiştirip useEffect yazan yerleri createSignal ile değiştirmekten fazlasını yapmam gerekiyormuş. Kütüphaneye tamamen yabancı olduğum için, çok fazla React kodum olmamasına rağmen neredeyse tüm günümü aldı. Ben öğrenmek için elini kirletmeyi sevenlerdenim; önce hata yapıp sonra belgeleri okumayı tercih ediyorum.

React ve Solid Farkları

React: Sanal DOM (Virtual DOM) kullanır. State değiştiğinde önce sanal DOM güncellenir, sonra gerçek DOM ile karşılaştırılır (diffing) ve en az değişiklik yapılır.
Solid: Doğrudan gerçek DOM ile çalışır. Reaktif değişkenler (signals) ile sadece ilgili DOM parçalarını günceller, sanal DOM yoktur.

Örnek:

1
// React
2
import { useState } from "react";
3
const [count, setCount] = useState(0);
4
return <button onClick={() => setCount(count + 1)}>{count}</button>;
5

6

7
// Solid
8
import { createSignal } from 'solid-js';
9
const [count, setCount] = createSignal(0);
10
return <button onClick={() => setCount(count() + 1)}>{count()}</button>;

React’te count normal değişken, Solid’de count fonksiyon (getter) olarak çağrılıyor.
En takıldığım kısım conditional rendering ve for döngüsü kısmı oldu.
React’ta conditional rendering işini basitçe aşağıdaki şekilde yapabiliyordum:

1
{condition && <Component />}
2
// veya
3
{condition ? <ComponentA /> : <ComponentB />}

Fakat Solid’de aşağıdaki şekilde yapmam gerekiyormuş:

1
import { Show } from "solid-js";
2

3
<Show when={condition} fallback={<div>Loading...</div>}>
4
  <Component />
5
</Show>

For döngüsü için React ile aşağıdaki gibi yapabiliyorken:

1
{items.map(item => <Item key={item.id} data={item} />)}

Solid’de aşağıdaki gibi yapmam gerekiyor:

1
import { For } from "solid-js";
2

3
<For each={items}>
4
  {(item) => <Item data={item} />}
5
</For>

Tabi Solid’de de klasik ternary ifadeler çalışsa da performans ve okunabilirlik açısından önerilmiyormuş. Aynı şekilde .map de kullanılabiliyor fakat doğrudan DOM üreteceği için <For> bileşeni bu işi daha verimli yapıyormuş.

Sonuç

React’tan Solid’e geçince de nedense muazzam bir performans artışı bekliyordum ama açıkçası varsa bile son kullanıcının fark edeceği boyutta değil sanırım. Yine de yeni şeyler denemenin verdiği tatmin duygusu için değdi diyebilirim. Ayrıca bu yazı detaylı bir SolidJS rehberi değil; sadece React’tan geçerken kendi adıma dikkatimi çeken farkları not ettim. Geri kalanı öğrenmek isteyen buradan detayları öğrenebilir.