STATE MANAGEMENT

WITH MOBX
■ Sözlükte «Bir kişinin veya şeyin durumu veya varoluş
biçimi, özellikle durumu değişmeye tabi olan kişilerin
veya nesnelerin geçici durumu» olarak tanımlanıyor.
■ Daha kısa bir ifadeyle uygulamanın veya bileşenlerinin
mevcut durumunu açıkladığını söyleyebiliriz.

State Management
■ MobX, FRP(Functional Reactive Programming)’yi şeffaf
bir şekilde uygulayarak state yönetimini basit ve
ölçeklenebilir hale getiren battle tested bir kitaplıktır.
■ Daha basit tabirle uygulamanın reaktif verilerini UI’ya
bağlamayı kolaylaştıran bir state management türüdür

MobX
FRP Nedir?
■ Fonksiyonel Reaktif Programlama, geleneksel
zorunluluk yaklaşımlarına kıyasla karmaşık zamansal
bağımlılıkları daha yönetilebilir ve anlaşılır bir şekilde
ifade etmenin bir yolunu sağlar. Özellikle UI
geliştirmede, oyun geliştirmede ve zamanla değişen
verilerle çalışmanın merkezi bir konu olduğu tüm
uygulamalarda kullanışlıdır.
■ Bu sebeplerden ötürü MobX’te de FRP uygulanır.
Hangi diller ile kullanılabilir?

React Flutter Angular Node.js

GENELLIKLE MVVM ILE
BIRLIKTE KULLANILIR
MVVM Nedir?
■ MVVM proje geliştirirken, katmanların
birbirinden ayrılması ve bu katmanlar
arasındaki ilişkileri yönlendirdiğimiz
tasarım kalıbı (design pattern)’dır.
■ Model->View->ViewModel
katmanlarından oluşmaktadır
Model : Web servislerinde , veri tabanlarında veya farklı veri
kaynaklarından çekilen verileri temsil etmek için
oluşturduğumuz sınıflardır.

View : Kullanıcının etkileşimde bulunduğu önyüzlerin

(Activity,Fragment) içerdiği kodların bulunduğu sınıflardır. Bu
sınıflarda lojik işlemler yapılmaz. Bu sınıfların
amacı ViewModel’dan istediğimiz verileri Observe etmektir.
Kullanıcı ile ekran arasındaki işlemler gerçekleştirilir.

ViewModel : View ile Model’ler arasındaki iletişimi sağlayan

sınıflardır. Bu sınıflarda lojik işlemler
gerçekleştirilir. View’den istek atılır ve ViewModel’da belirli
lojikler ile veri kaynakları sağlanır. Bu katmanda store classlar
bulunur.
■ Temel görevi , bileşenlerdeki logic ve statei, hem
frontend hem de backend JavaScript'te kullanılabilecek
bağımsız, test edilebilir bir birime taşımaktır .

Store Class
MobX temelde 3 bileşenden oluşur:
Observables

■ State’i izlenecek olan değişkenler denebilir.

Basit primary (int, float,char veya double)
değişkenler olabileceği gibi karmaşık bir
widget tree de olabilir.
■ İzlemek istediğimiz değişkeni
‘@observable’ ile sarmalarız.
■ Ayrıca hesaplanabilir observablelar da
bulunmaktadır. Bunun için get
fonksiyonunu ‘@computed ile sarmalarız.
Actions
■ Observable variable’ları güncellemek ve değiştirmekten sorumludurlar.
■ Diğer bir tabirle değişime uğrayan observableların methodlarıdır.
■ Bu methodları ‘@action’ ile sarmalarız
Reactions
■ Durum değişikliklerine otomatik olarak tepki verilen bölümdür. Bu
reaksiyonu gözlemleyebilmek için gözlemlemek istediğimiz variableın
bulunduğu yeri Observer ile sarmalarız.
Artıları

■ MobX standart kod yazmayı gerektirmez;

■ MobX'te çok sayıda store class bulunabilir, bu da bunların
mantıksal olarak ayrılabileceği anlamına gelir.
■ MobX'i anlamak ve öğrenmek çok daha kolaydır;
■ Durum değişikliklerinde tutarlılık ve düzen sağlayarak
uygulamayı daha öngörülebilir ve hata ayıklamayı daha
kolay hale getirir.
Eksileri

■ Bazen basitlik ve katı kuralların olmaması, sürdürülemez

kodlara yol açabilir. Yapıyla ilgili sahip olduğumuz artan
özgürlük harikadır, ancak actionları state e sıkı bir şekilde
uygulamadan durumu yanlış bir şekilde güncellemek de
aynı derecede kolay olabilir.
■ İşler otomatik olarak yapıldığından hata ayıklamak daha
zordur. Bir hatanın kaynağını belirlemek zor olabilir.
■ Kaçınılması gereken yaygın bir hata, observableların
doğrudan actionlar dışında güncellenmesidir bu da
tutarsızlığa yol açabilir.
KAYNAKLAR
■ https://medium.com/bancolombia-tech/what-does-the-state-management-in-flutter-mean
-how-can-i-apply-it-151944b88cac#:~:text=States%20Manager,is%20encapsulated%20i
n%20the%20widget
■ https://medium.com/flutter-students-club/state-management-with-mobx-32552611a481
■ https://betterprogramming.pub/how-to-manage-state-in-flutter-with-mobx-cf5be8e8e50
e
■ https://rcpyesilkaya.medium.com/nedir-bu-mvvm-8af484655b11
■ https://www.sunriseintegration.com/learn/what-is-mobx-and-why-do-you-need-it-in-yo
ur-project
■ https://prog.world/upgrade-your-interaction-with-mobx/
■ https://mobx.js.org/defining-data-stores.html#:~:text=Stores%20can%20be%20found
%20in,both%20frontend%20and%20backend%20JavaScript