SolidJS ile tanışmaya ne dersin?
Herkese merhaba,
bu gün sizlerle birlikte SolidJS’e bakınacağız. SolidJS kullanıcı arayüzleri (UI) oluşturmamıza olanak sağlayan bir JavaScript kütüphanesidir. Yaratıcısı belki aşina olduğunuz değilseniz bile olmanız gereken Ryan Carniato.
Carniato, ne zamandır geliştirmeye başladığını tam hatırlamasa da “framework” adlı reposunda ilk commit’ini (initial commit) 21 Ağustos 2016'da attığını bir yazı dizisinde yazmış ve bunun bir SolidJS protitipi olduğunu belirtmiş. Kararlı sürümün geliştirilmesinin 5 yıl ve 1000 saatten fazla zaman aldığını söyleyen Carniato, 28 Haziran 2021'de 1.0 kararlı versiyonu resmi olarak yayınlamış.
Temel olarak SolidJS, React’ın esnekliğine ve Svelte’in basit zihinsel modeline sahip reaktif ve önceden derlenmiş Virtual DOM (Sanal DOM) kullanmayan/içermeyen JSX çerçevesidir. SolidJS şablonları doğrudan DOM’da derler. React ile temel farklılıklarından birisi Virtual DOM olmamasıdır. Bileşenler sadece bir kez oluşturulur, sürekli olarak render edilmez.
Yukarıdaki görselde de göreceğiniz üzere SolidJS birçok popüler library/framework’ten oldukça performanslıdır.
Dilerseniz neden bu kadar performanslı olduğuna bu makaleden ulaşabilirsiniz.
Tek yönlü bilgi akışına sahiptir. Bilgileri değiştirilemez bir değer olarak komponente gönderir. Komponent doğrudan değer(props)’i değiştiremez ancak callback fonksiyonlar bunu mümkün kılar.
SolidJS Components ve Reactive Primitives olmak üzere iki ana yapı taşı türü vardır.
Components
props(input) öğesini argüman olarak kabul eden bir JSX öğesi döndüren işlevdir. React ile birebir aynıdır.
Reactive Primitives
createSignal()
Herhangi bir reactive hesaplamayı, bir fonksiyona sarar ve bağımlılıklar güncellendiğinde fonksiyonu yeniden çalıştırır. Solid JSX derleyicisi ayrıca çoğu JSX ifadesini bir işlevle sarar, böylece bağımlılıkları değiştiğinde bunlar otomatik olarak güncellenir ve karşılık gelen DOM güncellemelerini tetikler. Daha kesin olarak, bir işlevin otomatik olarak yeniden çalıştırılması, bir JSX ifadesi veya “hesaplamalar” (createEffect, createMemo, etc.) oluşturan API çağrıları gibi bir izleme kapsamında çağrıldığında gerçekleşir. Ek olarak bağımılık izlemeyi kapatmak isterseniz SolidJS buna izin vermektedir Reactive Utilities .
createEffect()
DOM’ı manuel olarak değiştirmek için, bağımlılıklar değiştiğinde rastgele kodu çalıştırmanın genel bir yoludur. createEffectverilen işlevi bir izleme kapsamında çalıştıran yeni bir hesaplama oluşturur, böylece bağımlılıklarını otomatik olarak izler ve bağımlılıklar güncellendiğinde işlevi otomatik olarak yeniden çalıştırır. createEffect reactive sistemi okuyan ancak yazmayan yan etkiler içindir. Dependency’e ihtiyaç duymaz, içerisine verdiğimiz Signaller(createSignal ile oluşturulan state) değişikliğe uğradığında çalışır.
createMemo()
Reactive hesaplamada türetilmiş bir değeri verimli bir şekilde kullanmanıza izin verir. createMemoverilen işlevin dönüş değerine eşit salt okunur bir reaktive değer oluşturur ve işlevin yalnızca bağımlılıkları değiştiğinde yürütülmesini sağlar. Türetilen bilgiler önbelleklenir(cache) ve içeriğinde bulunan değerlerde değişiklik olması durumunda fonksiyon tekrar çağrılır cachelenir ve yeni değer döndürülür. Burada dikkat edilmesi gereken en önemli konu Memory Leak(bellek sızıntısı)’tir.
createEffect‘te olabildiğincecreateSignalkullanılmaması, bunun yerinecreateMemokullanılması tavsiye edilir. Dikkkat edilmezse ek işlemeye ve sonsuz döngülere sebep olabilir.createMemokullanılırsa reactive sistem neyin neye bağlı olduğunu bilir ve buna göre optimize edebilir.
createResource()
SolidJS’in API’ler ile asenkron iletişimini yöneten reactive ve ilkel, createSignal’in üzerindeki basit bir katmandır. Bu özellik Suspense/Concurrent oluşturmada önemli bir katmandır. createResource() Async yüklemelerini işlemek için tasarlanmıştır. Durum kontrollerini sağlaması oldukça basittir, hata/yükleme(error, loading etc…) gibi durumları kolaylıkla kontrol edebilirsiniz.
SolidJS bunlar gibi bir çok özellik barındırır, daha detaylı dökümantasyon için SolidJS’in resmi web sitesini ziyaret edin.
Zaman ayırıp okuduğunuz için teşekkür ederim. Bir sonraki yazı dizelerimde buluşmak dileğiyle :).
