Photo by Prudence Earl on Unsplash

Frontend Ürün ve Kütüphane Evreninden Haberler — 2 (xState ve State Designer)

Kayıtlı olduğum bazı sitelerden haftalık, aylık Haber Bülteni olarak bir çok mail atılıyor. Bu yazıda bu bültenlerden önemli gördüğüm ürün haberlerini paylaşıyor olacağım. Her yazıda 2 ürünü inceliyor olacağım.

Bugünkü yazıda UI uygulamaları için çok önemli yer teşkil eden State yönetimine faydalı 2 kütüphaneden bahsedeceğim.

Şu ana kadar State yönetimi için Redux’ tan bahsettik genelde. Bu konuda daha önceden yazmış olduğum aşağıdaki yazılara göz gezdirebilirsiniz.

Redux yapılarına alternatif GraphQL ve Apollo Client benzeri uygulama state yönetmekte birçok kütüphane şu anda mevcut. Hatta React kütüphanesi Hooks ile birlikte State,Context ile birlikte Redux basit bir hali useReducer React kütüphanesi içerisinden direk kullanılabilir hale geldi.

Tabi useReducer ve useContext konusunun React-Redux direk bir karşılık olamayacağını aşağıdaki yazıda bahsetmiştim.

Tüm yukarıda bahsettiğim kütüphaneler state yönetimi için kütüphaneler olsa bile kompleks state yönetimlerini;

  • oluşturmak,
  • bileşenler ile hızlı şekilde bağlamak,
  • görselleştirmek
  • simule edebilmek için geliştirilmiş xState ve State Designer benzeri kütüphaneler bulunur.

xState

  • xState kütüphanesi Sonlu Durum Makinesi kurmanızı ve bu Makine üzerinden bileşeninizi yönetecek useMachine hook ve görselleştirme aracı sağlar.
xState

Bu durum makinesi üzerinden bileşen yönetimi yapılarak State mekanizmasının iş mantıkları bileşen içerisinden ayrıştırılarak soyutlanır.

https://github.com/davidkpiano/xstate

Basit State Machine (Durum Makinelerinden) çok daha kompleks Durum makineleri oluşturmanızıda sağlar.

Kompleks Durum Makineleri

State Designer

StateDesigner kütüphanesi bu kompleks yapıları yönetmek State,View,Static ve Test üzerinden bileşen geliştirebilmenizi ve bu bileşeni simüle ederek, eventleri tetikleyerek görebilmenizi sağlıyor.

State Designer IDE

Peki nasıl kod geliştiriyoruz. useStateDesigner hook ile tüm state ve event yapısını tasarlıyorsunuz. Daha sonra bileşeninizi bu yapıya bağlıyorsunuz.

State Designer Code

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store