Flux

FLUX

Now, FLUX is not a framework, it is an architecture that uses React JS as its “controller – view" layer. The good thing about this architecture, comparing it to MV*, is that it is a very basic concept that scales endlessly. There are no MVVC, MVC, MVMCMVMCM… yeah, the last one was a pun… I love the Angular team calling it MV-whatever. It does not matter what you call it, what matters is that you have a simple to understand and scalable architecture. The FLUX architecture, in my opinion, beats MV* at that. So lets looks more deeply into that statement. These are the three main concepts that builds up FLUX:

  • Dispatcher
  • Stores
  • Components

Though these concepts does not translate directly to the examples above, there are some similarities. A model represents what we call a Store in FLUX. What seperates the Store in FLUX from a traditional model though is that it is part of a one way flow. In Backbone and Angular the interface updates are based on the model, and the interface updates right back. That is not the case with FLUX.

In FLUX the interface is not able to update the stores. They can pass an “intent", also called action, to the dispatcher and the dispatcher notifies all the stores about this intent. So the point here is that the stores holds all the application state and when a user interaction occurs, a server request is responded etc., they are all passed through the dispatcher as an “intent" that notifies all the stores.

When a store has updated their state, a “change" event is emitted which any component can listen to. A component receiving this ‘change’ event will rerender. This is the same principle as Backbone, BUT there is one huge difference. A component does not rerender all its content, it will only update the parts of the DOM that it needs to. This is done by React JS own virtual DOM and a difference alghoritm that results in DOM operations. It is really quite brilliant.

So the flow is: DISPATCHER -> STORES -> COMPONENTS. If a component wants to change state they have to send an intent to the dispatcher. In MVC, you often have: MODEL <-> CONTROLLER <-> VIEW, state is changed in both directions. So think of double digits of models, controllers and views, all going in both directions, crossing each other. It gets problematic! In FLUX though, it does not matter how complex your application gets, the flow is the same all over. And that is exactly what makes FLUX easy to work with.

廣告
本篇發表於 javascript, Uncategorized 並標籤為 。將永久鏈結加入書籤。

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s