Apa itu Arsitektur Flux? Mengapa Flux ada?

Afrian Junior
Catatan Javascript
Published in
3 min readSep 23, 2018
sumber: https://www.youtube.com/watch?v=S8ArGSiYYBw

Semakin berkembangnya Web Application tentu semakin banyak hal yang dibutuhkan saat memuat halaman. Contohnya Facebook, yang mungkin tidak kita sadari, sekali membuka halaman apa saja, banyak component yang dimuat misalnya Notification Chat, Chat Box, dan Chat List, 3 komponen ini mempunyai basis data yang sama, contohnya seperti dibawah:

[
{
id: 'sadAdnsk2skadna24sx',
senderName: 'Mahmudin',
message: 'dimane lo',
isRead: false
},
{
id: 'zaugdja2jasa8qjsaxx',
senderName: 'Ucup',
message: 'utang mana utang?',
isRead: false
}
{
id: 'wiysjanx2laxxs0dwmnmn',
senderName: 'Bella',
message: 'apa kabar?',
isRead: true
}
]

Notification Chat menghitung berapa chat yang belum dibaca, lalu menampilkan jumlah chat yang belum dibaca.

Chat Box memperlihatkan chat yang ada sedang buka berdasarkan id chat dari data chat diatas.

Chat List memperlihatkan riwayat chat yang dimiliki, berdasarkan data diatas.

Seperti kita lihat, 3 komponen diatas menggunakan 1 basis data, jika aplikasi ini menggunakan arsitektur MVC (Model — View — Controller) ini akan sangat menyulitkan, mengingat MVC menggunakan komunikasi 2 arah, jadi setiap komponen meminta data ke Model lalu Model akan memberikan data yang diminta untuk menampilkannya, lalu apa yang terjadi selanjutnya?

MVC

Yup, yang terjadi arsitektur aplikasi akan seperti diagram diatas, dan semakin berkembanganya aplikasi tersebut akan menjadi semakin sulit dikembangkan.

Lalu solusinya?

Flux adalah arsitektur aplikasi yang dikembangkan oleh Tim Facebook untuk mengatasi masalah ini.

Flux sendiri menggunakan unidirectional data flow, alias alur data 1 arah. Dimana setiap perubahan data akan berdampak ke seluruh komponen yang membutuhkan.

Flux Concept

Cara Kerjanya

View merupakan bagian teratas dari hirarki arsitektur ini, dia yang memerintahkan Dispatcher untuk call data melalui Action lalu data yang diterima akan disimpan kedalam Store, selanjutnya Store akan mem-broadcast data tadi ke View yang membutuhkan.

Lalu apa yang terjadi jika aplikasi sebesar Facebook?

Kesimpulan

Dengan arsitektur ini kita sangat diuntungkan, apa lagi kebutuhan industri digital jaman sekarang sangatlah besar. So, mari belajar!

Sumber

--

--